test final - OpenProcessing

mySketch
xxxxxxxxxx
 
let sample = [];
let animations = []; // アニメーションのオブジェクトを格納する配列
​
function preload() {
  sample[0] = loadSound('./se01.wav');
  sample[1] = loadSound('./se02.wav');  
  sample[2] = loadSound('./se03.wav');
  sample[3] = loadSound('./se04.wav');
  sample[4] = loadSound('./se05.wav');
  sample[5] = loadSound('./se06.wav');  
}
​
function setup() {
  createCanvas(windowWidth, windowHeight);
}
​
function draw() {
  background(0, 50); // 少しずつ消える背景効果
​
  // アニメーションを描画・更新
  for (let i = animations.length - 1; i >= 0; i--) {
    let anim = animations[i];
    anim.update();
    anim.display();
    if (anim.isFinished()) {
      animations.splice(i, 1);
    }
  }
}
​
// キーを押した時の処理
function keyTyped() {
  if (key == 'a') {
    sample[0].play();
    animations.push(new ShootingStar());
  } else if (key == 's') {
    sample[1].play();
    animations.push(new ExpandingCircle());
  } else if (key == 'd') {
    sample[2].play();
    animations.push(new ColorChangingRect());
  } else if (key == 'f') {
    sample[3].play();
    animations.push(new FloatingText("Hello!"));
  } else if (key == 'g') {
    sample[4].play();
    animations.push(new SpiralEffect());
  } else if (key == 'h') {
    sample[5].play();
    animations.push(new BouncingBall());
  }
}
​
// 流れ星のクラス
class ShootingStar {
  constructor() {
    this.x = random(width);
    this.y = random(height / 2);
    this.size = random(10, 20);
    this.speed = random(5, 10);
    this.alpha = 255;
  }
  update() {
    this.x += this.speed;
    this.y += this.speed;
    this.alpha -= 10;
  }
  display() {
    fill(255, 255, 0, this.alpha);
    noStroke();
    ellipse(this.x, this.y, this.size);
  }
  isFinished() {
    return this.alpha <= 0;
  }
}
​
// 拡大する円のクラス
class ExpandingCircle {
  constructor() {
    this.x = random(width);
    this.y = random(height);
    this.size = random(20, 50);
    this.growth = random(1, 3);
    this.alpha = 255;
  }
  update() {
    this.size += this.growth;
    this.alpha -= 5;
  }
  display() {
    fill(0, 255, 255, this.alpha);
    noStroke();
    ellipse(this.x, this.y, this.size);
  }
  isFinished() {
    return this.alpha <= 0;
  }
}
​
// 色が変化する矩形のクラス
class ColorChangingRect {
  constructor() {
    this.x = random(width);
    this.y = random(height);
    this.size = random(50, 100);
    this.color = color(random(255), random(255), random(255));
    this.alpha = 255;
  }
  update() {
    this.color = color(random(255), random(255), random(255), this.alpha);
    this.alpha -= 5;
  }
  display() {
    fill(this.color);
    noStroke();
    rect(this.x, this.y, this.size, this.size);
  }
  isFinished() {
    return this.alpha <= 0;
  }
}
​
// 浮かぶテキストのクラス
class FloatingText {
  constructor(message) {
    this.message = message;
    this.x = random(width);
    this.y = height;
    this.speed = random(1, 3);
    this.alpha = 255;
  }
  update() {
    this.y -= this.speed;
    this.alpha -= 5;
  }
  display() {
    fill(255, this.alpha);
    textSize(32);
    textAlign(CENTER);
    text(this.message, this.x, this.y);
  }
  isFinished() {
    return this.alpha <= 0;
  }
}
​
// 螺旋効果のクラス
class SpiralEffect {
  constructor() {
    this.x = width / 2;
    this.y = height / 2;
    this.radius = random(20, 50);
    this.angle = 0;
    this.alpha = 255;
  }
  update() {
    this.radius += 2;
    this.angle += 0.2;
    this.alpha -= 5;
  }
  display() {
    let px = this.x + cos(this.angle) * this.radius;
    let py = this.y + sin(this.angle) * this.radius;
    fill(255, 0, 255, this.alpha);
    noStroke();
    ellipse(px, py, 10);
  }
  isFinished() {
    return this.alpha <= 0;
  }
}
​
// 跳ねるボールのクラス
class BouncingBall {
  constructor() {
    this.x = random(width);
    this.y = random(height);
    this.size = random(20, 40);
    this.vx = random(-5, 5);
    this.vy = random(-5, 5);
    this.alpha = 255;
  }
  update() {
    this.x += this.vx;
    this.y += this.vy;
    if (this.x < 0 || this.x > width) this.vx *= -1;
    if (this.y < 0 || this.y > height) this.vy *= -1;
    this.alpha -= 5;
  }
  display() {
    fill(0, 255, 0, this.alpha);
    noStroke();
    ellipse(this.x, this.y, this.size);
  }
  isFinished() {
    return this.alpha <= 0;
  }
}
​