let movers = []; let colors = ["#FF0271", "#d4000e", "#FFDE00", "#FF6A03", "#48FFAB", "#ffffff", "#000000"]; let checkered_buffer; let checkered; let assets = []; function setup() { createCanvas(windowWidth, windowHeight); //createCanvas(640, 480); rectMode(CENTER); for (let i = 0; i < 3; i++) { movers.push(new Mover()); } checkered_buffer = createGraphics(width, height); checkered = new Checkered(checkered_buffer); checkered.draw(); for(let i=1;i<=3;i++){ assets.push(loadImage("https://planet-ape.net/neort_asset/s_00"+i+".svg")); //asset_s[i].width = asset_s[i].width * 0.1; //asset_s[i].height = asset_s[i].height * 0.1; } for(let i=1;i<=7;i++){ assets.push(loadImage("https://planet-ape.net/neort_asset/m_00"+i+".svg")); } for(let i=1;i<=6;i++){ assets.push(loadImage("https://planet-ape.net/neort_asset/l_00"+i+".svg")); } } function draw() { background(colors[1]); image(checkered_buffer, 0, 0); for (let m of movers) { m.run(); } } function pom() { return random() < 0.5 ? -1 : 1; } class Mover { constructor() { this.forms = []; this.setValues(); } setValues() { this.x = random(width); this.y = random(height); this.velX = pom() * random(1, 12); this.velY = pom() * random(1, 12); } show() { this.forms.push(new Form(this.x, this.y)); for (let f of this.forms) { f.run(); } } move() { let theta = noise(this.x * 0.004, this.y * 0.004, frameCount * 0.0001) * 30; this.x += cos(theta) * this.velX; this.y += sin(theta) * this.velY; for (let i = 0; i < this.forms.length; i++) { if (this.forms[i].isDead()) { this.forms.splice(i, 1); } } if (this.x < 0 || width < this.x || this.y < 0 || height < this.y) { this.setValues(); } } run() { this.show(); this.move(); } } class Form { constructor(x, y) { let r = random(100); let a = random(10); this.x0 = x + r * cos(a); this.y0 = y + r * sin(a); this.x = this.x0; this.y = this.y0; this.x1 = x; this.y1 = y; this.s = 0; this.sMax = random(5, 40); this.ang = 0; this.aStep = random(-1, 1) * 0.07; this.lifeSpan = 100; this.life = this.lifeSpan; this.col = color(random(colors)); this.shprnd = floor(random()*assets.length); if(this.shprnd < 3) { this.size = 0.01; }else if(this.shprnd >=3 && this.shprnd < 10) { this.size = 0.015; }else{ this.size = 0.025; } } show() { push(); stroke(0, 100); noStroke(); fill(this.col); translate(this.x, this.y); rotate(this.ang); if(this.s!=0) { image(assets[this.shprnd],-assets[this.shprnd].width*0.5*this.s*this.size,-assets[this.shprnd].height*0.5*this.s*this.size,assets[this.shprnd].width*this.s*this.size,assets[this.shprnd].height*this.s*this.size); } pop(); } move() { this.x = map(this.life, this.lifeSpan, 0, this.x0, this.x1); this.y = map(this.life, this.lifeSpan, 0, this.y0, this.y1); this.ang += this.aStep; this.life--; if (int(this.lifeSpan * 0.9) < this.life) { this.s = map(this.life, this.lifeSpan, this.lifeSpan * 0.9, 0, this.sMax); } else { this.s = map(this.life, this.lifeSpan * 0.9, 0, this.sMax, 0); } } run() { this.show(); this.move(); } isDead() { if (this.life <= 0) return true; return false; } } class Checkered { constructor(canvas) { this.step = 30; //各ブロックの間隔 this.canvas = canvas; } draw() { for (let y = 0; y <= canvas.height; y += this.step) { if (y % (this.step * 2) == 0) { // y の値が (step*2) で割り切れる時 for (let x = this.step; x <= canvas.width; x += this.step * 2) { this.canvas.noStroke(); //ストローク無効化 this.canvas.fill(255, 255, 255, 22); //図形塗り潰し: 赤 this.canvas.rect(x, y, this.step, this.step); //四角形描画 } } else {　 // y の値が (step*2) で割り切れない時 for (let x = 0; x <= canvas.width; x += this.step * 2) { this.canvas.noStroke(); //ストローク無効化 this.canvas.fill(255, 255, 255, 22); //図形塗り潰し: 赤 this.canvas.rect(x, y, this.step, this.step); //四角形描画 } } } } }