Get Bold Class – Formation à l’utilisation et au développement des langages Javascript et de la librairie P5.JS

FORMATION À L'UTILISATION ET AU DÉVELOPPEMENT DES LANGAGES JAVASCRIPT ET P5.JS

Ce cours abordera principalement le lien entrenu entre le Javacript et la conception de sites web. Il s'inspire très largement de formations présentent en ligne sur le sujet.

https://p5js.org

Pour vous aidez durant le cours vous pouvez accéder aux références de P5.JS :

https://p5js.org/reference/

Et aux références de la librairie P5.DOM spécialiser dans les manipulations du HTML :

https://p5js.orghttps://p5js.org/reference/#/libraries/p5.dom

Installer P5

Commencer par télécharger P5.JS

À l'intérieur du dossier P5 créez un nouveau dossier que vous nommerez example et créez à l'interieur de ce dossier un fichier index.html avec ce code à l'interieur :

<!DOCTYPE html>

<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>p5.js example</title>
<script src="https://getbolddesign.com/p5.min.js"></script>
<script src="https://getbolddesign.com/addons/p5.dom.min.js"></script>
<script src="..addons/p5.sound.min.js"></script>
<script src="sketch.js"></script>
</head>
<body>

</body>
</html>

Les modifications en javascript se feront donc dans le fichier sketch.js et seront grâce à la librairie P5 directement injectée dans le code HTML

