p5.disableFriendlyErrors = true; const palette = ["#E21C61", "#E35146", "#FFA352", "#D8DEA0", "#69C9C0", "#22BFB5", "#299DCF"]; const BG = "#000000"; let tiles = []; const dg = 72; const MARGIN = 2; const GAP = 2.5; let NUM_TILES; let myCanvas; let TILE_SCL; let SHAPE_SCL; let t; const fps = 30; const display = 4; const nFrames = fps * display; function RndInt(min_val, max_val) { return min_val + Math.floor(Math.random() * (max_val - min_val)) ; } function setup() { createCanvas(windowWidth, windowHeight); //createCanvas(1408, 448); canvasRatio(1408, 448); NUM_TILES = { X: Math.floor(rwidth / dg), Y: Math.floor(rheight / dg) }; myCanvas = { w: rwidth - 2 * MARGIN - (NUM_TILES.X - 1) * GAP, h: rheight - 2 * MARGIN - (NUM_TILES.Y - 1) * GAP, }; TILE_SCL = { w: myCanvas.w / NUM_TILES.X, h: myCanvas.h / NUM_TILES.Y }; SHAPE_SCL = Math.min(TILE_SCL.w, TILE_SCL.h); for (let J = 0; J < NUM_TILES.Y; J++) { for (let I = 0; I < NUM_TILES.X; I++) { const POS = { X: MARGIN + I * (TILE_SCL.w + GAP), Y: MARGIN + J * (TILE_SCL.h + GAP), }; tiles.push(new TILE(POS, SHAPE_SCL)); } } } function draw() { handleRatio(); t = ((frameCount - 1) % nFrames) / nFrames; background(BG); for(let tile of tiles){ tile.show(); } } class TILE { constructor(POS, SHAPE_SCL) { this.POS = POS; this.SCL = SHAPE_SCL; this.SUBDIVISION(); } SUBDIVISION() { const n = RndInt(1, 4); const scl = (this.SCL - (n - 1) * GAP) / n; let cg = createGraphics(scl, scl); this.objs = []; for (let j = 0; j < n; j++) { for (let i = 0; i < n; i++) { let pos = { x: this.POS.X + i * (scl + GAP) + 0.5 * scl, y: this.POS.Y + j * (scl + GAP) + 0.5 * scl, }; this.objs.push(new OBJ(pos, scl, cg)); } } } show(){ for(let obj of this.objs){ obj.update(); obj.obj_bg(); obj.button(); } } } /** *reference : https://github.com/golanlevin/Pattern_Master/blob/master/pattern_master/F09.pde */ function blinnWyvillCosineApproximation(x) { let x2 = x * x; let x4 = x2 * x2; let x6 = x4 * x2; let fa = 4.0 / 9.0; let fb = 17.0 / 9.0; let fc = 22.0 / 9.0; let y = fa * x6 - fb * x4 + fc * x2; return y; } //==========================================================================================================// //I know this is not a good algorithm yet. There is a better way to create this animation. class OBJ { constructor(pos, scl, cg) { this.pos = pos; this.scl = scl; this.cg = cg; this.init(); } init() { this.index = Math.floor(Math.random() * palette.length); this.movement = Math.floor(Math.random() * 11); this.isClockwise = Math.random() > 0.5 ? 1 : -1; this.ro_0 = Math.random() > 0.5 ? QUARTER_PI : HALF_PI; this.step = Math.random() > 0.5 ? 4 : 5; this.nVertex = RndInt(2, 5); let fn = noise(this.pos.x, this.pos.x, dist(rwidth / 2, rheight / 2, this.pos.x, this.pos.y)); this.offset = 7 * fn; } update() { let t_ = (t + this.offset) % 1; let amt; if (t_ < 0.33) { amt = map(t_, 0, 0.33, 0, 1, true); } else if (t_ < 0.66) { amt = map(t_, 0.33, 0.66, 0, 1, true); } else { amt = map(t_, 0.66, 0.99, 0, 1, true); } amt = constrain(blinnWyvillCosineApproximation(amt), 0, 1); const left = -1.75 * this.scl; const center = 0.5 * this.scl; const right = 1.75 * this.scl; const top = left; const bottom = right; switch (this.movement) { case 0: if (t_ < 0.33) { this.x_ = lerp(left, center, amt); this.y_ = center; this.ro = this.ro_0; } else if (t_ < 0.66) { this.x_ = center; this.y_ = center; this.ro = lerp(this.ro_0, this.step * this.ro_0, amt); } else { this.x_ = center; this.y_ = lerp(center, top, amt); this.ro = this.step * this.ro_0; } break; case 1: if (t_ < 0.33) { this.x_ = lerp(left, center, amt); this.y_ = center; this.ro = this.ro_0; } else if (t_ < 0.66) { this.x_ = center; this.y_ = center; this.ro = lerp(this.ro_0, this.step * this.ro_0, amt); } else { this.x_ = lerp(center, right, amt); this.y_ = center; this.ro = this.step * this.ro_0; } break; case 2: if (t_ < 0.33) { this.x_ = lerp(left, center, amt); this.y_ = center; this.ro = this.ro_0; } else if (t_ < 0.66) { this.x_ = center; this.y_ = center; this.ro = lerp(this.ro_0, this.step * this.ro_0, amt); } else { this.x_ = center; this.y_ = lerp(center, bottom, amt); this.ro = this.step * this.ro_0; } break; case 3: if (t_ < 0.33) { this.x_ = center; this.y_ = lerp(top, center, amt); this.ro = this.ro_0; } else if (t_ < 0.66) { this.x_ = center; this.y_ = center; this.ro = lerp(this.ro_0, this.step * this.ro_0, amt); } else { this.x_ = center; this.y_ = lerp(center, bottom, amt); this.ro = this.step * this.ro_0; } break; case 4: if (t_ < 0.33) { this.x_ = center; this.y_ = lerp(top, center, amt); this.ro = this.ro_0; } else if (t_ < 0.66) { this.x_ = center; this.y_ = center; this.ro = lerp(this.ro_0, this.step * this.ro_0, amt); } else { this.x_ = lerp(center, left, amt); this.y_ = center; this.ro = this.step * this.ro_0; } break; case 5: if (t_ < 0.33) { this.x_ = center; this.y_ = lerp(top, center, amt); this.ro = this.ro_0; } else if (t_ < 0.66) { this.x_ = center; this.y_ = center; this.ro = lerp(this.ro_0, this.step * this.ro_0, amt); } else { this.x_ = lerp(center, right, amt); this.y_ = center; this.ro = this.step * this.ro_0; } break; case 6: if (t_ < 0.33) { this.x_ = lerp(right, center, amt); this.y_ = center; this.ro = this.ro_0; } else if (t_ < 0.66) { this.x_ = center; this.y_ = center; this.ro = lerp(this.ro_0, this.step * this.ro_0, amt); } else { this.x_ = lerp(center, left, amt); this.y_ = center; this.ro = this.step * this.ro_0; } break; case 7: if (t_ < 0.33) { this.x_ = lerp(right, center, amt); this.y_ = center; this.ro = this.ro_0; } else if (t_ < 0.66) { this.x_ = center; this.y_ = center; this.ro = lerp(this.ro_0, this.step * this.ro_0, amt); } else { this.x_ = center; this.y_ = lerp(center, bottom, amt); this.ro = this.step * this.ro_0; } break; case 8: if (t_ < 0.33) { this.x_ = lerp(right, center, amt); this.y_ = center; this.ro = this.ro_0; } else if (t_ < 0.66) { this.x_ = center; this.y_ = center; this.ro = lerp(this.ro_0, this.step * this.ro_0, amt); } else { this.x_ = center; this.y_ = lerp(center, top, amt); this.ro = this.step * this.ro_0; } break; case 9: if (t_ < 0.33) { this.x_ = center; this.y_ = lerp(bottom, center, amt); this.ro = this.ro_0; } else if (t_ < 0.66) { this.x_ = center; this.y_ = center; this.ro = lerp(this.ro_0, this.step * this.ro_0, amt); } else { this.x_ = center; this.y_ = lerp(center, top, amt); this.ro = this.step * this.ro_0; } break; case 10: if (t_ < 0.33) { this.x_ = center; this.y_ = lerp(bottom, center, amt); this.ro = this.ro_0; } else if (t_ < 0.66) { this.x_ = center; this.y_ = center; this.ro = lerp(this.ro_0, this.step * this.ro_0, amt); } else { this.x_ = lerp(center, left, amt); this.y_ = center; this.ro = this.step * this.ro_0; } break; case 11: if (t_ < 0.33) { this.x_ = center; this.y_ = lerp(bottom, center, amt); this.ro = this.ro_0; } else if (t_ < 0.66) { this.x_ = center; this.y_ = center; this.ro = lerp(this.ro_0, this.step * this.ro_0, amt); } else { this.x_ = lerp(center, right, amt); this.y_ = center; this.ro = this.step * this.ro_0; } break; } if (t_ > 0.99) { this.init(); } } obj_bg(){ this.cg.clear(); this.cg.noStroke(); this.cg.fill(palette[this.index]); this.cg.rectMode(CENTER); this.cg.rect(this.x_, this.y_, this.scl, this.scl); imageMode(CENTER); image(this.cg, this.pos.x, this.pos.y); } button() { const scl_ = 0.75 * this.scl; const r = 0.155 * this.scl; const nVertex = this.nVertex; this.cg.clear(); this.cg.strokeWeight(0.05 * scl_) this.cg.stroke(BG); this.cg.fill(palette[(this.index + 4) % palette.length]); this.cg.circle(this.x_, this.y_, scl_); this.cg.noStroke(); this.cg.fill(BG) for(let n = 0; n < nVertex; n++){ let a = map(n, 0, nVertex, 0, TWO_PI, true) + this.ro * this.isClockwise; let v = {x: r * cos(a), y: r * sin(a)}; this.cg.circle(this.x_ + v.x, this.y_ + v.y, 0.18 * scl_); } imageMode(CENTER); image(this.cg, this.pos.x, this.pos.y); } } /** *reference: https://github.com/processing/p5.js/issues/5836 */ let rwidth = null; let rheight = null; let ratioScale = null; let rmouseX = null; let rmouseY = null; let ratioTop = null; let ratioLeft = null; let cnvRatio = false; let cnvWidth = null; let cnvHeight = null; function canvasRatio(draw_wide, draw_high){ rwidth = draw_wide; rheight = draw_high; cnvRatio = true; } function handleRatio(){ if(cnvRatio) { let aspectH = width / rwidth; let aspectV = height / rheight; ratioScale = Math.min(aspectH, aspectV); ratioTop = (height - ratioScale * rheight) / 2; ratioLeft = (width - ratioScale * rwidth) / 2; cnvWidth = rwidth * ratioScale; cnvHeight = rheight * ratioScale; rmouseX = (mouseX - ratioLeft) / ratioScale; rmouseY = (mouseY - ratioTop) / ratioScale; translate(ratioLeft, ratioTop); scale(ratioScale); } }