/** * PCD Tokyo 2026_Submission * Theme : 25 * 12 Oct 2026 * p5js 2.3.2 **/ p5.disableFriendlyErrors = true; const txt = "25"; const BG = "#000000"; const palette = ["#EA2D99","#EDEDED", "#A70CC9", "#DED335"]; let t; const fps = 60; const display = 2; const nFrames = fps * display; let gd; let DIM_X, DIM_Y; let SCL_W, SCL_H, SCL; let tiles = []; let ctx; let font; async function setup() { createCanvas(windowWidth, windowHeight); frameRate(fps); gd = 0.25 * min(width, height); DIM_X = floor(width / gd); DIM_Y = floor(height / gd); SCL_W = width / DIM_X; SCL_H = height / DIM_Y; SCL = min(SCL_W, SCL_H); for(let J = 0; J < DIM_Y; J++){ for(let I = 0; I < DIM_X; I++){ const main_X = I * SCL_W; const main_Y = J * SCL_H; tiles.push(new TILE(main_X, main_Y)); } } ctx = drawingContext; font = await loadFont("https://fonts.googleapis.com/css2?family=Orbitron:wght@800&display=swap"); noStroke(); rectMode(CENTER); textAlign(CENTER, CENTER); textFont(font); } function draw() { t = ((frameCount - 1) % nFrames) / nFrames; background(BG); tiles.forEach((tile) => {tile.update(); tile.display(); }) } //========================================================================================================================// function getPosition(R1, R2, ang){ return createVector(R1 * cos(ang), R2 * sin(ang)); } function ease(x) { return 1 - pow(1 - x, 5); } function lp01(prog){ let norm_t = 0; if(prog < 0.33){ norm_t = norm(prog, 0, 0.33); }else if(prog < 0.66){ norm_t = norm(prog, 0.33, 0.66); }else if(prog < 0.99){ norm_t = norm(prog, 0.66, 0.99); } return constrain(ease(norm_t), 0, 1); } class TILE{ constructor(main_X, main_Y){ this.main_X = main_X; this.main_Y = main_Y; this.gridInit(); this.main_Reset = false; this.INIT(); } INIT(){ this.animationInit(); this.drawShapeInit(); } gridInit(){ this.dim_x = 3; this.dim_y = this.dim_x + 1; this.objs = []; if(this.hasSubGrid()){ this.makeSubGrid(); }else{ let obj = new OBJ(this.main_X, this.main_Y, SCL_W, SCL_H, SCL); this.objs.push(obj); } } hasSubGrid(){ return this.dim_x > 1 || this.dim_y > 1; } makeSubGrid(){ const scl_w = SCL_W / this.dim_x; const scl_h = SCL_H / this.dim_y; const scl = min(scl_w, scl_h); for(let j = 0; j < this.dim_y; j++){ for(let i = 0; i < this.dim_x; i++){ const sub_X = this.main_X + i * scl_w; const sub_Y = this.main_Y + j * scl_h; let obj = new OBJ(sub_X, sub_Y, scl_w, scl_h, scl); this.objs.push(obj); } } } animationInit(){ const R1 = 1.5 * SCL_W; const R2 = 1.5 * SCL_H; this.angleSpawn = this.getAngle(); this.posSpawn = getPosition(R1, R2, this.angleSpawn); let angleExit = this.angleSpawn + PI; this.posExit = getPosition(R1, R2, angleExit); this.posCurr = this.posSpawn.copy(); let nx = this.main_X + 0.5 * SCL_W; let ny = this.main_Y + 0.5 * SCL_H; let nz = nx / ny; this.mainOffset = 50 * noise(nx, ny, nz); this.mainOffset = this.mainOffset % 1; } getAngle(){ let prev = this.angleSpawn; let next; do{ next = floor(random(4)) * HALF_PI; } while(prev === next); return next; } drawShapeInit(){ this.c_rnd = this.getColorIdx(); this.c_bg = palette[this.c_rnd]; this.c_fg = palette[(this.c_rnd + 1) % palette.length]; this.dirSpawn = random([-1, 1]); this.dirExit = -1 * this.dirSpawn; this.dirCurr = this.dirSpawn; } getColorIdx(){ let prev = this.c_rnd; let next; do{ next = floor(random(palette.length)); }while(next === prev); return next; } mainUpdate(){ let prog = (t + this.mainOffset) % 1; let amt = lp01(prog); if(prog < 0.33){ this.posCurr.set(this.posSpawn.x * (1 - amt), this.posSpawn.y * (1 - amt)); this.dirCurr = this.dirSpawn; }else if(prog < 0.66){ this.posCurr.set(0, 0); this.dirCurr = lerp(this.dirSpawn, this.dirExit, amt); }else if(prog < 0.99){ this.posCurr.set(this.posExit.x * amt, this.posExit.y * amt); this.dirCurr = this.dirExit; } if(prog > 0.99 && !this.main_Reset){ this.main_Reset = true; } if(this.main_Reset){ this.INIT(); this.main_Reset = false; return; } } subUpdate(){ this.objs.forEach((obj) => {obj.update()}); } subShow(){ this.objs.forEach((obj) => {obj.show(); }); } mainShow(){ ctx.save(); push(); translate(this.main_X, this.main_Y); ctx.beginPath(); ctx.rect(0, 0, SCL_W, SCL_H); ctx.clip(); this.drawPlate(); pop(); ctx.restore(); } drawPlate(){ push(); translate(0.5 * SCL_W + this.posCurr.x, 0.5 * SCL_H + this.posCurr.y); ctx.save(); ctx.beginPath(); ctx.rect(-0.5 * SCL_W, -0.5 * SCL_H, SCL_W, SCL_H); ctx.clip(); noStroke(); fill(this.c_bg); rect(0, 0, SCL_W, SCL_H); push(); rotate(this.dirCurr * (PI / 6)); fill(this.c_fg); textSize(0.9 * SCL); text(txt, 0, 0); pop(); ctx.restore(); pop(); } update(){ this.mainUpdate(); this.subUpdate(); } display(){ this.mainShow(); this.subShow(); } } //========================================================================================================================// class OBJ{ constructor(x, y, scl_w, scl_h, scl){ this.x = x; this.y = y; this.scl_w = scl_w; this.scl_h = scl_h; this.scl = scl; this.sub_Reset = false; this.init(); } init(){ this.animation_init(); this.drawShape_init(); } animation_init(){ const r1 = 1.5 * this.scl_w; const r2 = 1.5 * this.scl_h; this.angleSpawn = this.getAngle(); this.posSpawn = getPosition(r1, r2, this.angleSpawn); let angleExit = this.getAngle(); this.posExit = getPosition(r1, r2, angleExit); this.posCurr = this.posSpawn.copy(); let nx = this.x + 0.5 * this.scl_w; let ny = this.y + 0.5 * this.scl_h; let nz = floor(nx) & floor(ny); this.subOffset = 3 * noise(nx, ny, nz); this.subOffset = this.subOffset % 1; this.shiftPos = createVector(random([-1, 0, 1]), random([-1, 0, 1])).mult(0.35); this.active = random(1) > 0.6; } getAngle(){ let prev = this.angleSpawn; let next; do{ next = floor(random(4)) * HALF_PI; } while(prev === next); return next; } drawShape_init(){ this.c_rnd = this.getColorIdx(); this.c_bg = palette[this.c_rnd] this.c_fg = palette[(this.c_rnd + 1) % palette.length]; this.ro = random([-1, 0, 1]) * PI / 6; } getColorIdx(){ let prev = this.c_rnd; let next; do{ next = floor(random(palette.length)); }while(next === prev); return next; } update(){ let prog = (t + this.subOffset) % 1; let amt = lp01(prog); if(prog < 0.33){ this.posCurr.set(this.posSpawn.x * (1 - amt), this.posSpawn.y * (1 - amt)); }else if(prog < 0.66){ this.posCurr.set(0, 0); }else{ this.posCurr.set(this.posExit.x * amt, this.posExit.y * amt); } if(prog > 0.99 && !this.sub_Reset){ this.sub_Reset = true; } if(this.sub_Reset){ this.init(); this.sub_Reset = false; return; } } show(){ if(!this.active) return; ctx.save(); push(); translate(this.x, this.y); ctx.beginPath(); ctx.rect(0, 0, this.scl_w, this.scl_h); ctx.clip(); this.drawShape(); pop(); ctx.restore(); } drawShape(){ push(); translate(this.posCurr.x + 0.5 * this.scl_w, this.posCurr.y + 0.5 * this.scl_h); ctx.save(); ctx.beginPath(); ctx.rect(-0.5 * this.scl_w, -0.5 * this.scl_h, this.scl_w, this.scl_h); ctx.clip(); fill(this.c_bg); rect(0, 0, this.scl_w, this.scl_h); push(); rotate(this.ro); fill(this.c_fg); textSize(0.9 * min(this.scl_w, this.scl_h)); text(txt, this.shiftPos.x * this.scl_w, this.shiftPos.y * this.scl_h); pop(); ctx.restore(); pop(); } } //========================================================================================================================//

Untitled