/ p5.js / p5.play / répertoire

createSprite(); fonction qui permet de créer un sprite.
Elle prend 4 paramètres: 2 pour la position en x et y du sprite, sa largeur et sa hauteur.
Exemple : sprite = createSprite(width/2, height/2, 40, 40); (sprite est le nom de la variable, le nom est libre)

drawSprites () fonction à la fin de draw () qui permet d’afficher le sprite.

shapeColor attribut définit la couleur du rectangle qui représente le sprite.

.position.x et .position.y attributs qui permettent de contrôler la position du sprite
Exemple :
function mousePressed() {
sprite.position.x = mouseX;
sprite.position.y = mouseY;
}

.velocity.x et .velocity.y attributs qui permettent de contrôler la vitesse du sprite
La librairie p5. play s’occupe de mettre à jour la position en fonction de la vitesse pour vous — pas besoin de faire les calculs.

setSpeed attribut du sprite pour indiquer un déplacement dans une direction particulière à une vitesse donnée.
Exemple :
function keyPressed() {
if (keyCode == RIGHT_ARROW) {
sprite.setSpeed(1.5, 0);
} else if (keyCode == LEFT_ARROW) {
sprite.setSpeed(1.5, 180);
}
}

.addSpeed méthode qui permet d’ajouter de la gravité. Deux paramètres sont nécessaires, vitesse et direction
Exemple : sprite.addSpeed(.25, 90)


sprite.position.x = mouseX; 
sprite.position.y = mouseY;
le sprite suit la souris en x et y

sprite.velocity.x = (mouseX – sprite.position.x) * 0.2;
sprite.velocity.y = (mouseY – sprite.position.y) * 0.2;
le sprite suit la souris avec un temps de latence + ou – important.

.attractionPoint () méthode pour définir une force qui pousse le sprite dans la direction de la position de la souris.
maxSpeed attribut de l’objet contrôle la vitesse à laquelle un sprite peut se déplacer, quelles que soient les forces qui s’exercent sur lui.

.friction attribut qui est un multiplicateur qui réduit lentement la vitesse de l’objet,

.rotateToDirection attribut qui, lorsqu’il est réglé sur true, fait tourner l’objet dans la direction où il se déplace.

.rotation attribut qui définit la rotation du sprite (en degrés).
Exemple : sprite.rotation += 4;


Les 4 attributs d’interaction avec la souris :
onMouseOver (lorsque le curseur de la souris se déplace sur l’objet)
onMouseOut (lorsque le curseur de la souris quitte l’objet)
onMousePressed (lorsque l’utilisateur appuie sur le bouton de la souris et que le curseur de la souris se trouve sur l’objet)
onMouseReleased (lorsque l’utilisateur relâche le bouton de la souris, après un événement onMousePressed)

Il existe une fonction dans p5.js nommée createVector();

function setup() {
  createCanvas(200,200);
}

function draw() {
    var pos = createVector(100, 100); // pos pour position
    ellipse(pos.x, pos.y, 50,50);
}

Ceci est l’équivalent de

function setup() {
  createCanvas(200,200);
}

function draw() {
    var x = 100;
    var y = 100;
    ellipse(x, y, 50,50);
}
Opérations mathématiques avec des vecteurs
Additions

Javascript ne sait pas additionner 2 vecteurs avec l’opérateur +.
On ne peut écrire v3 = v1 + v2

Untitled
On utilise la fonction add().
v1.add(v2);

function setup() {
  createCanvas(400,400);
  }

function draw() {
    //background(255);
    stroke(255);
    fill(236,36,94);
    var v1 = createVector(width/2,height/2);
    var v2 = createVector(random(-width/2,width/2), random(-width/2,width/2));
    v1.add(v2)
  ellipse(v1.x, v1.y, 50, 50);
}
function setup() {
  createCanvas(400,400);
  carre = new Carre();
  }

function draw() {
    background(255);
    carre.avance();
}

