xxxxxxxxxx
let sample = [];
let animation = [];
let num;
function preload() {
//サウンドをロードして配列に格納
sample[0] = loadSound('./se0.wav');
sample[1] = loadSound('./pata008.wav');
sample[2] = loadSound('./se2.wav');
sample[3] = loadSound('./pata009.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 > 24) {
animation.shift();
}
}
// ------------------------------------------------------
// それぞれのアニメーションをクラスで表現
// ------------------------------------------------------
// Animation A
class Anim_a {
constructor() {
this.x = random(width);
this.y = random(height);
this.radius = 0;
}
draw() {
noStroke();
fill(random(200,360), random(300), random(360));
circle(width/2, random(height,(height*99/100)),this.radius );
this.radius += 2;
}
}
// Animation S
class Anim_s {
constructor() {
this.x = random(width);
this.y = random(height);
this.radius = 0;
}
draw() {
noStroke();
fill(random(100),);
circle(this.x, this.y, this.radius);
this.radius += 0.3;
}
}
// Animation D
class Anim_d {
constructor() {
this.x = random(width);
this.y = random(height);
this.radius = 0;
}
draw() {
noStroke();
fill(random(0,160), random(100,200), 255);
circle(this.x,width/2, 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(0);
circle(this.x, this.y, this.radius);
this.radius += 200;
}
}