p5js
Sketches


"p5.js is a JavaScript library that starts
with the original goal of Processing,
to make coding accessible for artists,
designers, educators, and beginners,
and reinterprets this for today's web."

"p5.js est une bibliothèque JavaScript
qui part de Processing, permet
un codage accessible aux artistes,
designers, enseignants et débutants,
et réinterprète cela pour le web actuel."


Quelques simples sketches p5.js: Some simple sketches p5.js:


Image

 IMG_8583  Image - Degré 0  Ex-p5-Image0.zip

 Ex-p5-Image4-Elastic  Ex-p5-Image4-Elastic.zip
 
 Ex-p5-Image5-Blend  Mélange / Blend Ex-p5-Image5-Blend.zip
 
 Mask  Masque / Mask  Ex-p5-Image10-Mask.zip

 Ex-p5-Image11-Scroll  Défilement / Scrolling  Ex-p5-Image11-Scroll.zip
 

Pixel
 
 Ex-p5-Pixel1  RVB / RGB  Ex-p5-Pixel1.zip
 
 Ex-p5-Pixel6-Alea  Aléatoire / Random Ex-p5-Pixel6-Alea.zip
 
 Ex-p5-Pixel7-Alea  Comme du sable / Like sand  Ex-p5-Pixel7-Alea.zip
 
 Ex-p5-Iching3 I Ching  Ex-p5-Iching3.zip
 

Audio  library p5.sound.js 
 
 White171x128  Audio - Degré 0  Ex-p5-Audio0-File.zip
 
 Ex-p5-Audio3-File-FFT  Display FFT  Ex-p5-Audio3-File-FFT.zip

 Ex-p5-Audio5-File-Speed.png  Change Speed & Volume  Ex-p5-Audio5-File-Speed.zip
 
 Ex-p5-Audio8-Noise-Filter  Filtered noise  Ex-p5-Audio8-Noise-Filter.zip
 
 Ex-p5-Audio9-Filex6  Audio files random played  Ex-p5-Audio9-Filex6.zip
 
 Ex-p5-Audio13-File  Audio file...  Ex-p5-Audio13-File.zip

 Ex-p5-Audio14-File-Display  Display an Audio file  Ex-p5-Audio14-File-Display.zip  

Ex-p5-Audio11-In/Ex-p5-Audio11-In  Entrée Audio / Audio Input (Microphone...)
 Mesure du niveau sonore / Measurement of sound level (0 .. 100)
 OK Firefox / Problem Chrome Safari Opera
 Microphone permissions?

 Source: Ex-p5-Audio11-In.zip


Speech  library p5.speech.js 
 
Ex-p5-Speech1  Synthèse vocale / Speech synthesis

 OK Chrome / Problem Firefox, Safari, Opera sous MacOS
 OK Chrome, Firefox sous Windows7
Source: Ex-p5-Speech1.zip


Ex-p5-SpeechRecognition1 Reconnaissance vocale / Speech recognition
Actualiser la page pour recommencer / Refresh page to retry

OK Chrome online (no offline) Mac & Windows7
Problem Firefox, Safari, Opera 
Source: Ex-p5-SpeechRecognition1.zip
 

Text
 
Ex-p5-Text5  Police de caractères / Font

 OK Chrome, Safari
 Font problem with FireFox v48 + MacOSX.6 
 Font problem with FireFox v50 + Windows7

 Source: Ex-p5-Text5.zip 

 
File
 
 Ex-p5-File1  Ex-p5-File1.zip
 
 
Audio-Image
 
 Ex-p5-Audio-Image2-Web  Ex-p5-Audio-Image2-Web.zip

 
JSON
 
Ex-p5-JSON1 Avec les données au format JSON fournies par l'API du site:
With JSON data provided by the site's API:
openweathermap.org/api

(24 1 2017 screenshot)

Source: Ex-p5-JSON1.zip
 
 
Video  library p5.dom.js 
 
Ex-p5-Video1 Capture webcam

Touche S sauve l'image (jpg) / S key save the image (jpg)

OK Firefox Mac & Windows
Problem Chrome, Safari, Opera

Source: Ex-p5-Video1.zip
 
 
Film  library p5.dom.js 
 
Ex-p5-Film1/Ex-p5-Film1 Joue un fichier video / Play a video file

Mouse click = Play / Pause
Touche S sauve la fenêtre (jpg) / S key save the window (jpg)

Supported media formats

OK Firefox Safari

Source: Ex-p5-Film1.zip
 
 

Tous les sketchs: Ex-p5-14-2-2017.zip (23M)




En chantier: LANGESOURIT172x128 Perec Alphabets

D'après:
Georges Perec - Alphabets
Cent soixante-seize onzains hétérogrammatiques
Edition Galilée, 1976 
pdf editions-galilee.fr
 
Taper les flèches gauche <- et droite -> du clavier
       (Onzains: 1 2 3 14 24 43 44 88 108 145 176)
Glisser la souris...

(Problème d'affichage de police de caractères avec FireFox v48 + MacOSX.6 à résoudre...)



Sketches Processing convertis en p5.js:

iching   iching2   Indistinct_Oasis ...



En cas de problèmes pour lancer les JavaScripts depuis cette page:

Avec Safari
Safari -> Préférences... -> Sécurité -> Contenu web -> Activer JavaScript -> Cocher

Avec Firefox
Firefox -> Barre d’adresse -> about:config -> javascript.enabled -> true

Avec Google Chrome
     Sous Android -> Chrome ->  Paramètres -> Paramètres du site -> JavaScript: Autorisé

Avec Opera
     Opera -> Préférences... -> Avancé -> Contenu -> Activer le Javascript

Voir: Comment activer JavaScript dans votre navigateur

Liens / Links

p5 Officiel:
p5.js -> Reference  Tutorials  Examples  Download  p5.js editor
p5.sound  library
p5.dom    library
p5.speech library
GitHub  
Web Editor  

JavaScript:
JavaScript sur mozilla.org -> Reference
JavaScript Tutorial sur w3schools
En quoi le langage JavaScript est-il différent de Java?

Processing:
../ARGOPd/wikipedia-16x16fr Processing   ../ARGOPd/wikipedia-16x16en Processing  
Site Processing 

Méthode Processing 
Méthode Processing suite: Les Processing
Méthode Conversion Processing -> p5
 
Sites p5:
p5.js tutorials by Daniel Shiffman
OpenProcessing
lyceelecorbusier
Introduction p5js en français par Berenger Recoules
FLOSS Manuals: p5.js pour le webdocumentaire

Livre: Make: Getting Started with p5.js



Toute personne dont le nom, la photographie, la voix (permettant son identification) apparaît sur ce site peut à tout moment demander la suppression ou la modification des informations la concernant en contactant:
gerard.paresys
   
   
   
   
Anyone whose name, photograph, voice (allowing their identification) will appear on this website may at any time request the deletion or modification of information concerning him by contacting:
gerard.paresys
Paresys Accueil page mise à jour 6 10 2017
Valid HTML 4.01 Transitional
Paresys Home