function setup() {
// put setup code here

function draw() {
// put drawing code here
}

Dessiner des formes primitives

Voici un court programme présentant les principales formes primitives disponibles dans P5. tester ce code et essayer de comprendre comment chacune des formes fonctionnent.

 

function setup() {
createCanvas(displayWidth, displayHeight);
ellipseMode(CENTER);
rectMode(CENTER);
}

function draw() {
background(200);
ellipse(40, 40, 40, 40);
rect(120, 40, 40, 40);
triangle(180, 60, 220, 60, 200, 20 );
line(260 , 60, 300, 60);
quad(340, 20, 380, 40, 360, 60, 340, 60);
}

On remarque que toutes les variables sont des multiple de 20 trouver un moyen d'écrire le même code en simplifiant et en utilisant une seule fois la variable de 20.

Solution

 

let side = 20;

function setup() {
createCanvas(displayWidth, displayHeight);
ellipseMode(CENTER);
rectMode(CENTER);
}

function draw() {
background(200);
ellipse(side*2, side*2, side*2, side*2);
rect(side*6, side*2, side*2, side*2);
triangle(side*9, side*3, side*11, side*3, side*10, side );
line(side*13 , side*3, side*15, side*3);
quad(side*17, side, side*19, side*2, side*18, side*3, side*17, side*3);
}

Maintenant pour vous convaincre de toute la puissance des variables si c'est encore nécessaire, amusez-vous à changer la valeur de side.

Exercice | Le rebond

 

var d = 100;
var x = 100;
var vitesse = 2;
var direction = 1;
function setup() {
createCanvas(800, 300);
ellipseMode(CENTER);
}
function draw() {
background(0);
x += vitesse * direction;
ellipse(x, 100, d, d);
if ((x > width-d/2) || (x< d/2)) {
direction = -direction; // Changer de direction
}
}

Exercice

Rendez ce sketch interactif : En fonction de l'emplacement de la souris modifier:

  • La couleur du fond
  • La couleur du rectangle
  • la taille du rectangle

 

 

function setup() {
canvas = createCanvas(720, 720);
canvas.position(windowWidth/2-width/2,windowHeight/2-height/2);
noCursor();
}

function draw() {
colorMode(HSB, 360, 100, 100);
rectMode(CENTER);
noStroke();
background(2, 100, 100);
fill(230, 100, 100);
rect(360, 360,200 ,200);
}

function keyTyped() {
if (key=='s' || key=='S') save("P_1_0_01.png");// Regarder bien cette ligne elle permet de sauvegarder une image du background en appuyant sur la touche "S"
}

Solution

 

function setup() {
canvas = createCanvas(720, 720);
canvas.position(windowWidth/2-width/2,windowHeight/2-height/2);
noCursor();
}

function draw() {
colorMode(HSB, 360, 100, 100);
rectMode(CENTER);
noStroke();
background(mouseY/2, 100, 100);
fill(360-mouseY/2, 100, 100);
rect(360, 360,mouseX+1, mouseX+1);
}

function keyTyped() {
if (key=='s' || key=='S') save("P_1_0_01.png");// Regarder bien cette ligne elle permet de sauvegarder une image du background en appuyant sur la touche "S"
}

Eaaaaaasy again ! 😎

Exercice

Il est temps de voir à quel point P5 peut-être un outil créatif pour les designer web grâce au programme suivant vous pouvez créer un générateur de dessin originaux, tout en sauvegardant votre production. L'exercice ici consiste à produire quelque chose en utilisant tous le potentiel du programme, puis enregistrez votre production, enfin publier l'image enregistréz dans une carte Trello intitulé "Dessin P5"

 

 

/**
* drawing with a changing shape by draging the mouse.
*
* MOUSE
* position x          : length
* position y          : thickness and number of lines
* drag                : draw
*
* KEYS
* 1-3                 : stroke color
* del, backspace      : erase
* s                   : save png
*/

var état = 0

function setup(){
createCanvas(780, 780);
colorMode(HSB, 360, 100, 100, 100);
smooth();
noFill();
background(360);
}

function draw(){
if(mouseIsPressed){
if (état == 0){
push();
translate(width/2,height/2);
var circleResolution = int(map(mouseY+100,0,height,2, 10));
var radius = mouseX-width/2;
var angle = float(TWO_PI/circleResolution);
var strokeColor = color(192, 100, 64, 10);
strokeWeight(2);
stroke(strokeColor);
beginShape();
for (var i=0; i<=circleResolution; i++){
var x = float(0 + cos(angle*i) * radius);
var y = float(0 + sin(angle*i) * radius);
vertex(x, y);
}
endShape();
pop();
}
}
if(mouseIsPressed){
if (état == 1){
push();
translate(width/2,height/2);
var circleResolution = int(map(mouseY+100,0,height,2, 10));
var radius = mouseX-width/2;
var angle = float(TWO_PI/circleResolution);
var strokeColor = color(0, 10);
strokeWeight(2);
stroke(strokeColor);
beginShape();
for (var i=0; i<=circleResolution; i++){
var x = float(0 + cos(angle*i) * radius);
var y = float(0 + sin(angle*i) * radius);
vertex(x, y);
}
endShape();
pop();
}
}
if(mouseIsPressed){
if (état == 2){
push();
translate(width/2,height/2);
var circleResolution = int(map(mouseY+100,0,height,2, 10));
var radius = mouseX-width/2;
var angle = float(TWO_PI/circleResolution);
var strokeColor = color(52, 100, 71, 10);
strokeWeight(2);
stroke(strokeColor);
beginShape();
for (var i=0; i<=circleResolution; i++){
var x = float(0 + cos(angle*i) * radius);
var y = float(0 + sin(angle*i) * radius);
vertex(x, y);
}
endShape();
pop();
}
}
}

function keyPressed(){
if (keyCode == DELETE || keyCode == BACKSPACE){
background(360);
}
}

function keyTyped(){
if (key=='s' || key=='S') save("P_2_0_03.png");
if (key == "1"){
état = 0;
}
if (key == "2"){
état = 1;
}
if (key == "3"){
état = 2;
}
}

Voici un autre Exemple tout aussi bluffant, amusez-vous à remplacer le texte par celui de votre choix.

// Generative Gestaltung, ISBN: 978-3-87439-759-9
// First Edition, Hermann Schmidt, Mainz, 2009
// Hartmut Bohnacker, Benedikt Gross, Julia Laub, Claudius Lazzeroni
// Copyright 2009 Hartmut Bohnacker, Benedikt Gross, Julia Laub, Claudius Lazzeroni
//
// http://www.generative-gestaltung.de
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

/**
* draw tool. shows how to draw with dynamic elements.
*
* MOUSE
* drag                : draw with text
*
* KEYS
* del, backspace      : clear screen
* arrow up            : angle distortion +
* arrow down          : angle distortion -
* s                   : save png

*/

var x = 0, y = 0;
var stepSize = 5.0;
var letters = "Mon propos dans les pages qui suivent a plutôt été de décrire le reste : ce que l'on ne note généralement pas, ce qui ne se remarque pas, ce qui n'a pas d'importance : ce qui se passe quand il ne se passe rien, sinon du temps, des gens, des voitures et des nuages.";
var fontSizeMin = 3;
var angleDistortion = 0.0;
var counter = 0;

function setup() {
// use full screen size
createCanvas(780, 780);
background(255);
smooth();
cursor(CROSS);

x = mouseX;
y = mouseY;

textAlign(LEFT);
fill(0);

}

function draw() {
if (mouseIsPressed) {
var d = dist(x,y, mouseX,mouseY);
textFont('Georgia');
textSize(fontSizeMin+d/2)
var newLetter = letters.charAt(counter);;
stepSize = textWidth(newLetter);

if (d > stepSize) {
var angle = atan2(mouseY-y, mouseX-x);

push();
translate(x, y);
rotate(angle + random(angleDistortion));
text(newLetter, 0, 0);
pop();

counter++;
if (counter > letters.length-1) counter = 0;

x = x + cos(angle) * stepSize;
y = y + sin(angle) * stepSize;
}
}
}

function mousePressed() {
x = mouseX;
y = mouseY;
}

function keyTyped() {
if (key == 's' || key == 'S') save("P_2_3_3_01.png");
}

function keyPressed() {
// angleDistortion ctrls arrowkeys up/down
if (keyCode == DELETE || keyCode == BACKSPACE) background(255);
if (keyCode == UP_ARROW) angleDistortion += 0.1;
if (keyCode == DOWN_ARROW) angleDistortion -= 0.1;
}

Interactions utilisateur

Exercice | clic souris

À partir de la base de code ci-dessous faites apparaitre une ellipse lors du clic gauche et un rectangle lors du clic droit ! Enjoy

function setup(){
createCanvas(displayWidth/2,displayHeight/2);
}

function draw(){
background(255,0,0);
if (mouseIsPressed) {
if (mouseButton == RIGHT) {

}else{

}
}
}

Exercice | bouge le cube 

À partir de la base de code ci-dessous faites bouger ce cube de gauche à droite de haut en bas, un indic il faut simplement rajouter des choses aux endroits où il y a des points d'interrogation.

var x = 400/2-25;
var y = 400/2-25;
function setup() {
createCanvas(400, 400);
}
function draw() {
background(200);
if (keyIsPressed) {
if (keyCode == LEFT_ARROW) {
//?
}if (keyCode == RIGHT_ARROW) {
//?
}if (keyCode == DOWN_ARROW) {
//?
} if (keyCode == UP_ARROW) {
//?
}
}
rect(x, y, 50, 50);
}

Exercice | Les inputs dynamiques

Ce morceau de code crée un bouton input en HTML permettant à l'utilisateur de rentrer une donnée tout en nous permettant de la récupérer.

var champ;
var bouton;

function setup() {
createCanvas(780, 200);
background(236,36,94);
textAlign(LEFT)
textSize(20);

champ = createInput();
champ.changed(afficheTexte);
champ.position(20, 65);

bouton = createButton("cliquer");
bouton.mousePressed(afficheTexte);
bouton.position(195,65);
}

function afficheTexte() {
background(236,36,94);
text(champ.value(),20,120);
}

Maintenant que vous maitrisez le game, faites en sorte que le résultat ne s'affiche que si la personne rentre un mot précis que vous avez déterminé.

Exercice | C'est une bonne cam

var video;
var bouton;

function setup() {
createCanvas(780,500);
background(200);
video = createCapture(VIDEO);
video.size(640,480);
video.hide();

bouton = createButton('capture');
bouton.mousePressed(capturerImage);
}

function capturerImage(){
//Ajouter ici le code nécessaire pour faire une capture d'image
}

function draw() {
image(video,70,10);
}