Patatap p5 Template - OpenProcessing

mySketch
xxxxxxxxxx
 
let sample = [];
let animation = [];
let num;
​
function preload() {
  //サウンドをロードして配列に格納
  sample[0] = loadSound('./se0.wav');
  sample[1] = loadSound('./se1.wav');
  sample[2] = loadSound('./se2.wav');
  sample[3] = loadSound('./se3.wav');
}
​
function setup() {
  createCanvas(windowWidth, windowHeight);
}
​
function draw() {
  background(0);
  //もしアニメーションが1つ以上配列に入っていたら
  if (animation.length > 0) {
    //アニメーションの数だけくりかえし
    for (let i = 0; i < animation.length; i++) {
      //アニメーションの配列を順番に描画
      animation[i].draw();
    }
  }
}
​
//キーボードでアニメ+サウンド切り替え
function keyTyped() {
  if (key == 'a') {
    sample[0].play();
    animation.push(new Anim_a());
  } else if (key == 's') {
    sample[1].play();
    animation.push(new Anim_s());
  } else if (key == 'd') {
    sample[2].play();
    animation.push(new Anim_d());
  } else if (key == 'f') {
    sample[3].play();
    animation.push(new Anim_f());
  }
  if (animation.length > 8) {
    animation.shift();
  }
}
​
// ------------------------------------------------------
// それぞれのアニメーションをクラスで表現
// ------------------------------------------------------
// Animation A
class Anim_a {
  constructor() {
    this.x = random(width);
    this.y = random(height);
    this.radius = 0;
  }
  draw() {
    noStroke();
    fill(255, 0, 0);
    circle(this.x, this.y, this.radius);
    this.radius += 10;
  }
}
​
// Animation S
class Anim_s {
  constructor() {
    this.x = random(width);
    this.y = random(height);
    this.radius = 0;
  }
  draw() {
    noStroke();
    fill(0, 255, 0);
    circle(this.x, this.y, this.radius);
    this.radius += 10;
  }
}
​
// Animation D
class Anim_d {
  constructor() {
    this.x = random(width);
    this.y = random(height);
    this.radius = 0;
  }
  draw() {
    noStroke();
    fill(0, 0, 255);
    circle(this.x, this.y, this.radius);
    this.radius += 10;
  }
}
​
// Animation F
class Anim_f {
  constructor() {
    this.x = random(width);
    this.y = random(height);
    this.radius = 0;
  }
  draw() {
    noStroke();
    fill(255, 255, 0);
    circle(this.x, this.y, this.radius);
    this.radius += 10;
  }
}