Création de dessins "numériques" à la souris
Dessiner des ellipses dont la taille dépend de la vitesse de passage de la souris (oui c'est possible...)
On a déjà rencontré l'instruction : line(pmouseX,pmouseY,mouseX,mouseY); qui permet de tracer une ligne qui suit la souris dans le canvas.
Pour mieux comprendre cette instruction regardons l'exemple ci-dessous:
On a ralentit le frameRate pour pouvoir se rendre compte de la création de la ligne...
Bouger la souris dans le canvas
On voit clairement une ligne se dessiner entre deux points dont l'un est l'ancienne position de la souris (pmouseX,pmouseY) et la position de la souris (mouseX,mouseY)
On voit clairement également que plus on déplace rapidement la souris plus la ligne est longue. Nous allons donc faire dessiner des ellipses positionnées là où se trouve la souris et dont les diamètres dependront de la rapidité avec laquelle on déplacera la souris.
On utilisera la formule suivante pour les diamètres : (abs(pmouseX-mouseX)+abs(pmouseY-mouseY))/2 voir l'explication
Modifiez cette formule à votre guise...
Travail à réaliser
Dans Processing3 en mode P5js, reprenez ce programme et y apporter les modifications suivantes :- Pour que le canvas prenne tout l'espace : createCanvas(windowWidth, windowHeight)
- Faire en sorte que les bords des ellipses ne soient plus visible
- Faire dessiner 3 autres ellipses par symétrie. Voir l'explication
- Modifiez les couleurs pour que cela vous plaise...Faites un dessin, puis click droit sur le canvas et enregistrez votre oeuvre...
Créons un programme pour "simuler un tag"
Dans un premier temps explorons le mode HSB pour gérer les couleurs.
Les "canaux" "HSB" correspondent : H = Hue - Teinte, S = Saturation - Saturation et B = Brightness - Brillance
- H est un nombre variant entre 0 et 360.
- S et B sont des pourcentages et varient donc entre 0 et 100%.
L'instruction hue = constrain(hue,0,360); oblige la variable hue à rester comprise entre 0 et 360.
Travail à réaliser
- Copiez - collez le programme ci-dessous dans Processing3 en mode P5js
- Réalisez quelques "tag" et enregistrer les images obtenues
- Rajoutez ce qu'il faut pour qu'en appuyant sur la touche 'e' le dessin s'efface
- Réalisez une galerie de "tag" créés par vous...(Projet)
- Pour les plus courageux...Remplacez le changement de couleur (flèches du clavier) par un "slider" Allez voir là avec la librairie Dom
var teinte; // stocker la teinte d'une couleur
function setup() {
createCanvas(windowWidth, windowHeight);
background(0);
teinte = 255; // intialisation à bleu
colorMode(HSB, 360, 100, 100, 100); // appliquer le mode HSB
}
function draw() {
var taille = (abs(pmouseX-mouseX)+abs(pmouseY-mouseY)) + 10 ;
if (mouseIsPressed) { // si la souris est clickée on dessine avec la fonction de dessin définie ci-dessous
spray(mouseX, mouseY, taille);
}
if (keyIsDown(LEFT_ARROW)) { // si la flêche de gauche est préssée
teinte = teinte -1 ; // on modifie la teinte
teinte = constrain(teinte, 0, 360); // on s'assure de rester dans le cadre des valeurs utilisables
}
if (keyIsDown(RIGHT_ARROW)) {
teinte = teinte +1;
teinte = constrain(teinte, 0, 360);
}
// dessiner un petit carré représentant la teinte sélectionnée
fill(teinte, 100, 100, 100);
rect(0, windowHeight -25, 25, 25);
}
// fonction permettant de dessiner un ensemble de taches de couleurs dans un rayon défini
// ce rayon dépendera de la vitesse de la souris
function spray(x, y, taille) {
push();
noStroke();
fill(teinte, 100, 100, 20); // on applique la teinte et on garde une transparence importante
translate(x, y);
for (var i = 0; i < 150; i = i+1) {
// coordonées polaire = rayon + angle
var radius = random(taille) ;
var angle = random(TWO_PI);
// formule de passage de coordonées polaires en coordonnées catésienne
var xpos = radius*cos(angle);
var ypos = radius*sin(angle);
// on dessine une ellipse dont la taille dépend de son éloignement
ellipse(xpos, ypos, map(radius, 0, taille, taille/5, 0), map(radius, 0, taille, taille/5, 0));
}
pop();
}
