let qrImg, rogoImg; let qrPoints = []; let rogoPoints = []; let particles = []; let qrTargets = []; let rogoTargets = []; let state = 'showQR'; let timer = 0; let maxParticles = 9000; let clickCount = 0; function preload() { qrImg = loadImage('https://stat.neort.io/externalResource/d20ggqf4s4r8bfk0p33g.png'); rogoImg = loadImage('https://stat.neort.io/externalResource/d20ggr74s4r8bfk0p34g.png'); } function setup() { createCanvas(windowWidth, windowHeight); pixelDensity(1); qrImg.loadPixels(); rogoImg.loadPixels(); for (let y = 0; y < qrImg.height; y++) { for (let x = 0; x < qrImg.width; x++) { let i = (x + y * qrImg.width) * 4; let r = qrImg.pixels[i]; if (r < 128) { let px = map(x, 0, qrImg.width, width / 2 - qrImg.width / 2, width / 2 + qrImg.width / 2); let py = map(y, 0, qrImg.height, height / 2 - qrImg.height / 2, height / 2 + qrImg.height / 2); qrPoints.push(createVector(px, py)); } } } for (let y = 0; y < rogoImg.height; y++) { for (let x = 0; x < rogoImg.width; x++) { let i = (x + y * rogoImg.width) * 4; let r = rogoImg.pixels[i]; if (r < 128) { let px = map(x, 0, rogoImg.width, width / 2 - rogoImg.width / 2, width / 2 + rogoImg.width / 2); let py = map(y, 0, rogoImg.height, height / 2 - rogoImg.height / 2, height / 2 + rogoImg.height / 2); rogoPoints.push(createVector(px, py)); } } } let num = min(qrPoints.length, rogoPoints.length, maxParticles); shuffle(qrPoints, true); shuffle(rogoPoints, true); for (let i = 0; i < num; i++) { let q = qrPoints[i]; let r = rogoPoints[i]; qrTargets.push(q.copy()); rogoTargets.push(r.copy()); particles.push(new Particle(q, r)); } timer = millis(); } function draw() { background(255); if (state === 'showQR') { fill(0); noStroke(); for (let p of qrPoints) { rect(p.x, p.y, 2, 2); } if (millis() - timer > 3000) { for (let p of particles) { p.setExplode(); } state = 'explode'; timer = millis(); } } else { let allStopped = true; for (let p of particles) { if (p.exploding) { p.updateExplode(); allStopped = false; } else if (p.gathering) { p.updateGather(); allStopped = false; } p.display(); } if (allStopped) { state = 'idle'; // 次のクリックを許可 } } } function mousePressed() { if (state !== 'idle') return; clickCount++; let useQR = false; if (clickCount >= 10) { useQR = true; clickCount = 0; } for (let i = 0; i < particles.length; i++) { if (useQR) { particles[i].target = qrTargets[i].copy(); } else { particles[i].target = rogoTargets[i].copy(); } particles[i].reExplode(createVector(mouseX, mouseY)); } state = 'explode'; timer = millis(); } class Particle { constructor(start, goal) { this.pos = start.copy(); this.target = goal.copy(); this.vel = createVector(0, 0); this.friction = 0.92; this.exploding = false; this.gathering = false; this.stopped = false; this.size = 2; } setExplode() { this.vel = p5.Vector.random2D().mult(random(5, 10)); this.exploding = true; this.stopped = false; this.gathering = false; } reExplode(center) { let dir = p5.Vector.sub(this.pos, center).normalize().mult(random(4, 8)); this.vel = dir; this.exploding = true; this.stopped = false; this.gathering = false; } updateExplode() { this.pos.add(this.vel); this.vel.mult(this.friction); if (this.vel.mag() < 0.1) { this.exploding = false; this.gathering = true; } } updateGather() { this.pos = p5.Vector.lerp(this.pos, this.target, 0.1); let d = p5.Vector.dist(this.pos, this.target); this.size = map(d, 0, 50, 3, 1, true); if (d < 0.5) { this.pos = this.target.copy(); this.gathering = false; this.stopped = true; } } display() { noStroke(); fill(0); ellipse(this.pos.x, this.pos.y, this.size, this.size); } }

情報のその先