💻 Processing / p5js / L5

Processing est un écosystème et langage de développement d’œuvres multimédia, voire de jeux, axé sur les images, vidéos et le son, initialement dérivé et inspiré de Java, mais qui a lui même dérivé en p5.js et tournant en JavaScript dans le navigateur.

Il vise le développement simplifié de prototypes pour les designers ou les artistes, ainsi que l'apprentissage de la programmation, mais peut se suffire aussi à lui-même.

Exemple pour p5js

// https://editor.p5js.org/garvalf4/sketches/XBBaws7OF

function setup() {
  //createCanvas(400, 400, WEBGL);
  createCanvas(400, 400);
  frameCount = -300;
}

function draw() {
 


// 
//  translate(0,20);
   // Calculate the y-coordinate.

   let y = frameCount * 0.8;
   //let y = 1;
   if (y < 400) { 
 } else { frameCount = -300}

   background('orange');
   //fill('red');
  fill(112,45,y/2)
  rect(0,360,400,30);
    
  fill(112,y,45)
  rect(y*2.5,0,30,400);
  
  // Translate the origin.
  translate(0, y);
  wolf();
  // orbitControl();
  // rotateX(frameCount * 2);
}

function wolf() {
line(243, 220, 310, 153);
line(310, 153, 273, 89);
line(273, 89, 261, 14);
line(261, 14, 200, 43);
line(200, 43, 162, 2);
line(162, 2, 153, 42);
line(153, 42, 231, 58);
line(231, 58, 153, 42);
line(153, 42, 130, 46);
line(130, 46, 123, 52);
line(123, 52, 179, 59);
line(179, 59, 231, 58);
line(123, 52, 117, 66);
line(117, 66, 158, 75);
line(117, 66, 68, 70);
line(68, 70, 158, 75);
line(68, 70, 58, 100);
line(58, 100, 140, 151);
line(58, 100, 105, 141);
line(105, 141, 68, 145);
line(105, 141, 140, 151);
line(68, 145, 140, 151);
line(68, 145, 63, 152);
line(63, 152, 75, 169);
line(75, 169, 145, 173);
line(145, 173, 167, 202);
line(167, 202, 243, 220);
line(145, 173, 197, 178);
line(197, 178, 243, 220);

}

Exemple pour L5 (processing for love2d)

require("L5")



function setup() 
  size(400, 400)
  frameCount = -300
end

function draw() 
background(220)
 


   y = frameCount * 0.8
   if (y < 400) then
  else 
   frameCount = -300
end

   background('orange')

  fill(112,45,y/2)
  rect(0,360,400,30)
    
  fill(112,y,45)
  rect(y*2.5,0,30,400)
  
  -- Translate the origin.
  translate(0, y)
  wolf()
  -- orbitControl()
  -- rotateX(frameCount * 2)
end

function wolf() 
line(243, 220, 310, 153)
line(310, 153, 273, 89)
line(273, 89, 261, 14)
line(261, 14, 200, 43)
line(200, 43, 162, 2)
line(162, 2, 153, 42)
line(153, 42, 231, 58)
line(231, 58, 153, 42)
line(153, 42, 130, 46)
line(130, 46, 123, 52)
line(123, 52, 179, 59)
line(179, 59, 231, 58)
line(123, 52, 117, 66)
line(117, 66, 158, 75)
line(117, 66, 68, 70)
line(68, 70, 158, 75)
line(68, 70, 58, 100)
line(58, 100, 140, 151)
line(58, 100, 105, 141)
line(105, 141, 68, 145)
line(105, 141, 140, 151)
line(68, 145, 140, 151)
line(68, 145, 63, 152)
line(63, 152, 75, 169)
line(75, 169, 145, 173)
line(145, 173, 167, 202)
line(167, 202, 243, 220)
line(145, 173, 197, 178)
line(197, 178, 243, 220)
end

Exemple pour processing (java)

void setup() {
  //createCanvas(400, 400, WEBGL);
  size(400, 400);
  //frameCount = -300;
}

void draw() {
 float y;
  y = frameCount * 0.8;
  if (y < 400) {  } else { frameCount = -300;}

   background(200);
  fill(112,45,y/2);
  rect(0,360,400,30);
    
  fill(112,y,45);
  rect(y*2.5,0,30,400);
  
  // Translate the origin.
  translate(0, y);
  wolf();

}

void wolf() {
line(243, 220, 310, 153);
line(310, 153, 273, 89);
line(273, 89, 261, 14);
line(261, 14, 200, 43);
line(200, 43, 162, 2);
line(162, 2, 153, 42);
line(153, 42, 231, 58);
line(231, 58, 153, 42);
line(153, 42, 130, 46);
line(130, 46, 123, 52);
line(123, 52, 179, 59);
line(179, 59, 231, 58);
line(123, 52, 117, 66);
line(117, 66, 158, 75);
line(117, 66, 68, 70);
line(68, 70, 158, 75);
line(68, 70, 58, 100);
line(58, 100, 140, 151);
line(58, 100, 105, 141);
line(105, 141, 68, 145);
line(105, 141, 140, 151);
line(68, 145, 140, 151);
line(68, 145, 63, 152);
line(63, 152, 75, 169);
line(75, 169, 145, 173);
line(145, 173, 167, 202);
line(167, 202, 243, 220);
line(145, 173, 197, 178);
line(197, 178, 243, 220);

}

Créer des sons

exemple adapté de https://p5js.org/reference/p5.sound/p5.Oscillator/ et https://p5js.org/reference/p5.sound/p5.SawOsc/

let osc, playing, freq, amp,mysound;

function setup() {
  let cnv = createCanvas(100, 100);
  cnv.mousePressed(playOscillator);
  osc = new p5.Oscillator('sine');
  mysound = new p5.SawOsc();
}

function draw() {
  background(220)
  freq = constrain(map(mouseX, 0, width, 100, 500), 100, 500);
  amp = constrain(map(mouseY, height, 0, 0, 1), 0, 1);

  text('tap to play', 20, 20);
  text('freq: ' + freq, 20, 40);
  text('amp: ' + amp, 20, 60);

  if (playing) {
    // smooth the transitions by 0.1 seconds
    osc.freq(freq, 0.1);
    osc.amp(amp, 0.1);
    
    mysound.freq(220, 0.1);
    mysound.amp(0.5, 0.1);
    
  }
}

function playOscillator() {
  // starting an oscillator on a user gesture will enable audio
  // in browsers that have a strict autoplay policy.
  // See also: userStartAudio();
  //osc.start();
  mysound.start();
  playing = true;
}

function mouseReleased() {
  // ramp amplitude to 0 over 0.5 seconds
  //osc.amp(0, 0.5);
  mysound.amp(0,0.5);
  playing = false;
}

Liens

https://l5lua.org/

https://p5js.org/

https://processing.org

#informatique

index.gmi