https://editor.p5js.org/Anne-Laure/sketches/TLrK4BGbb

expérience pour ranger des objets en rangs

puis les faire se déplacer et changer de couleur

Voir d'autres expériences avec le même but ici : 

https://editor.p5js.org/Anne-Laure/sketches/HwT2YQXiu

on y trouve également la classe Unite

Suite de https://editor.p5js.org/Anne-Laure/sketches/J3e8kdVJa

****/

​

var lot = [] ;

var lotSize = 17;// ne pas dépasser 20

​

var rayon = 15 ;

var posBG ;       // bas gauche de "boîte"

var dimBte ;      // dimensions boîte

var numero = 0 ;

​

function setup() {

  createCanvas(700, 400);

  noStroke() ;

  // vérification que le lot n'est pas trop gros

  if ( lotSize > 20 ) {

    textSize(20) ;

    fill("red") ;

    text("!!! taille de lot trop importante !!!", 20, height/2 ) ;

    noLoop() ;   

  }

  // créer position initiale zone rangement

  posBG = createVector( width / 10, height / 2 ); 

  // créer un système de rangement

  // matrice de 5 objects de large, max 4 de haut

  dimBte = createVector( 5*rayon, 4*rayon );

  for (let i = 0; i < lotSize; i++  ) {

    let xPos = width / 10 + (i*( rayon + 2 )) ;

    lot.push(new Unite( xPos, height / 3, i ) );

  }

​

}

​

function draw() {

  if (isLooping() ) {

    background(220);

​

    // Dessiner une boîte

    fill("red") ;

    rect(posBG.x, posBG.y, dimBte.x, dimBte.y ) ;

​

    // Loop over the array and update each fish. 

    for (let u of lot){

      /*

      // u.update() ;

      if( u.index % 4 ) {

        u.color = "blue" ;

      } 

      */

      u.show();

    }     

  }

​

}

​

function mousePressed(){

​

  if ( numero < lotSize ) {

    lot[numero].color = "green"  ;

    bteX = posBG.x + dimBte.x - lot[numero].posX * rayon ;

    bteY = posBG.y + dimBte.y - lot[numero].posY * rayon ;

    lot[numero].moveBoite( bteX - rayon/2, bteY - rayon/2 ) ;  

    numero++ ;  

  }

​

}