Serpent coloré

Porteur(s) du projet : Chloé Guironnet

Date : Mai 2017

Contexte : cours de “Culture & pratiques techniques”

Lien : Programme

Source : OpenProcessing FlossManuals

Le programme

J'ai voulu créer un programme avec une interactivité avec la souris. J'ai ensuite cherché des pistes sur Open processing et je me suis inspirée d'un code existant ainsi que d'un site expliquant comment créer l'interactivité avec la souris :

RAJOUTER LE LIEN SUR L'EXEMPLE D'OPEN PROCESSING

La souris dessine une sorte de serpent coloré du bleu au rouge. L'accumulation des points forme l'illusion d'un serpent. Le bouton permet de changer la couleur du fond.

Librairie à télécharger

ControlP5

La librairie control P5 permet d'ajouter et de contrôler le bouton qui change la couleur du fond.

Le code

Code principal

/*
Chloé Guironnet
Programme le serpent multicolore
*/
// Importation des librairies
import controlP5.*;
ControlP5 cp5;
int myColor = color(255);
int c1,c2;
float n,n1;
// Déclaration des variables
PVector[] points; // couleur en point
float ease = 0.5;
boolean easing = true;
int num=100, frames=165;
void setup() {
size(600,600); // taille de la fenêtre
noStroke(); // pas de contour
cp5 = new ControlP5(this);
// créer un bouton avec le nom 'effet'
cp5.addButton("effet") //nom du bouton
.setValue(0) // valeur de départ
.setPosition(10,10) // position du bouton dans la fenêtre
.setSize(200,19) // taille du bouton
;
//information du serpent
colorMode(HSB,360,100,100); // Mode de couleur HSB
points = new PVector[num];
for (int i=0; i<num; i++) {
points[i] = new PVector(width/2, height/2);
}
}
void draw() {
background(myColor); // appliquer l'effet mycolor pour le fond
myColor = lerpColor(c1,c2,n); // paramètres de mycolor
n += (1-n)* 0.1;
// info serpent
noStroke(); // pas de contour
PVector leader = new PVector(mouseX, mouseY); // interaction avec la souris
for (int i=0; i<num; i++) {
fill(180.0/num*i,90,90); // remplissage des ronds
PVector point = points[i];
PVector distance = PVector.sub(leader, point);
PVector velocity = PVector.mult(distance, ease);
point.add(velocity);
ellipse(point.x, point.y, 70, 70); // création des ronds coloré
leader = point;
}
}
// relatif au bouton
public void controlEvent(ControlEvent theEvent) {
println(theEvent.getController().getName());
n = 0;
}
// Effet de controle du bouton
public void effet(int theValue) {
println("l'effet du bouton: "+theValue); // affichage dans la console
c1 = color(0,145,100); // couleur du fond
c2 = color(0,14,100); // couleur du fond
}

Photos