Avec la souris

La variable mouseX stocke les coordonnées en X de la souris, mouseY celle en Y.

function setup() {
createCanvas(480, 120);
fill(0, 102);
noStroke();
}
function draw() {
ellipse(mouseX, mouseY, 9, 9);
}

Les variables pmouseX et pmouseY stockent la position de la souris à l’image précédente.

function setup() {
createCanvas(480, 120);
strokeWeight(4);
stroke(0, 102);
}
function draw() {
line(mouseX, mouseY, pmouseX, pmouseY);
}

La variable mouseIsPressed de la souris est utilisé avec l’instruction if pour déterminer quand une ligne de code sera exécuté et quand elle ne l’est pas. 

function setup(){
createCanvas(500,500);
}
function draw(){
  for(var i=0;i<500 ;i+=5){
    rect(i, 0, 3, 500);
  }
  if (mouseIsPressed) { // ou bien (mouseIsPressed == true) 
  for(  var i=500 ; i>0 ; i-=4) {
     //ellipse(i,0, i,i);
     ellipse(width/2,height/2, i,i);
  }
  }
}

if & else : donnent deux possibilités

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

function draw(){
  for(var i=0;i<500 ;i+=5){
      fill(255);
    rect(i, 0, 3, 500);
  }
  for(  var i=500 ; i>0 ; i-=4) {
  if (mouseIsPressed == true) {
    ellipse(width/2,height/2, i,i);
  }else{
      ellipse(i,0, i,i);
  }
}
}

Utiliser plusieurs bouton de la souris : click droit & click gauche

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

function draw(){
     for(var i=0;i<500 ;i+=5){
    rect(i, 0, 3, 500);
  }
    if (mouseIsPressed) {
        if (mouseButton == RIGHT) {
          for(  var i=500 ; i>0 ; i-=4) {
        ellipse(width/2,height/2, i,i);
          }
      }else{
        for(  var i=500 ; i>0 ; i-=4) {
        ellipse(i,500, i,i);
          }
        }
    }
}

Le clavier

p5.js garde la trace du moment où une touche sur un clavier est enfoncée, ainsi la mémoire de la dernière touche enfoncée. 

function setup() {
  createCanvas(600, 600);
}
 
function draw() {
  background(255);
  for (var x=0; x <= width; x+=40) {
    for (var y=0; y <= height; y+=80) {
      ellipse(x, y, 40, 40);
      if (keyIsPressed) {
      rect(x,y+20,40,40);
      }
    }
  }
}

Dans cet exemple 3 touches sont utilisées, h, j & k. L’opérateur || (ou) permet d’utiliser soit les bas de casse soit les capitales.

function setup() {
  createCanvas(400, 400);
}
 
function draw() {
    var l = random(0,200);
  noStroke();
  fill(random(100), random(150, 220), random(150, 220), random(100, 150));
  if (keyIsPressed) {
    if ((key == 'h') || (key == 'H')) {
  ellipse(random(0, 400), random(0,400), l, l);
    }
    if ((key == 'g') || (key == 'G')) {
  rect(random(0, 400), random(0, 400),l, l);
    }
  if ((key == 'j') || (key == 'J')) {
  triangle(random(0,400), random(0,400), random(0,400), random(0,400), random(0,400), random(0,400));
  }
  }
}

Pour déplacer un élément au clavier avec les flèches directionnelles utiliser UP_ARROW, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW.

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) {
        x--;
    }if (keyCode == RIGHT_ARROW) {
        x++;
    }if (keyCode == DOWN_ARROW) {
        y++;
    } if (keyCode == UP_ARROW) {
        y--;
        }        
    }
rect(x, y, 50, 50);
}

L’écran tactile

Pour les écrans tactiles p5.js propose plusieurs variables qui fonctionnent comme celles de la souris.

function setup() {
createCanvas(800, 600);
}
function draw() {
background(200);
line(20, 20, width-20, height-20);
if (touchIsDown) {
line(width-20, 20, 20, height-20);
}
}

De même touchX & touchY existent

function setup() {
createCanvas(800, 600);
fill(0, 102);
noStroke();
}
function draw() {
ellipse(touchX, touchY, 30, 30);
}