let colors = ['#533d8d', '#024a96', '#0277ba', '#199ed7', '#48c7eb', '#f2f2f0', '#f8d252']; let forms = []; let rectGrfx = []; let circleGrfx = []; let wdt, seg = 6; function setup() { createCanvas(windowWidth, windowHeight); imageMode(CENTER); if (width < height) { wdt = width * 0.7; } else { wdt = height * 0.7; } let w = wdt / seg; for (let i = 0; i < seg ** 2; i++) { circleGrfx.push(createGrfx(w*3, 0)); } for (let i = 0; i < seg; i++) { for (let j = 0; j < seg; j++) { let x = i * w + w / 2; let y = j * w + w / 2; forms.push(new Form(x, y, w)); } } shuffle(forms, true); } function draw() { translate((width - wdt) / 2, (height - wdt) / 2); background(28); for (let f of forms) { f.run(); } } function createGrfx(w, t) { let pg = createGraphics(w, w); let hw = w / 2; let rnd = int(random(3)); pg.rectMode(CENTER); pg.shuffle(colors, true); pg.background(colors[0]); pg.push(); pg.translate(hw, hw); pg.noStroke(); if (rnd == 0) { for (let i = 0; i < 4; i++) { pg.rotate(PI * 0.5); pg.fill(colors[1 + i]); pg.triangle(0, 0, w * 0.25, w * 0.5, -w * 0.25, w * 0.5); } } else if (rnd == 1) { let c = int(random(10, 15)); let ww = w / c; for (let i = 0; i < c; i++) { for (let j = 0; j < c; j++) { let xx = i * ww - w / 2; let yy = j * ww - w / 2; if ((i + j) % 2 == 0) { pg.fill(colors[1]); pg.circle(xx + ww / 2, yy + ww / 2, ww); } } } } else if (rnd == 2) { let c = int(random(2, 7)); let ww = w / c; for (let i = 0; i < c; i++) { for (let j = 0; j < c; j++) { let xx = i * ww - w / 2; let yy = j * ww - w / 2; if ((i + j) % 2 == 0) { pg.fill(colors[1]); pg.square(xx + ww / 2, yy + ww / 2, ww); } } } } pg.stroke(0); if (t == 0) { let r = hw; pg.erase(); pg.beginShape(); pg.vertex(-hw, -hw); pg.vertex(-hw, hw); pg.vertex(hw, hw); pg.vertex(hw, -hw); pg.beginContour(); for (let a = 0; a < TAU; a += TAU / 360) { pg.vertex(r * cos(a), r * sin(a)); } pg.endContour(); pg.endShape(); } pg.pop(); return pg; } function easeInOutCubic(t) { if ((t /= 1 / 2) < 1) return 1 / 2 * t * t * t; return 1 / 2 * ((t -= 2) * t * t + 2); } class Form { constructor(x, y, w) { this.x = x; this.y = y; this.grfx1 = random(rectGrfx); this.grfx2 = random(circleGrfx); this.a = 0; this.w0 = w; this.w = this.w0 * 0.5 * int(random(4) + 1); this.init(); } show() { push(); translate(this.x, this.y); rotate(this.a); image(this.grfx2, 0, 0, this.w, this.w); pop(); } move() { if (0 <= this.t && this.t < this.t1) { let nrm = norm(this.t, 0, this.t1 - 1); if (this.rnd == 0) this.a = lerp(0, TAU * this.nsk * this.pom, easeInOutCubic(nrm)); if (this.rnd == 1) this.w = lerp(this.w1, this.w2, easeInOutCubic(nrm)); } if (this.t1 < this.t) { this.init(); } this.t++; } init() { this.t = -int(random(0)); this.t1 = int(random(60, 200)); this.nsk = int(random(1, 4)); this.pom = random() < 0.5 ? -1 : 1; this.rnd = int(random(2)); this.w1 = this.w; this.w2 = this.w0 * 0.5 * int(random(4) + 1); } run() { this.show(); this.move(); } }

スピード