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:
under GPL-3.0 License.


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

Online OK Firefox62 Chrome69 Safari12
Local  OK Firefox62  Problem Firefox76 Chrome69 Safari12 (CORS Cross Origin Request Sharing)

OK Ecran normal OK Ecran retina
 
Source: 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...

 En local: OK Firefox 62  Problem Chrome 69  Safari 12  Opera 56
                          Problem Cross-origin resource sharing (CORS)
 En ligne: OK Firefox 62  Chrome 69  Safari 12  Opera 56
 
 Source: Ex-p5-Audio13-File.zip

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

 En local: OK Firefox 62  Problem Chrome 69  Safari 12  Opera 56
                          Problem Cross-origin resource sharing (CORS)
 En ligne: OK Firefox 62  Chrome 69  Safari 12  Opera 56
 
 Source: 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

Online OK Firefox75 Chrome81 Safari13
Local  OK Safari13 Problem Firefox75 Chrome81 (CORS Cross Origin Request Sharing)

Source: Ex-p5-Film1.zip
 
 

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


Button  library p5.dom.js 
 
Ex_p5_Button3.png    OK en local Firefox Chrome Opera
<- OK en ligne Firefox Chrome Opera

Source: Ex_p5_Button3.zip
 
 
Audio Record/Play  libraries: p5.dom.js  p5.sound.js
Ex_p5_Button3.png    OK en local Firefox Chrome Opera / Problem Safari
<- OK en ligne Firefox / Problem Chrome Safari Opera

Problem: p5.sound.js utilise Navigator.getUserMedia()
         p5.sound library -> Reference -> p5.AudioIn 
  
Source: Ex_p5_Audio17_Record.zip

 



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é
Sous MacOS   -> Chrome -> Paramètres -> Paramètres avancés -> Paramètres du contenu -> 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  Issue  Download  Releases  p5.js editor
p5.sound  library   Examples   Source    Issue  Download  Releases
p5.dom    library   part of the p5.js distribution
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
Introduction au code créatif avec p5.js par Laurent Malys
FLOSS Manuals: p5.js pour le webdocumentaire

Livre: Make: Getting Started with p5.js



Toute personne dont le nom, la photographie, la voix 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 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 4 2021
Valid HTML 4.01 Transitional
Paresys Home