function Carre(){
    noStroke();
    fill(236,36,94);
    this.pos = createVector(0,height/2);
    
    this.avance = function(){
        this.vel = createVector(1,0);
        this.pos = this.pos.add(this.vel);
        rect(this.pos.x, this.pos.y, 10, 10);
    }
}

 

 

pattern 4

var x, y;

function setup() {
  createCanvas(1600, 600);
  noLoop();
}

function draw(){
  background(255);
  rectMode(CENTER);
  x = width/2;
  y = height/2;
  noFill();
  strokeWeight(2);

  for (var i = 0; i< 10; i++) {
      stroke(random(255), random(20, 225), random(255));
    rect(x + random(-4, 4), y + random(-4, 4), .8*width, .8*height);
  }
  for (var i = (.1*height); i < (.9*height); i += 2) {
    strokeWeight(1);
    stroke(random(255), random(255), random(255));
    line(.1*width+ random(-6, 6), i+random(-4, 4), .9*width + random(-6, 6), i+ random(-4, 4));
  }
}

function mousePressed(){
  redraw();
}
function setup() {
 createCanvas(800, 600);
   background("#ff00ff");
   smooth();
}
 
function draw_grid() {
  noFill();
  background("#ff00ff");
  var incr = 50;
  for (var x=5+ incr/2; x < width; x +=incr) {
    for (var y =5+ incr/2; y < height; y += incr) {
      if (random(20)>18) {
        strokeWeight(8);
        stroke(255);
      }
      else {
        strokeWeight(2);
        stroke("#ff0090");
      }
      ellipse(x, y, incr-10, incr-10);
    }
  }
}
 
function draw() {
}
 
function mousePressed() {
  draw_grid();
  //save("image.png");
}
var incr_x, incr_y, x, y, r;
var countLine = 0; // how many lines in a (vertical) row?
var countCross = 0; // how many crosses in a (vertical) row?
var margin = 5;
var counter = -1;
var isX = [];
var val;
var steps_x, steps_y; // number of rows and columns
var max = 4; // max number of symbols in a row, vertically!
 
function setup() {
  createCanvas(500, 500);
  stroke(0);
  strokeWeight(12);
  strokeCap(SQUARE);
 
  steps_x = 10; //number of columns
  steps_y = 12; //number of lines
 
  incr_x = width/float(steps_x);
  incr_y = height/float(steps_y);
 
  drawPattern();
}
 
function draw() {
}
 
function drawPattern() {
  background(255);
  for (x = 0; x < width; x += incr_x) {
    for (y = (incr_y)/2; y < height; y += incr_y) {
      counter += 1;
      r = random(1);
      if (counter>2*steps_y-1) {
        if (isX[counter-2*steps_y]+isX[counter-steps_y]== 2) {
          val = 0;
        }
        else if (isX[counter-2*steps_y]+isX[counter-steps_y]== 0) {
          val = 1;
        }
        else {
          if (r >0.6) {
            val = 1;
          }
          else {
            val = 0;
          }
        }
      }
      else {
        if (r >0.5) {
          val = 1;
        }
        else {
          val = 0;
        }
      }
      if (countLine == max) {
        val = 1;
      }
      if (countCross == max) {
        val = 0;
      }
      isX = append(isX, val);
      if (isX[counter] == 1) {
        isCross();
      }
      else {
        isLine();
      }
    }
  }
}
 
 
function mouseClicked() {
  drawPattern();
}
 
function isCross() {
  line(x+10, y+(incr_y)/2-margin, x+(incr_x) - margin, y-(incr_y)/2 +margin);
  line(x+10, y-(incr_y)/2+margin, x+(incr_x) - margin, y+ (incr_y)/2 -margin);
  countCross += 1;
  countLine =0;
}
 
function isLine() {
  line(x +margin, y, x + (incr_x)-margin, y);
  countCross = 0;
  countLine +=1;
}