Patatap p5 Template - OpenProcessing

mySketch
xxxxxxxxxx
 
let sample = [];
let animation = [];
let num;
​
function preload() {
  //サウンドをロードして配列に格納
  sample[0] = loadSound('./in_a_cave.mp3');
  sample[1] = loadSound('./water_land.mp3');
  sample[2] = loadSound('./fall_in_water.mp3');
  sample[3] = loadSound('./se_06_syaba2.wav');
  sample[4] = loadSound('./American_bird1.mp3');
}
​
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());
  } else if (key == 'g') {
    sample[4].play();
    animation.push(new Anim_g());
  }
  if (animation.length > 8) {
    animation.shift();
  }
}
​
// ------------------------------------------------------
// それぞれのアニメーションをクラスで表現
// ------------------------------------------------------
// Animation A
class Anim_a {
  constructor() {
    this.red = 10;
    this.green = 10;
    this.blue = 5;
  }
  draw() {
    fill(this.red, this.green, this.blue);
    rect(random(width), random(height), width / 24, height / 2);
    this.red += 1;
    this.blue += 2;
    this.green += 3;
  }
}
​
// Animation S
class Anim_s {
  constructor() {
    this.x = 0;
  }
  draw() {
    noStroke();
    fill(random(255), random(255), 255);
    rect(this.x, 0, 40, random(height));
    this.x += 20;
  }
}
​
// Animation D
class Anim_d {
  constructor() {
    this.x = random(width);
    this.y = random(height);
    this.radius = 0;
    this.a = 300;
    this.b = 200;
    this.r = 180;
  }
  draw() {
    fill(255, 10);
    noStroke();
    rect(0,0,width,height);
    this.a = this.a + random(-500, 500);
    this.b = this.b + random(-500, 500);
    this.i = 0;
    while (this.i < 10) {
      noFill();
      stroke(random(255), random(255), 255);
      strokeWeight(2);
      ellipse(this.a + random(-50, 100), this.y + random(-100, 100), this.r, this.r);
      this.i = this.i + 1;
    }
  }
}
​
// Animation F
class Anim_f {
    constructor() {
      this.angle = 0;
    }
    draw() {
      push();
      translate(width / 2, height / 2);
      rotate(this.angle);
      stroke(255);
      strokeWeight(2);
      line(-width / 4, 0, width / 2, 0);
      this.angle += 0.1;
      pop();
    }
  }
​
  // Animation G
  class Anim_g {
    constructor() {
      this.red = random(255);
      this.green = random(255);
      this.blue = random(255);
    }
    draw() {
      fill(this.red, this.green, this.blue);
      rect(0, 0, width, height);
    }
  }