2d:null 2e:["$","title",null,{"children":"Assignment 4 - GenArt | John C | Observable"}] 33:T5fcc,p5(s => { //let tt; // for test only const AnuratiUrl = "https://static.observableusercontent.com/files/5d90d13355b0f8db98ebd049eb2ae6e1a17bba830827904420d963e08490872d7c3a6f970b60a3029c64909f6d03e330105cd6ae4e487ae0966b1b479afebb6b" let itemInterval; let started = false; let paused = false; let anuratiFont; const speedLimit = 5; const neonPink = "#FE019A"; const ribbonNearThreshold = 5; let cycles = []; let items = []; const maxCycleNo = 6; const maxItemNo = 6; const immortalTime = 3; const itemHitBox = 6; const itemScale = 1.5; const itemVisiableRange = 50; const getColor = function () { const pool = [ "#6CBDD8", "#F7DF4B", "#D8700C", "#00FDC3", "#FF352D", ]; return s.random(pool); } const objDeepEq = function (a,b){ //simple deep eq if (a === b) return true; if (a === null && b === null) return true; if ((a === null && b !== null) || (a !== null && b === null)) return false; if (typeof a != 'object' || typeof b != 'object') return false; let keysA = Object.keys(a), keysB = Object.keys(b); if (keysA.length !== keysB.length) return false; for (const key of keysA) { if (!keysB.includes(key) || !objDeepEq(a[key], b[key])) return false; } return true; } const getItemType = function () { const pool = [ "massUp", "ribbonOff", "jumpKit", "Lturn", "Uturn" ]; return s.random(pool); } const drawGrid = function (size) { s.background("#191840"); s.push(); s.stroke("#65A6CD"); s.strokeWeight(5); s.line(0,0,s.width/2 -5, 0); s.line(s.width/2 + 5, 0, s.width, 0); s.line(0,s.height,s.width/2 -5, s.height); s.line(s.width/2 + 5, s.height, s.width, s.height); s.line(0,0,0, s.height/2 -5); s.line(0, s.height/2 + 5, 0, s.height); s.line(s.width,0,s.width, s.height/2 -5); s.line(s.width, s.height/2 + 5, s.width, s.height); const strokeC = s.color("#65A6CD"); strokeC.setAlpha(100); s.stroke(strokeC); s.strokeWeight(1); for (let x = -10; x < s.width + 10; x += size){ s.line(x, -10, x, s.height + 10); } for (let y = -10; y < s.height + 10; y += size) { s.line(-10, y, s.width + 10, y); } s.pop(); } const spawnItem = function () { if (items.length < maxItemNo){ if (s.random() > 0.3) { items.push(new Item(s.random(10, s.width - 10), s.random(10, s.height - 10),getItemType())); } } } const collisionCheck = function (cycle, item) { return s.dist(cycle.loc.x, cycle.loc.y, item.x, item.y) < itemHitBox * itemScale }; const caculateDistPoint2Line = function (p, l){ let d1 = s.dist(p.x,p.y,l[0].x,l[0].y); let d2 = s.dist(p.x,p.y,l[1].x,l[1].y); return s.abs(d1+(d2-d1)/2); } const ribbonNearCheck = function (cyc, ribbon) { if (ribbon.length < 2) return false; if (objDeepEq(cyc.lightRibbon, ribbon)) return false; return mightNearCheck(cyc.loc, ribbon); } const mightNearCheck = function (point, ribbon) { if (ribbon.length < 2) return false; let rib = [...ribbon]; rib.pop(); for (let i = 1; i < rib.length; i++) { if (rib[i] != null && rib[i-1] !== null) { if (s.dist(rib[i].x, rib[i].y, rib[i-1].x, rib[i-1].y) > 500) continue; if (caculateDistPoint2Line(point, [rib[i-1], rib[i]]) < ribbonNearThreshold) return [rib[i-1], rib[i]]; } } return false; } const check2LinesIntersect = function (l1x1, l1y1, l1x2, l1y2, l2x1, l2y1, l2x2, l2y2) { if (s.dist(l2x1,l2y1,l2x2,l2y2) > 500 || s.dist(l1x1, l1y1, l1x2, l1y2) > 500) return false; //from https://stackoverflow.com/a/24392281 let det, gamma, lambda; det = (l1x2 - l1x1) * (l2y2 - l2y1) - (l2x2 - l2x1) * (l1y2 - l1y1); if (det === 0) { return false; } else { lambda = ((l2y2 - l2y1) * (l2x2 - l1x1) + (l2x1 - l2x2) * (l2y2 - l1y1)) / det; gamma = ((l1y1 - l1y2) * (l2x2 - l1x1) + (l1x2 - l1x1) * (l2y2 - l1y1)) / det; return (0 < lambda && lambda < 1) && (0 < gamma && gamma < 1); } } const checkIntersect= function (l, r){ if (r.length < 2) return false; for (let i = 1; i < r.length; i++) { if (r[i] !== null && r[i-1] !== null) { if (check2LinesIntersect(l[0].x,l[0].y,l[1].x,l[1].y,r[i].x,r[i].y,r[i-1].x,r[i-1].y)) return [r[i], r[i-1]]; } } return false; } // below over all shall be O(n); const goOverCheck = function (cyc, ribbon) { if (!cyc.lastPosition) return false; if (ribbon.length < 2) return false; let rib = [...ribbon]; if (objDeepEq(rib, cyc.lightRibbon)) rib.pop(); return checkIntersect([cyc.loc, cyc.lastPosition], rib); } const mightGoOver = function (l, ribbon) { let rib = [...ribbon]; return checkIntersect(l, rib); } // const newPlayerIn = function () { let dice = s.random([0,1,2]); switch(dice){ default: cycles.push(new LightCycle(s.createVector(s.random(s.width/2 - 5, s.width/2 + 5), 7), getColor(), s.createVector(s.random(-0.5,0.5),s.random(0.6, 1)), 1)); break; case 0: cycles.push(new LightCycle(s.createVector(s.random(s.width/2 - 5, s.width/2 + 5), s.height - 7), getColor(), s.createVector(s.random(-0.5,0.5),s.random(-1, -0.6)), 1)); break; case 1: cycles.push(new LightCycle(s.createVector(7, s.random(s.height/2 - 5, s.height/2 + 5)), getColor(), s.createVector(s.random(0.6, 1),s.random(-0.5, 0.5)), 1)); break; case 2: cycles.push(new LightCycle(s.createVector(s.width - 7, s.random(s.height/2 - 5, s.height/2 + 5)), getColor(), s.createVector(s.random(-1, -0.6),s.random(-0.5, 0.5)), 1)); break; } things.push(new Thing(cycles[cycles.length - 1],cycles[0])); things.push(new Thing(cycles[cycles.length - 2],cycles[cycles.length - 1])); } class LightCycle{ constructor(loc,c,v,imm){ this.loc = loc; this.c = c; this.m = 2; this.mChangedCount = 0; this.hasJumpKit = 0; this.lightRibbonOn = true; this.lightRibbonOffCount = 0; this.v = v; this.acc = s.createVector(0,0); this.lightRibbon = []; this.immortal = true; this.immortalTime = imm; this.immortalCount = 0; this.destroyed = false; this.lastPosition = null; } render(){ //destroyed animation (only one frame ... lol) if (this.destroyed){ //boom s.push(); s.translate(this.loc.x, this.loc.y); s.rotate(s.random(-s.PI, s.PI)); s.noFill(); s.stroke(this.c); s.strokeWeight(3); s.beginShape(); for (let i = 0; i < 10; i++) { let di; di = s.random(6,10); if (i % 2 === 0) di = s.random(2,5); let r = (s.PI/5 * i) + s.random(-0.1, 0.1); s.vertex(di*s.cos(r), di*s.sin(r)); } s.endShape(s.CLOSE); s.pop(); return; } // // jumpKit if (this.hasJumpKit){ s.push(); s.stroke(255); s.noFill(); s.strokeWeight(0.8); s.translate(this.loc.x, this.loc.y); s.rotate(s.frameCount/10); for (let i = 0; i < 2*s.PI; i += s.PI/2){ s.arc(0,0,15,15,i, i + s.PI/4); } s.pop(); } // //light ribbon for (let i = 1; i < this.lightRibbon.length; i ++) { s.push(); let temC = s.color(this.c); temC.setAlpha(i < 50? s.map(i,0,49,50,255): 255); s.stroke(temC); s.noFill(); s.strokeWeight( i < 4 ? s.map(i, 0, 3, 0.5, 2.5) : 2.5); if (this.lightRibbon[i] != null && this.lightRibbon[i-1] != null) { if (s.dist(this.lightRibbon[i-1].x, this.lightRibbon[i-1].y,this.lightRibbon[i].x,this.lightRibbon[i].y) < 500){ s.line(this.lightRibbon[i-1].x, this.lightRibbon[i-1].y,this.lightRibbon[i].x,this.lightRibbon[i].y); } } s.pop(); } //the vehicle s.push(); s.fill(0); if (this.immortal) { if (this.immortalCount % s.frameRate()/4 > s.frameRate() / 8) { let temC = s.color(this.c); temC.setAlpha(150); s.stroke(temC) } else { s.stroke(this.c) } } else { s.stroke(this.c); } s.translate(this.loc.x, this.loc.y); s.rotate(this.getDirection()); //wheel 1 s.beginShape(); s.vertex(1.5, -1); s.vertex(1.5, -5); s.curveVertex(1.5,-5); s.curveVertex(1.5,-7); s.curveVertex(-1.5, -7); s.curveVertex(-1.5,-5); s.vertex(-1.5,-5); s.vertex(-1.5,-1); s.curveVertex(-1.5,-1); s.curveVertex(-1.5, 1); s.curveVertex(1.5,1); s.curveVertex(1.5,-1); s.endShape(s.CLOSE); //wheel 2 s.beginShape(); s.vertex(1.5, 1); s.vertex(1.5, 5); s.curveVertex(1.5,5); s.curveVertex(1.5,7); s.curveVertex(-1.5,7); s.curveVertex(-1.5,5); s.vertex(-1.5,5); s.vertex(-1.5,1); s.curveVertex(-1.5,1); s.curveVertex(-1.5,-1); s.curveVertex(1.5,-1); s.curveVertex(1.5,1); s.endShape(s.CLOSE); s.pop(); } update(){ //check immortal state this.immortalCount ++; if (this.immortal && this.immortalCount > this.immortalTime * s.frameRate()) this.immortal = false; // //check if distroyed if (!this.immortal) { for (const cyc of cycles) { if (ribbonNearCheck(this, cyc.lightRibbon) || goOverCheck(this, cyc.lightRibbon)){ if (this.hasJumpKit > 0){ this.hasJumpKit --; } else { this.destroyed = true; } break; } } if (this.loc.x < -1 || this.loc.x > s.width + 1 || this.loc.y < -1|| this.loc.y > s.height + 1) { this.destroyed = true; } } // if (!this.destroyed) { //check other states (m, ribbon state, etc) if (this.m > 2) { if (this.mChangedCount > s.frameRate() * 7) { this.m = 2; this.mChangedCount = 0; } else { this.mChangedCount ++; } } if (!this.lightRibbonOn) { if (this.lightRibbonOffCount > s.frameRate() * 5){ this.lightRibbonOn = true; this.lightRibbonOffCount = 0; } else { this.lightRibbonOffCount ++; } } // //check "food" for (const it of items) { if (collisionCheck(this, it)) { switch(it.type) { default: break; case "massUp": this.m *= 2; this.v.x = this.v.x/2; this.v.y = this.v.y/2; break; case "jumpKit": this.hasJumpKit = 3; break; case "ribbonOff": this.lightRibbonOn = false; break; case "Lturn": let tem = this.v.x; this.v.x = this.v.y; this.v.y = tem; break; case "Uturn": this.v.x = -this.v.x; this.v.y = -this.v.y; break; } it.shouldBeRemoved = true; break; } } // this.move(); } } move(){ this.caculateSpeed(); if (this.v.magSq() > 0) { if (!this.immortal){ if (this.lightRibbonOn) { this.lightRibbon.push(s.createVector(this.loc.x, this.loc.y)); } else { this.lightRibbon.push(null); } } if (this.lightRibbon.length > 100) this.lightRibbon.shift(); this.lastPosition = s.createVector(this.loc.x, this.loc.y); } this.loc.add(this.v); } caculateSpeed(){ this.caculateAcc(); this.v.x += this.acc.x; this.v.y += this.acc.y; //speed limit this.v.x = s.constrain(this.v.x, -speedLimit, speedLimit); this.v.y = s.constrain(this.v.y, -speedLimit, speedLimit); } caculateAcc(){ let forceX = 0; let forceY = 0; //random walk forceX += s.random(-1,1); forceY += s.random(-1,1); // let nextPosible = s.createVector(this.loc.x + this.v.x, this.loc.y + this.v.y); //prevent hit if (!this.hasJumpKit){ //the cycle is not afraid with jumpKit for (const cyc of cycles) { let nearSeg = mightNearCheck(nextPosible, cyc.lightRibbon); let intersectSeg = mightGoOver([nextPosible, this.loc], cyc.lightRibbon); if (nearSeg || intersectSeg) { //try to avoid let dir; if (nearSeg) { let temVec1 = s.createVector(nearSeg[0].x - nearSeg[1].x, nearSeg[0].y - nearSeg[1].y); let temVec2 = s.createVector(nearSeg[1].x - nearSeg[0].x, nearSeg[1].y - nearSeg[0].y); let ang1 = temVec1.angleBetween(this.v); let ang2 = temVec2.angleBetween(this.v); let determin = (s.abs(ang1) > s.abs(ang2) ? ang1 : ang2); if (determin < 0) { dir = - s.PI/2; } else { dir = s.PI/2; } } if (intersectSeg) { let temVec1 = s.createVector(intersectSeg[0].x - intersectSeg[1].x, intersectSeg[0].y - intersectSeg[1].y); let temVec2 = s.createVector(intersectSeg[1].x - intersectSeg[0].x, intersectSeg[1].y - intersectSeg[0].y); let ang1 = temVec1.angleBetween(this.v); let ang2 = temVec2.angleBetween(this.v); let determin = (s.abs(ang1) > s.abs(ang2) ? ang1 : ang2); if (determin < 0) { dir = - s.PI/2; } else { dir = s.PI/2; } } let turnForce = s.createVector(this.v.x, this.v.y); turnForce.normalize(); turnForce.rotate(dir + s.random(-s.PI/8, s.PI/8)); // around 90 degree turn let para = s.random(5,7); forceX += turnForce.x * para; forceY += turnForce.y * para; // } } } // // hit wall let dir = undefined; if (nextPosible.x < 0) dir = (this.v.heading() < 0) ? s.PI/2 : -s.PI/2; if (nextPosible.x > s.width) dir = (this.v.heading() > 0) ? s.PI/2 : -s.PI/2; if (nextPosible.y < 0) dir = (this.v.heading() > -s.PI/2) ? s.PI/2 : -s.PI/2; if (nextPosible.y > s.height ) dir = (this.v.heading() > s.PI/2) ? s.PI/2 : -s.PI/2; if (dir) { let turnForce = s.createVector(this.v.x, this.v.y); turnForce.normalize(); turnForce.rotate(dir + s.random(-s.PI/8, s.PI/8)); // around 90 degree turn let para = s.random(5,10); forceX += turnForce.x * para; forceY += turnForce.y * para; } // // items hunt for (const it of items) { if (s.dist(it.x, it.y, this.loc.x, this.loc.y) < itemVisiableRange) { if (it.type === "jumpKit") { let para = s.random(0.3,1.5); let vec = s.createVector(it.x - this.loc.x, it.y - this.loc.y); vec.normalize(); forceX += vec.x * para; forceY += vec.y * para; } else if (it.type === "Lturn" || it.type === "Uturn") { let para = s.random(0.2,0.6); let vec = s.createVector(it.x - this.loc.x, it.y - this.loc.y); vec.normalize(); forceX += vec.x * para; forceY += vec.y * para; } else { let para = s.random(0.2,0.5); let vec = s.createVector(this.loc.x - it.x, this.loc.y - it.y); vec.normalize(); forceX += vec.x * para; forceY += vec.y * para; } //break; // multi-tasking? } } // //force to acc this.acc.x = forceX/this.m; this.acc.y = forceY/this.m; } getDirection(){ return this.v.heading() + s.PI/2; } } class Item { constructor(x,y,type){ this.x = x; this.y = y; this.type = type; //this.v = s.createVector(0,0); //this.acc = s.createVector(0,0); this.lifeSpan = s.floor(s.random(15, 20)) * s.frameRate(); this.lifeCount = 0; this.shouldBeRemoved = false; this.m = s.floor(s.random(2000, 5000)); } update(){ this.lifeCount ++; if (this.lifeCount > this.lifeSpan) this.shouldBeRemoved = true; this.x += (0.5 - s.noise(this.lifeCount/1000 + this.lifeSpan)) / 2; this.y += (0.5 - s.noise(this.lifeCount/1000 + this.lifeSpan*2)) / 2; this.x = s.constrain(this.x, 5, s.width - 5); this.y = s.constrain(this.y, 5, s.height - 5); } render(){ switch(this.type) { default: break; case "massUp": s.push(); s.translate(this.x, this.y); s.scale(itemScale); s.rotate(this.lifeCount/20); s.noFill(); s.strokeWeight(0.5); s.stroke(neonPink); s.push(); for (let i = 0; i < 4; i ++) { s.triangle(0, -2, 1, -5, -1, -5); s.rotate(s.PI/2); } s.pop(); s.pop(); break; case "ribbonOff": s.push(); s.translate(this.x, this.y); s.scale(itemScale); s.rotate(this.lifeCount/20 + s.PI/4); s.noFill(); s.strokeWeight(0.5); s.stroke(neonPink); s.push(); for (let i = 0; i < 10; i ++) { s.ellipse(2, -2, 3, 3); s.rotate(s.PI/5); } s.pop(); s.pop(); break; case "jumpKit": s.push(); s.translate(this.x, this.y); s.scale(itemScale); s.rotate(this.lifeCount/20 + s.PI/2); s.noFill(); s.strokeWeight(0.5); s.stroke(neonPink); s.push(); for (let i = 0; i < 6; i ++) { s.rect(0, 0, 5, 5); s.rotate(s.PI/3); } s.pop(); s.pop(); break; case "Lturn": s.push(); s.translate(this.x, this.y); s.scale(itemScale); s.rotate(this.lifeCount/20 + s.PI * 3 / 4); s.noFill(); s.stroke(255); s.strokeWeight(0.5); s.textAlign(s.CENTER, s.CENTER); s.textSize(10); s.text("L",0,0); s.pop(); break; case "Uturn": s.push(); s.translate(this.x, this.y); s.scale(itemScale); s.rotate(this.lifeCount/20 + s.PI); s.noFill(); s.stroke(255); s.strokeWeight(0.5); s.textAlign(s.CENTER, s.CENTER); s.textSize(10); s.text("U",0,0); s.pop(); break; } } } s.preload = function () { anuratiFont = s.loadFont(AnuratiUrl); //a by type designer Emmeran Richard. //https://www.behance.net/gallery/33704618/ANURATI-Free-font } s.setup = function () { s.createCanvas(650,650); s.background(250); s.frameRate(30); if (itemInterval) { clearInterval(itemInterval); itemInterval = undefined; } } let things = []; const getThingC = function(){ let pool = [ "#fcdd81", "#fac853", "#e28d5b", "#f2aaa9", "#d99f89", "#fcda50", "#f2de78", "#e48686" ]; return s.random(pool); } class Thing{ constructor(p1, p2){ this.p1 = p1; this.p2 = p2; this.c = getThingC(); this.act = true; this.center = s.createVector((this.p1.loc.x + this.p2.loc.x)/2, (this.p1.loc.y + this.p2.loc.y)/2); this.r = s.dist(this.p1.loc.x, this.p1.loc.y, this.p2.loc.x, this.p2.loc.y)/2; } update(){ if (!this.p1 || !this.p2 || this.p1.destroyed || this.p2.destroyed) { this.act = false; } this.center = s.createVector((this.p1.loc.x + this.p2.loc.x)/2, (this.p1.loc.y + this.p2.loc.y)/2); this.r = s.dist(this.p1.loc.x, this.p1.loc.y, this.p2.loc.x, this.p2.loc.y)/2; } render(){ s.push(); s.noFill(); s.strokeWeight(0.5); let temc = s.color(this.c); temc.setAlpha(100); s.stroke(0,50); s.ellipse(this.center.x, this.center.y, 2*this.r); s.pop(); } } const circleIntersection = function(cir1, cir2){ let d = s.dist(cir1.center.x,cir1.center.y,cir2.center.x,cir2.center.y) if (cir1.r + cir2.r < d || d < s.abs(cir1.r - cir2.r) || d < 5) return false; // no intersection let a = (cir1.r * cir1.r - cir2.r * cir2.r + d*d) / (2 * d); let midx = cir1.center.x + (a * (cir2.center.x - cir1.center.x)) / d; let midy = cir1.center.y + (a * (cir2.center.y - cir1.center.y)) / d; let h = s.sqrt(cir1.r * cir1.r - a*a); let p1x = midx + h*(cir2.center.y - cir1.center.y ) / d; let p1y = midy - h*(cir2.center.x - cir1.center.x ) / d; let p2x = midx - h*(cir2.center.y - cir1.center.y ) / d; let p2y = midy + h*(cir2.center.x - cir1.center.x ) / d; return [s.createVector(p1x, p1y), s.createVector(p2x, p2y)]; } s.draw = function () { if (!started){ //not started //init screen s.push(); s.textFont(anuratiFont); s.textSize(40); s.fill(0); s.noStroke(); s.textAlign(s.CENTER, s.CENTER); s.text("CIRCLE B", s.width/2, s.height/2); s.pop(); s.noLoop(); } else { //setting interval function lines if (!itemInterval) { itemInterval = setInterval(spawnItem,2000); for (let no = 0; no < maxCycleNo; no++) { cycles.push(new LightCycle(s.createVector(s.width/2,s.height/2),getColor(),s.createVector(s.random(-1,1),s.random(-1,1)), 3)); } things.push(new Thing(cycles[cycles.length - 1], cycles[0])); for (let i = 1; i < cycles.length; i++) { things.push(new Thing(cycles[i - 1],cycles[i])); } s.background(250); } // if (!paused){ //main //drawGrid(10); //s.background(250); //draw items (if any) if (items.length > 0) { let i = items.length - 1; while (i > -1) { if (items[i].shouldBeRemoved) { items.splice(i, 1); } i --; } items.forEach(it => { it.update(); //it.render(); }); } // //update circles if (things.length > 0) { let i = things.length - 1; while (i > -1){ if (!things[i].act) { things.splice(i, 1); } else { things[i].update(); } i--; } } // //draw cycles if (cycles.length > 0) { let i = cycles.length - 1; while (i > -1) { if (cycles[i].destroyed) { cycles.splice(i, 1); } i --; } } cycles.forEach(c => { c.update(); //c.render(); }) if (cycles.length < maxCycleNo) { newPlayerIn(); } // for (let i = 0; i < things.length; i++) { for (let j = i; j < things.length;j++) { let ps = circleIntersection(things[i], things[j]); if (!ps) continue; let len = s.dist(ps[0].x, ps[0].y,ps[1].x,ps[1].y); if (len < 5) continue; s.push(); s.noFill; s.strokeWeight(0.5); s.stroke(s.map(len,0,400,0,250), s.map(len,0,400,100,50)); s.line(ps[0].x, ps[0].y,ps[1].x,ps[1].y); s.pop(); } } //things.forEach(c => c.render()); // //s.noLoop(); } else { s.noLoop(); } } } s.mouseClicked = function () { if (!(s.mouseX>0&&s.mouseX0&&s.mouseY { //let tt; // for test only const AnuratiUrl = "https://static.observableusercontent.com/files/5d90d13355b0f8db98ebd049eb2ae6e1a17bba830827904420d963e08490872d7c3a6f970b60a3029c64909f6d03e330105cd6ae4e487ae0966b1b479afebb6b" let itemInterval; let started = false; let paused = false; let anuratiFont; const speedLimit = 5; const neonPink = "#FE019A"; const ribbonNearThreshold = 5; let cycles = []; let items = []; const maxCycleNo = 6; const maxItemNo = 6; const immortalTime = 3; const itemHitBox = 6; const itemScale = 1.5; const itemVisiableRange = 50; const getColor = function () { const pool = [ "#6CBDD8", "#F7DF4B", "#D8700C", "#00FDC3", "#FF352D", ]; return s.random(pool); } const objDeepEq = function (a,b){ //simple deep eq if (a === b) return true; if (a === null && b === null) return true; if ((a === null && b !== null) || (a !== null && b === null)) return false; if (typeof a != 'object' || typeof b != 'object') return false; let keysA = Object.keys(a), keysB = Object.keys(b); if (keysA.length !== keysB.length) return false; for (const key of keysA) { if (!keysB.includes(key) || !objDeepEq(a[key], b[key])) return false; } return true; } const getItemType = function () { const pool = [ "massUp", "ribbonOff", "jumpKit", "Lturn", "Uturn" ]; return s.random(pool); } const drawGrid = function (size) { s.background("#191840"); s.push(); s.stroke("#65A6CD"); s.strokeWeight(5); s.line(0,0,s.width/2 -5, 0); s.line(s.width/2 + 5, 0, s.width, 0); s.line(0,s.height,s.width/2 -5, s.height); s.line(s.width/2 + 5, s.height, s.width, s.height); s.line(0,0,0, s.height/2 -5); s.line(0, s.height/2 + 5, 0, s.height); s.line(s.width,0,s.width, s.height/2 -5); s.line(s.width, s.height/2 + 5, s.width, s.height); const strokeC = s.color("#65A6CD"); strokeC.setAlpha(100); s.stroke(strokeC); s.strokeWeight(1); for (let x = -10; x < s.width + 10; x += size){ s.line(x, -10, x, s.height + 10); } for (let y = -10; y < s.height + 10; y += size) { s.line(-10, y, s.width + 10, y); } s.pop(); } const spawnItem = function () { if (items.length < maxItemNo){ if (s.random() > 0.3) { items.push(new Item(s.random(10, s.width - 10), s.random(10, s.height - 10),getItemType())); } } } const collisionCheck = function (cycle, item) { return s.dist(cycle.loc.x, cycle.loc.y, item.x, item.y) < itemHitBox * itemScale }; const caculateDistPoint2Line = function (p, l){ let d1 = s.dist(p.x,p.y,l[0].x,l[0].y); let d2 = s.dist(p.x,p.y,l[1].x,l[1].y); return s.abs(d1+(d2-d1)/2); } const ribbonNearCheck = function (cyc, ribbon) { if (ribbon.length < 2) return false; if (objDeepEq(cyc.lightRibbon, ribbon)) return false; return mightNearCheck(cyc.loc, ribbon); } const mightNearCheck = function (point, ribbon) { if (ribbon.length < 2) return false; let rib = [...ribbon]; rib.pop(); for (let i = 1; i < rib.length; i++) { if (rib[i] != null && rib[i-1] !== null) { if (s.dist(rib[i].x, rib[i].y, rib[i-1].x, rib[i-1].y) > 500) continue; if (caculateDistPoint2Line(point, [rib[i-1], rib[i]]) < ribbonNearThreshold) return [rib[i-1], rib[i]]; } } return false; } const check2LinesIntersect = function (l1x1, l1y1, l1x2, l1y2, l2x1, l2y1, l2x2, l2y2) { if (s.dist(l2x1,l2y1,l2x2,l2y2) > 500 || s.dist(l1x1, l1y1, l1x2, l1y2) > 500) return false; //from https://stackoverflow.com/a/24392281 let det, gamma, lambda; det = (l1x2 - l1x1) * (l2y2 - l2y1) - (l2x2 - l2x1) * (l1y2 - l1y1); if (det === 0) { return false; } else { lambda = ((l2y2 - l2y1) * (l2x2 - l1x1) + (l2x1 - l2x2) * (l2y2 - l1y1)) / det; gamma = ((l1y1 - l1y2) * (l2x2 - l1x1) + (l1x2 - l1x1) * (l2y2 - l1y1)) / det; return (0 < lambda && lambda < 1) && (0 < gamma && gamma < 1); } } const checkIntersect= function (l, r){ if (r.length < 2) return false; for (let i = 1; i < r.length; i++) { if (r[i] !== null && r[i-1] !== null) { if (check2LinesIntersect(l[0].x,l[0].y,l[1].x,l[1].y,r[i].x,r[i].y,r[i-1].x,r[i-1].y)) return [r[i], r[i-1]]; } } return false; } // below over all shall be O(n); const goOverCheck = function (cyc, ribbon) { if (!cyc.lastPosition) return false; if (ribbon.length < 2) return false; let rib = [...ribbon]; if (objDeepEq(rib, cyc.lightRibbon)) rib.pop(); return checkIntersect([cyc.loc, cyc.lastPosition], rib); } const mightGoOver = function (l, ribbon) { let rib = [...ribbon]; return checkIntersect(l, rib); } // const newPlayerIn = function () { let dice = s.random([0,1,2]); switch(dice){ default: cycles.push(new LightCycle(s.createVector(s.random(s.width/2 - 5, s.width/2 + 5), 7), getColor(), s.createVector(s.random(-0.5,0.5),s.random(0.6, 1)), 1)); break; case 0: cycles.push(new LightCycle(s.createVector(s.random(s.width/2 - 5, s.width/2 + 5), s.height - 7), getColor(), s.createVector(s.random(-0.5,0.5),s.random(-1, -0.6)), 1)); break; case 1: cycles.push(new LightCycle(s.createVector(7, s.random(s.height/2 - 5, s.height/2 + 5)), getColor(), s.createVector(s.random(0.6, 1),s.random(-0.5, 0.5)), 1)); break; case 2: cycles.push(new LightCycle(s.createVector(s.width - 7, s.random(s.height/2 - 5, s.height/2 + 5)), getColor(), s.createVector(s.random(-1, -0.6),s.random(-0.5, 0.5)), 1)); break; } things.push(new Thing(cycles[cycles.length - 1],cycles[0])); things.push(new Thing(cycles[cycles.length - 2],cycles[cycles.length - 1])); } class LightCycle{ constructor(loc,c,v,imm){ this.loc = loc; this.c = c; this.m = 2; this.mChangedCount = 0; this.hasJumpKit = 0; this.lightRibbonOn = true; this.lightRibbonOffCount = 0; this.v = v; this.acc = s.createVector(0,0); this.lightRibbon = []; this.immortal = true; this.immortalTime = imm; this.immortalCount = 0; this.destroyed = false; this.lastPosition = null; } render(){ //destroyed animation (only one frame ... lol) if (this.destroyed){ //boom s.push(); s.translate(this.loc.x, this.loc.y); s.rotate(s.random(-s.PI, s.PI)); s.noFill(); s.stroke(this.c); s.strokeWeight(3); s.beginShape(); for (let i = 0; i < 10; i++) { let di; di = s.random(6,10); if (i % 2 === 0) di = s.random(2,5); let r = (s.PI/5 * i) + s.random(-0.1, 0.1); s.vertex(di*s.cos(r), di*s.sin(r)); } s.endShape(s.CLOSE); s.pop(); return; } // // jumpKit if (this.hasJumpKit){ s.push(); s.stroke(255); s.noFill(); s.strokeWeight(0.8); s.translate(this.loc.x, this.loc.y); s.rotate(s.frameCount/10); for (let i = 0; i < 2*s.PI; i += s.PI/2){ s.arc(0,0,15,15,i, i + s.PI/4); } s.pop(); } // //light ribbon for (let i = 1; i < this.lightRibbon.length; i ++) { s.push(); let temC = s.color(this.c); temC.setAlpha(i < 50? s.map(i,0,49,50,255): 255); s.stroke(temC); s.noFill(); s.strokeWeight( i < 4 ? s.map(i, 0, 3, 0.5, 2.5) : 2.5); if (this.lightRibbon[i] != null && this.lightRibbon[i-1] != null) { if (s.dist(this.lightRibbon[i-1].x, this.lightRibbon[i-1].y,this.lightRibbon[i].x,this.lightRibbon[i].y) < 500){ s.line(this.lightRibbon[i-1].x, this.lightRibbon[i-1].y,this.lightRibbon[i].x,this.lightRibbon[i].y); } } s.pop(); } //the vehicle s.push(); s.fill(0); if (this.immortal) { if (this.immortalCount % s.frameRate()/4 > s.frameRate() / 8) { let temC = s.color(this.c); temC.setAlpha(150); s.stroke(temC) } else { s.stroke(this.c) } } else { s.stroke(this.c); } s.translate(this.loc.x, this.loc.y); s.rotate(this.getDirection()); //wheel 1 s.beginShape(); s.vertex(1.5, -1); s.vertex(1.5, -5); s.curveVertex(1.5,-5); s.curveVertex(1.5,-7); s.curveVertex(-1.5, -7); s.curveVertex(-1.5,-5); s.vertex(-1.5,-5); s.vertex(-1.5,-1); s.curveVertex(-1.5,-1); s.curveVertex(-1.5, 1); s.curveVertex(1.5,1); s.curveVertex(1.5,-1); s.endShape(s.CLOSE); //wheel 2 s.beginShape(); s.vertex(1.5, 1); s.vertex(1.5, 5); s.curveVertex(1.5,5); s.curveVertex(1.5,7); s.curveVertex(-1.5,7); s.curveVertex(-1.5,5); s.vertex(-1.5,5); s.vertex(-1.5,1); s.curveVertex(-1.5,1); s.curveVertex(-1.5,-1); s.curveVertex(1.5,-1); s.curveVertex(1.5,1); s.endShape(s.CLOSE); s.pop(); } update(){ //check immortal state this.immortalCount ++; if (this.immortal && this.immortalCount > this.immortalTime * s.frameRate()) this.immortal = false; // //check if distroyed if (!this.immortal) { for (const cyc of cycles) { if (ribbonNearCheck(this, cyc.lightRibbon) || goOverCheck(this, cyc.lightRibbon)){ if (this.hasJumpKit > 0){ this.hasJumpKit --; } else { this.destroyed = true; } break; } } if (this.loc.x < -1 || this.loc.x > s.width + 1 || this.loc.y < -1|| this.loc.y > s.height + 1) { this.destroyed = true; } } // if (!this.destroyed) { //check other states (m, ribbon state, etc) if (this.m > 2) { if (this.mChangedCount > s.frameRate() * 7) { this.m = 2; this.mChangedCount = 0; } else { this.mChangedCount ++; } } if (!this.lightRibbonOn) { if (this.lightRibbonOffCount > s.frameRate() * 5){ this.lightRibbonOn = true; this.lightRibbonOffCount = 0; } else { this.lightRibbonOffCount ++; } } // //check "food" for (const it of items) { if (collisionCheck(this, it)) { switch(it.type) { default: break; case "massUp": this.m *= 2; this.v.x = this.v.x/2; this.v.y = this.v.y/2; break; case "jumpKit": this.hasJumpKit = 3; break; case "ribbonOff": this.lightRibbonOn = false; break; case "Lturn": let tem = this.v.x; this.v.x = this.v.y; this.v.y = tem; break; case "Uturn": this.v.x = -this.v.x; this.v.y = -this.v.y; break; } it.shouldBeRemoved = true; break; } } // this.move(); } } move(){ this.caculateSpeed(); if (this.v.magSq() > 0) { if (!this.immortal){ if (this.lightRibbonOn) { this.lightRibbon.push(s.createVector(this.loc.x, this.loc.y)); } else { this.lightRibbon.push(null); } } if (this.lightRibbon.length > 100) this.lightRibbon.shift(); this.lastPosition = s.createVector(this.loc.x, this.loc.y); } this.loc.add(this.v); } caculateSpeed(){ this.caculateAcc(); this.v.x += this.acc.x; this.v.y += this.acc.y; //speed limit this.v.x = s.constrain(this.v.x, -speedLimit, speedLimit); this.v.y = s.constrain(this.v.y, -speedLimit, speedLimit); } caculateAcc(){ let forceX = 0; let forceY = 0; //random walk forceX += s.random(-1,1); forceY += s.random(-1,1); // let nextPosible = s.createVector(this.loc.x + this.v.x, this.loc.y + this.v.y); //prevent hit if (!this.hasJumpKit){ //the cycle is not afraid with jumpKit for (const cyc of cycles) { let nearSeg = mightNearCheck(nextPosible, cyc.lightRibbon); let intersectSeg = mightGoOver([nextPosible, this.loc], cyc.lightRibbon); if (nearSeg || intersectSeg) { //try to avoid let dir; if (nearSeg) { let temVec1 = s.createVector(nearSeg[0].x - nearSeg[1].x, nearSeg[0].y - nearSeg[1].y); let temVec2 = s.createVector(nearSeg[1].x - nearSeg[0].x, nearSeg[1].y - nearSeg[0].y); let ang1 = temVec1.angleBetween(this.v); let ang2 = temVec2.angleBetween(this.v); let determin = (s.abs(ang1) > s.abs(ang2) ? ang1 : ang2); if (determin < 0) { dir = - s.PI/2; } else { dir = s.PI/2; } } if (intersectSeg) { let temVec1 = s.createVector(intersectSeg[0].x - intersectSeg[1].x, intersectSeg[0].y - intersectSeg[1].y); let temVec2 = s.createVector(intersectSeg[1].x - intersectSeg[0].x, intersectSeg[1].y - intersectSeg[0].y); let ang1 = temVec1.angleBetween(this.v); let ang2 = temVec2.angleBetween(this.v); let determin = (s.abs(ang1) > s.abs(ang2) ? ang1 : ang2); if (determin < 0) { dir = - s.PI/2; } else { dir = s.PI/2; } } let turnForce = s.createVector(this.v.x, this.v.y); turnForce.normalize(); turnForce.rotate(dir + s.random(-s.PI/8, s.PI/8)); // around 90 degree turn let para = s.random(5,7); forceX += turnForce.x * para; forceY += turnForce.y * para; // } } } // // hit wall let dir = undefined; if (nextPosible.x < 0) dir = (this.v.heading() < 0) ? s.PI/2 : -s.PI/2; if (nextPosible.x > s.width) dir = (this.v.heading() > 0) ? s.PI/2 : -s.PI/2; if (nextPosible.y < 0) dir = (this.v.heading() > -s.PI/2) ? s.PI/2 : -s.PI/2; if (nextPosible.y > s.height ) dir = (this.v.heading() > s.PI/2) ? s.PI/2 : -s.PI/2; if (dir) { let turnForce = s.createVector(this.v.x, this.v.y); turnForce.normalize(); turnForce.rotate(dir + s.random(-s.PI/8, s.PI/8)); // around 90 degree turn let para = s.random(5,10); forceX += turnForce.x * para; forceY += turnForce.y * para; } // // items hunt for (const it of items) { if (s.dist(it.x, it.y, this.loc.x, this.loc.y) < itemVisiableRange) { if (it.type === "jumpKit") { let para = s.random(0.3,1.5); let vec = s.createVector(it.x - this.loc.x, it.y - this.loc.y); vec.normalize(); forceX += vec.x * para; forceY += vec.y * para; } else if (it.type === "Lturn" || it.type === "Uturn") { let para = s.random(0.2,0.6); let vec = s.createVector(it.x - this.loc.x, it.y - this.loc.y); vec.normalize(); forceX += vec.x * para; forceY += vec.y * para; } else { let para = s.random(0.2,0.5); let vec = s.createVector(this.loc.x - it.x, this.loc.y - it.y); vec.normalize(); forceX += vec.x * para; forceY += vec.y * para; } //break; // multi-tasking? } } // //force to acc this.acc.x = forceX/this.m; this.acc.y = forceY/this.m; } getDirection(){ return this.v.heading() + s.PI/2; } } class Item { constructor(x,y,type){ this.x = x; this.y = y; this.type = type; //this.v = s.createVector(0,0); //this.acc = s.createVector(0,0); this.lifeSpan = s.floor(s.random(15, 20)) * s.frameRate(); this.lifeCount = 0; this.shouldBeRemoved = false; this.m = s.floor(s.random(2000, 5000)); } update(){ this.lifeCount ++; if (this.lifeCount > this.lifeSpan) this.shouldBeRemoved = true; this.x += (0.5 - s.noise(this.lifeCount/1000 + this.lifeSpan)) / 2; this.y += (0.5 - s.noise(this.lifeCount/1000 + this.lifeSpan*2)) / 2; this.x = s.constrain(this.x, 5, s.width - 5); this.y = s.constrain(this.y, 5, s.height - 5); } render(){ switch(this.type) { default: break; case "massUp": s.push(); s.translate(this.x, this.y); s.scale(itemScale); s.rotate(this.lifeCount/20); s.noFill(); s.strokeWeight(0.5); s.stroke(neonPink); s.push(); for (let i = 0; i < 4; i ++) { s.triangle(0, -2, 1, -5, -1, -5); s.rotate(s.PI/2); } s.pop(); s.pop(); break; case "ribbonOff": s.push(); s.translate(this.x, this.y); s.scale(itemScale); s.rotate(this.lifeCount/20 + s.PI/4); s.noFill(); s.strokeWeight(0.5); s.stroke(neonPink); s.push(); for (let i = 0; i < 10; i ++) { s.ellipse(2, -2, 3, 3); s.rotate(s.PI/5); } s.pop(); s.pop(); break; case "jumpKit": s.push(); s.translate(this.x, this.y); s.scale(itemScale); s.rotate(this.lifeCount/20 + s.PI/2); s.noFill(); s.strokeWeight(0.5); s.stroke(neonPink); s.push(); for (let i = 0; i < 6; i ++) { s.rect(0, 0, 5, 5); s.rotate(s.PI/3); } s.pop(); s.pop(); break; case "Lturn": s.push(); s.translate(this.x, this.y); s.scale(itemScale); s.rotate(this.lifeCount/20 + s.PI * 3 / 4); s.noFill(); s.stroke(255); s.strokeWeight(0.5); s.textAlign(s.CENTER, s.CENTER); s.textSize(10); s.text("L",0,0); s.pop(); break; case "Uturn": s.push(); s.translate(this.x, this.y); s.scale(itemScale); s.rotate(this.lifeCount/20 + s.PI); s.noFill(); s.stroke(255); s.strokeWeight(0.5); s.textAlign(s.CENTER, s.CENTER); s.textSize(10); s.text("U",0,0); s.pop(); break; } } } s.preload = function () { anuratiFont = s.loadFont(AnuratiUrl); //a by type designer Emmeran Richard. //https://www.behance.net/gallery/33704618/ANURATI-Free-font } s.setup = function () { s.createCanvas(650,650); s.background(250); s.frameRate(30); if (itemInterval) { clearInterval(itemInterval); itemInterval = undefined; } } let things = []; const getThingC = function(){ let pool = [ "#2f4858","#33658a","#86bbd8","#f6ae2d","#f26419" ]; return s.random(pool); } class Thing{ constructor(p1, p2){ this.p1 = p1; this.p2 = p2; this.c = getThingC(); this.act = true; this.center = s.createVector((this.p1.loc.x + this.p2.loc.x)/2, (this.p1.loc.y + this.p2.loc.y)/2); this.r = s.dist(this.p1.loc.x, this.p1.loc.y, this.p2.loc.x, this.p2.loc.y)/2; this.count = 0; } update(){ if (!this.p1 || !this.p2 || this.p1.destroyed || this.p2.destroyed) { this.act = false; } this.center = s.createVector((this.p1.loc.x + this.p2.loc.x)/2, (this.p1.loc.y + this.p2.loc.y)/2); this.r = s.dist(this.p1.loc.x, this.p1.loc.y, this.p2.loc.x, this.p2.loc.y)/2; this.count ++; } render(){ s.push(); s.noFill(); s.strokeWeight(0.5); let temc = s.color(this.c); temc.setAlpha(100); s.stroke(0,50); s.ellipse(this.center.x, this.center.y, 2*this.r); s.pop(); } } const circleIntersection = function(cir1, cir2){ let d = s.dist(cir1.center.x,cir1.center.y,cir2.center.x,cir2.center.y) if (cir1.r + cir2.r < d || d < s.abs(cir1.r - cir2.r) || d < 5) return false; // no intersection let a = (cir1.r * cir1.r - cir2.r * cir2.r + d*d) / (2 * d); let midx = cir1.center.x + (a * (cir2.center.x - cir1.center.x)) / d; let midy = cir1.center.y + (a * (cir2.center.y - cir1.center.y)) / d; let h = s.sqrt(cir1.r * cir1.r - a*a); let p1x = midx + h*(cir2.center.y - cir1.center.y ) / d; let p1y = midy - h*(cir2.center.x - cir1.center.x ) / d; let p2x = midx - h*(cir2.center.y - cir1.center.y ) / d; let p2y = midy + h*(cir2.center.x - cir1.center.x ) / d; return [s.createVector(p1x, p1y), s.createVector(p2x, p2y)]; } s.draw = function () { if (!started){ //not started //init screen s.push(); s.textFont(anuratiFont); s.textSize(40); s.fill(0); s.noStroke(); s.textAlign(s.CENTER, s.CENTER); s.text("CIRCLE C", s.width/2, s.height/2); s.pop(); s.noLoop(); } else { //setting interval function lines if (!itemInterval) { itemInterval = setInterval(spawnItem,2000); for (let no = 0; no < maxCycleNo; no++) { cycles.push(new LightCycle(s.createVector(s.width/2,s.height/2),getColor(),s.createVector(s.random(-1,1),s.random(-1,1)), 3)); } things.push(new Thing(cycles[cycles.length - 1], cycles[0])); for (let i = 1; i < cycles.length; i++) { things.push(new Thing(cycles[i - 1],cycles[i])); } s.background(250); } // if (!paused){ //main //drawGrid(10); //s.background(250); //draw items (if any) if (items.length > 0) { let i = items.length - 1; while (i > -1) { if (items[i].shouldBeRemoved) { items.splice(i, 1); } i --; } items.forEach(it => { it.update(); //it.render(); }); } // //update circles if (things.length > 0) { let i = things.length - 1; while (i > -1){ if (!things[i].act) { things.splice(i, 1); } else { things[i].update(); } i--; } } // //draw cycles if (cycles.length > 0) { let i = cycles.length - 1; while (i > -1) { if (cycles[i].destroyed) { cycles.splice(i, 1); } i --; } } cycles.forEach(c => { c.update(); //c.render(); }) if (cycles.length < maxCycleNo) { newPlayerIn(); } // for (let i = 0; i < things.length; i++) { for (let j = i; j < things.length;j++) { let ps = circleIntersection(things[i], things[j]); if (!ps) continue; let len = s.dist(ps[0].x, ps[0].y,ps[1].x,ps[1].y); if (len < 5) continue; s.push(); s.noFill; s.strokeWeight(0.5); let temc = s.color(things[i].c); let hue = s.hue(temc); let sat = s.saturation(temc); let bri = s.brightness(temc); hue += (0.5-s.noise((things[i].count+things[j].count)/100)) * 30; hue = (360+hue) % 360; s.colorMode(s.HSB); s.stroke(hue, sat, bri, s.map(len, 0, 400, 0.33, 0.1)); s.line(ps[0].x, ps[0].y,ps[1].x,ps[1].y); s.pop(); } } //things.forEach(c => c.render()); // //s.noLoop(); } else { s.noLoop(); } } } s.mouseClicked = function () { if (!(s.mouseX>0&&s.mouseX0&&s.mouseY { //let tt; // for test only const AnuratiUrl = "https://static.observableusercontent.com/files/5d90d13355b0f8db98ebd049eb2ae6e1a17bba830827904420d963e08490872d7c3a6f970b60a3029c64909f6d03e330105cd6ae4e487ae0966b1b479afebb6b" let itemInterval; let started = false; let paused = false; let anuratiFont; const speedLimit = 5; const neonPink = "#FE019A"; const ribbonNearThreshold = 5; let cycles = []; let items = []; const maxCycleNo = 6; const maxItemNo = 6; const immortalTime = 3; const itemHitBox = 6; const itemScale = 1.5; const itemVisiableRange = 50; const getColor = function () { const pool = [ "#6CBDD8", "#F7DF4B", "#D8700C", "#00FDC3", "#FF352D", ]; return s.random(pool); } const objDeepEq = function (a,b){ //simple deep eq if (a === b) return true; if (a === null && b === null) return true; if ((a === null && b !== null) || (a !== null && b === null)) return false; if (typeof a != 'object' || typeof b != 'object') return false; let keysA = Object.keys(a), keysB = Object.keys(b); if (keysA.length !== keysB.length) return false; for (const key of keysA) { if (!keysB.includes(key) || !objDeepEq(a[key], b[key])) return false; } return true; } const getItemType = function () { const pool = [ "massUp", "ribbonOff", "jumpKit", "Lturn", "Uturn" ]; return s.random(pool); } const drawGrid = function (size) { s.background("#191840"); s.push(); s.stroke("#65A6CD"); s.strokeWeight(5); s.line(0,0,s.width/2 -5, 0); s.line(s.width/2 + 5, 0, s.width, 0); s.line(0,s.height,s.width/2 -5, s.height); s.line(s.width/2 + 5, s.height, s.width, s.height); s.line(0,0,0, s.height/2 -5); s.line(0, s.height/2 + 5, 0, s.height); s.line(s.width,0,s.width, s.height/2 -5); s.line(s.width, s.height/2 + 5, s.width, s.height); const strokeC = s.color("#65A6CD"); strokeC.setAlpha(100); s.stroke(strokeC); s.strokeWeight(1); for (let x = -10; x < s.width + 10; x += size){ s.line(x, -10, x, s.height + 10); } for (let y = -10; y < s.height + 10; y += size) { s.line(-10, y, s.width + 10, y); } s.pop(); } const spawnItem = function () { if (items.length < maxItemNo){ if (s.random() > 0.3) { items.push(new Item(s.random(10, s.width - 10), s.random(10, s.height - 10),getItemType())); } } } const collisionCheck = function (cycle, item) { return s.dist(cycle.loc.x, cycle.loc.y, item.x, item.y) < itemHitBox * itemScale }; const caculateDistPoint2Line = function (p, l){ let d1 = s.dist(p.x,p.y,l[0].x,l[0].y); let d2 = s.dist(p.x,p.y,l[1].x,l[1].y); return s.abs(d1+(d2-d1)/2); } const ribbonNearCheck = function (cyc, ribbon) { if (ribbon.length < 2) return false; if (objDeepEq(cyc.lightRibbon, ribbon)) return false; return mightNearCheck(cyc.loc, ribbon); } const mightNearCheck = function (point, ribbon) { if (ribbon.length < 2) return false; let rib = [...ribbon]; rib.pop(); for (let i = 1; i < rib.length; i++) { if (rib[i] != null && rib[i-1] !== null) { if (s.dist(rib[i].x, rib[i].y, rib[i-1].x, rib[i-1].y) > 500) continue; if (caculateDistPoint2Line(point, [rib[i-1], rib[i]]) < ribbonNearThreshold) return [rib[i-1], rib[i]]; } } return false; } const check2LinesIntersect = function (l1x1, l1y1, l1x2, l1y2, l2x1, l2y1, l2x2, l2y2) { if (s.dist(l2x1,l2y1,l2x2,l2y2) > 500 || s.dist(l1x1, l1y1, l1x2, l1y2) > 500) return false; //from https://stackoverflow.com/a/24392281 let det, gamma, lambda; det = (l1x2 - l1x1) * (l2y2 - l2y1) - (l2x2 - l2x1) * (l1y2 - l1y1); if (det === 0) { return false; } else { lambda = ((l2y2 - l2y1) * (l2x2 - l1x1) + (l2x1 - l2x2) * (l2y2 - l1y1)) / det; gamma = ((l1y1 - l1y2) * (l2x2 - l1x1) + (l1x2 - l1x1) * (l2y2 - l1y1)) / det; return (0 < lambda && lambda < 1) && (0 < gamma && gamma < 1); } } const checkIntersect= function (l, r){ if (r.length < 2) return false; for (let i = 1; i < r.length; i++) { if (r[i] !== null && r[i-1] !== null) { if (check2LinesIntersect(l[0].x,l[0].y,l[1].x,l[1].y,r[i].x,r[i].y,r[i-1].x,r[i-1].y)) return [r[i], r[i-1]]; } } return false; } // below over all shall be O(n); const goOverCheck = function (cyc, ribbon) { if (!cyc.lastPosition) return false; if (ribbon.length < 2) return false; let rib = [...ribbon]; if (objDeepEq(rib, cyc.lightRibbon)) rib.pop(); return checkIntersect([cyc.loc, cyc.lastPosition], rib); } const mightGoOver = function (l, ribbon) { let rib = [...ribbon]; return checkIntersect(l, rib); } // const newPlayerIn = function () { let dice = s.random([0,1,2]); switch(dice){ default: cycles.push(new LightCycle(s.createVector(s.random(s.width/2 - 5, s.width/2 + 5), 7), getColor(), s.createVector(s.random(-0.5,0.5),s.random(0.6, 1)), 1)); break; case 0: cycles.push(new LightCycle(s.createVector(s.random(s.width/2 - 5, s.width/2 + 5), s.height - 7), getColor(), s.createVector(s.random(-0.5,0.5),s.random(-1, -0.6)), 1)); break; case 1: cycles.push(new LightCycle(s.createVector(7, s.random(s.height/2 - 5, s.height/2 + 5)), getColor(), s.createVector(s.random(0.6, 1),s.random(-0.5, 0.5)), 1)); break; case 2: cycles.push(new LightCycle(s.createVector(s.width - 7, s.random(s.height/2 - 5, s.height/2 + 5)), getColor(), s.createVector(s.random(-1, -0.6),s.random(-0.5, 0.5)), 1)); break; } things.push(new Thing(cycles[cycles.length - 1],cycles[0])); things.push(new Thing(cycles[cycles.length - 2],cycles[cycles.length - 1])); } class LightCycle{ constructor(loc,c,v,imm){ this.loc = loc; this.c = c; this.m = 2; this.mChangedCount = 0; this.hasJumpKit = 0; this.lightRibbonOn = true; this.lightRibbonOffCount = 0; this.v = v; this.acc = s.createVector(0,0); this.lightRibbon = []; this.immortal = true; this.immortalTime = imm; this.immortalCount = 0; this.destroyed = false; this.lastPosition = null; } render(){ //destroyed animation (only one frame ... lol) if (this.destroyed){ //boom s.push(); s.translate(this.loc.x, this.loc.y); s.rotate(s.random(-s.PI, s.PI)); s.noFill(); s.stroke(this.c); s.strokeWeight(3); s.beginShape(); for (let i = 0; i < 10; i++) { let di; di = s.random(6,10); if (i % 2 === 0) di = s.random(2,5); let r = (s.PI/5 * i) + s.random(-0.1, 0.1); s.vertex(di*s.cos(r), di*s.sin(r)); } s.endShape(s.CLOSE); s.pop(); return; } // // jumpKit if (this.hasJumpKit){ s.push(); s.stroke(255); s.noFill(); s.strokeWeight(0.8); s.translate(this.loc.x, this.loc.y); s.rotate(s.frameCount/10); for (let i = 0; i < 2*s.PI; i += s.PI/2){ s.arc(0,0,15,15,i, i + s.PI/4); } s.pop(); } // //light ribbon for (let i = 1; i < this.lightRibbon.length; i ++) { s.push(); let temC = s.color(this.c); temC.setAlpha(i < 50? s.map(i,0,49,50,255): 255); s.stroke(temC); s.noFill(); s.strokeWeight( i < 4 ? s.map(i, 0, 3, 0.5, 2.5) : 2.5); if (this.lightRibbon[i] != null && this.lightRibbon[i-1] != null) { if (s.dist(this.lightRibbon[i-1].x, this.lightRibbon[i-1].y,this.lightRibbon[i].x,this.lightRibbon[i].y) < 500){ s.line(this.lightRibbon[i-1].x, this.lightRibbon[i-1].y,this.lightRibbon[i].x,this.lightRibbon[i].y); } } s.pop(); } //the vehicle s.push(); s.fill(0); if (this.immortal) { if (this.immortalCount % s.frameRate()/4 > s.frameRate() / 8) { let temC = s.color(this.c); temC.setAlpha(150); s.stroke(temC) } else { s.stroke(this.c) } } else { s.stroke(this.c); } s.translate(this.loc.x, this.loc.y); s.rotate(this.getDirection()); //wheel 1 s.beginShape(); s.vertex(1.5, -1); s.vertex(1.5, -5); s.curveVertex(1.5,-5); s.curveVertex(1.5,-7); s.curveVertex(-1.5, -7); s.curveVertex(-1.5,-5); s.vertex(-1.5,-5); s.vertex(-1.5,-1); s.curveVertex(-1.5,-1); s.curveVertex(-1.5, 1); s.curveVertex(1.5,1); s.curveVertex(1.5,-1); s.endShape(s.CLOSE); //wheel 2 s.beginShape(); s.vertex(1.5, 1); s.vertex(1.5, 5); s.curveVertex(1.5,5); s.curveVertex(1.5,7); s.curveVertex(-1.5,7); s.curveVertex(-1.5,5); s.vertex(-1.5,5); s.vertex(-1.5,1); s.curveVertex(-1.5,1); s.curveVertex(-1.5,-1); s.curveVertex(1.5,-1); s.curveVertex(1.5,1); s.endShape(s.CLOSE); s.pop(); } update(){ //check immortal state this.immortalCount ++; if (this.immortal && this.immortalCount > this.immortalTime * s.frameRate()) this.immortal = false; // //check if distroyed if (!this.immortal) { for (const cyc of cycles) { if (ribbonNearCheck(this, cyc.lightRibbon) || goOverCheck(this, cyc.lightRibbon)){ if (this.hasJumpKit > 0){ this.hasJumpKit --; } else { this.destroyed = true; } break; } } if (this.loc.x < -1 || this.loc.x > s.width + 1 || this.loc.y < -1|| this.loc.y > s.height + 1) { this.destroyed = true; } } // if (!this.destroyed) { //check other states (m, ribbon state, etc) if (this.m > 2) { if (this.mChangedCount > s.frameRate() * 7) { this.m = 2; this.mChangedCount = 0; } else { this.mChangedCount ++; } } if (!this.lightRibbonOn) { if (this.lightRibbonOffCount > s.frameRate() * 5){ this.lightRibbonOn = true; this.lightRibbonOffCount = 0; } else { this.lightRibbonOffCount ++; } } // //check "food" for (const it of items) { if (collisionCheck(this, it)) { switch(it.type) { default: break; case "massUp": this.m *= 2; this.v.x = this.v.x/2; this.v.y = this.v.y/2; break; case "jumpKit": this.hasJumpKit = 3; break; case "ribbonOff": this.lightRibbonOn = false; break; case "Lturn": let tem = this.v.x; this.v.x = this.v.y; this.v.y = tem; break; case "Uturn": this.v.x = -this.v.x; this.v.y = -this.v.y; break; } it.shouldBeRemoved = true; break; } } // this.move(); } } move(){ this.caculateSpeed(); if (this.v.magSq() > 0) { if (!this.immortal){ if (this.lightRibbonOn) { this.lightRibbon.push(s.createVector(this.loc.x, this.loc.y)); } else { this.lightRibbon.push(null); } } if (this.lightRibbon.length > 100) this.lightRibbon.shift(); this.lastPosition = s.createVector(this.loc.x, this.loc.y); } this.loc.add(this.v); } caculateSpeed(){ this.caculateAcc(); this.v.x += this.acc.x; this.v.y += this.acc.y; //speed limit this.v.x = s.constrain(this.v.x, -speedLimit, speedLimit); this.v.y = s.constrain(this.v.y, -speedLimit, speedLimit); } caculateAcc(){ let forceX = 0; let forceY = 0; //random walk forceX += s.random(-1,1); forceY += s.random(-1,1); // let nextPosible = s.createVector(this.loc.x + this.v.x, this.loc.y + this.v.y); //prevent hit if (!this.hasJumpKit){ //the cycle is not afraid with jumpKit for (const cyc of cycles) { let nearSeg = mightNearCheck(nextPosible, cyc.lightRibbon); let intersectSeg = mightGoOver([nextPosible, this.loc], cyc.lightRibbon); if (nearSeg || intersectSeg) { //try to avoid let dir; if (nearSeg) { let temVec1 = s.createVector(nearSeg[0].x - nearSeg[1].x, nearSeg[0].y - nearSeg[1].y); let temVec2 = s.createVector(nearSeg[1].x - nearSeg[0].x, nearSeg[1].y - nearSeg[0].y); let ang1 = temVec1.angleBetween(this.v); let ang2 = temVec2.angleBetween(this.v); let determin = (s.abs(ang1) > s.abs(ang2) ? ang1 : ang2); if (determin < 0) { dir = - s.PI/2; } else { dir = s.PI/2; } } if (intersectSeg) { let temVec1 = s.createVector(intersectSeg[0].x - intersectSeg[1].x, intersectSeg[0].y - intersectSeg[1].y); let temVec2 = s.createVector(intersectSeg[1].x - intersectSeg[0].x, intersectSeg[1].y - intersectSeg[0].y); let ang1 = temVec1.angleBetween(this.v); let ang2 = temVec2.angleBetween(this.v); let determin = (s.abs(ang1) > s.abs(ang2) ? ang1 : ang2); if (determin < 0) { dir = - s.PI/2; } else { dir = s.PI/2; } } let turnForce = s.createVector(this.v.x, this.v.y); turnForce.normalize(); turnForce.rotate(dir + s.random(-s.PI/8, s.PI/8)); // around 90 degree turn let para = s.random(5,7); forceX += turnForce.x * para; forceY += turnForce.y * para; // } } } // // hit wall let dir = undefined; if (nextPosible.x < 0) dir = (this.v.heading() < 0) ? s.PI/2 : -s.PI/2; if (nextPosible.x > s.width) dir = (this.v.heading() > 0) ? s.PI/2 : -s.PI/2; if (nextPosible.y < 0) dir = (this.v.heading() > -s.PI/2) ? s.PI/2 : -s.PI/2; if (nextPosible.y > s.height ) dir = (this.v.heading() > s.PI/2) ? s.PI/2 : -s.PI/2; if (dir) { let turnForce = s.createVector(this.v.x, this.v.y); turnForce.normalize(); turnForce.rotate(dir + s.random(-s.PI/8, s.PI/8)); // around 90 degree turn let para = s.random(5,10); forceX += turnForce.x * para; forceY += turnForce.y * para; } // // items hunt for (const it of items) { if (s.dist(it.x, it.y, this.loc.x, this.loc.y) < itemVisiableRange) { if (it.type === "jumpKit") { let para = s.random(0.3,1.5); let vec = s.createVector(it.x - this.loc.x, it.y - this.loc.y); vec.normalize(); forceX += vec.x * para; forceY += vec.y * para; } else if (it.type === "Lturn" || it.type === "Uturn") { let para = s.random(0.2,0.6); let vec = s.createVector(it.x - this.loc.x, it.y - this.loc.y); vec.normalize(); forceX += vec.x * para; forceY += vec.y * para; } else { let para = s.random(0.2,0.5); let vec = s.createVector(this.loc.x - it.x, this.loc.y - it.y); vec.normalize(); forceX += vec.x * para; forceY += vec.y * para; } //break; // multi-tasking? } } // //force to acc this.acc.x = forceX/this.m; this.acc.y = forceY/this.m; } getDirection(){ return this.v.heading() + s.PI/2; } } class Item { constructor(x,y,type){ this.x = x; this.y = y; this.type = type; //this.v = s.createVector(0,0); //this.acc = s.createVector(0,0); this.lifeSpan = s.floor(s.random(15, 20)) * s.frameRate(); this.lifeCount = 0; this.shouldBeRemoved = false; this.m = s.floor(s.random(2000, 5000)); } update(){ this.lifeCount ++; if (this.lifeCount > this.lifeSpan) this.shouldBeRemoved = true; this.x += (0.5 - s.noise(this.lifeCount/1000 + this.lifeSpan)) / 2; this.y += (0.5 - s.noise(this.lifeCount/1000 + this.lifeSpan*2)) / 2; this.x = s.constrain(this.x, 5, s.width - 5); this.y = s.constrain(this.y, 5, s.height - 5); } render(){ switch(this.type) { default: break; case "massUp": s.push(); s.translate(this.x, this.y); s.scale(itemScale); s.rotate(this.lifeCount/20); s.noFill(); s.strokeWeight(0.5); s.stroke(neonPink); s.push(); for (let i = 0; i < 4; i ++) { s.triangle(0, -2, 1, -5, -1, -5); s.rotate(s.PI/2); } s.pop(); s.pop(); break; case "ribbonOff": s.push(); s.translate(this.x, this.y); s.scale(itemScale); s.rotate(this.lifeCount/20 + s.PI/4); s.noFill(); s.strokeWeight(0.5); s.stroke(neonPink); s.push(); for (let i = 0; i < 10; i ++) { s.ellipse(2, -2, 3, 3); s.rotate(s.PI/5); } s.pop(); s.pop(); break; case "jumpKit": s.push(); s.translate(this.x, this.y); s.scale(itemScale); s.rotate(this.lifeCount/20 + s.PI/2); s.noFill(); s.strokeWeight(0.5); s.stroke(neonPink); s.push(); for (let i = 0; i < 6; i ++) { s.rect(0, 0, 5, 5); s.rotate(s.PI/3); } s.pop(); s.pop(); break; case "Lturn": s.push(); s.translate(this.x, this.y); s.scale(itemScale); s.rotate(this.lifeCount/20 + s.PI * 3 / 4); s.noFill(); s.stroke(255); s.strokeWeight(0.5); s.textAlign(s.CENTER, s.CENTER); s.textSize(10); s.text("L",0,0); s.pop(); break; case "Uturn": s.push(); s.translate(this.x, this.y); s.scale(itemScale); s.rotate(this.lifeCount/20 + s.PI); s.noFill(); s.stroke(255); s.strokeWeight(0.5); s.textAlign(s.CENTER, s.CENTER); s.textSize(10); s.text("U",0,0); s.pop(); break; } } } s.preload = function () { anuratiFont = s.loadFont(AnuratiUrl); //a by type designer Emmeran Richard. //https://www.behance.net/gallery/33704618/ANURATI-Free-font } s.setup = function () { s.createCanvas(650,650); s.background(250); s.frameRate(30); if (itemInterval) { clearInterval(itemInterval); itemInterval = undefined; } } let things = []; const getThingC = function(){ let pool = [ "#e85f7f","#f3b62a","#13dfa9","#1c96bf","#104f64" ]; return s.random(pool); } class Thing{ constructor(p1, p2){ this.p1 = p1; this.p2 = p2; this.c = getThingC(); this.act = true; this.center = s.createVector((this.p1.loc.x + this.p2.loc.x)/2, (this.p1.loc.y + this.p2.loc.y)/2); this.r = s.dist(this.p1.loc.x, this.p1.loc.y, this.p2.loc.x, this.p2.loc.y)/2; this.count = 0; this.type = s.random([3,3,3,3,4,5]); } update(){ if (!this.p1 || !this.p2 || this.p1.destroyed || this.p2.destroyed) { this.act = false; } this.center = s.createVector((this.p1.loc.x + this.p2.loc.x)/2, (this.p1.loc.y + this.p2.loc.y)/2); this.r = s.dist(this.p1.loc.x, this.p1.loc.y, this.p2.loc.x, this.p2.loc.y)/2; this.count ++; } render(){ s.push(); s.noFill(); s.strokeWeight(0.5); let temc = s.color(this.c); //temc.setAlpha(s.map(this.r, 0, 400, 100, 20)); //s.stroke(temc); let hue = s.hue(temc); let sat = s.saturation(temc); let bri = s.brightness(temc); hue += (0.5 - s.noise(this.count / 100 + 40)) * 30; hue = (360 + hue)%360; s.colorMode(s.HSB); s.stroke(hue, sat, bri, s.map(this.r, 0, 400, 0.33, 0)); s.translate(this.center.x, this.center.y); let d = s.createVector(this.p1.loc.x - this.p2.loc.x, this.p1.loc.y - this.p2.loc.y); s.rotate(d.heading()); polygon(0,0,this.r,this.type); s.pop(); } } const circleIntersection = function(cir1, cir2){ let d = s.dist(cir1.center.x,cir1.center.y,cir2.center.x,cir2.center.y) if (cir1.r + cir2.r < d || d < s.abs(cir1.r - cir2.r) || d < 5) return false; // no intersection let a = (cir1.r * cir1.r - cir2.r * cir2.r + d*d) / (2 * d); let midx = cir1.center.x + (a * (cir2.center.x - cir1.center.x)) / d; let midy = cir1.center.y + (a * (cir2.center.y - cir1.center.y)) / d; let h = s.sqrt(cir1.r * cir1.r - a*a); let p1x = midx + h*(cir2.center.y - cir1.center.y ) / d; let p1y = midy - h*(cir2.center.x - cir1.center.x ) / d; let p2x = midx - h*(cir2.center.y - cir1.center.y ) / d; let p2y = midy + h*(cir2.center.x - cir1.center.x ) / d; return [s.createVector(p1x, p1y), s.createVector(p2x, p2y)]; } const polygon = function (x, y, radius, npoints) { let angle = s.PI*2 / npoints; s.beginShape(); for (let a = 0; a < s.PI*2; a += angle) { let sx = x + s.cos(a) * radius; let sy = y + s.sin(a) * radius; s.vertex(sx, sy); } s.endShape(s.CLOSE); } s.draw = function () { if (!started){ //not started //init screen s.push(); s.textFont(anuratiFont); s.textSize(40); s.fill(0); s.noStroke(); s.textAlign(s.CENTER, s.CENTER); s.text("POLYGONS", s.width/2, s.height/2); s.pop(); s.noLoop(); } else { //setting interval function lines if (!itemInterval) { itemInterval = setInterval(spawnItem,2000); for (let no = 0; no < maxCycleNo; no++) { cycles.push(new LightCycle(s.createVector(s.width/2,s.height/2),getColor(),s.createVector(s.random(-1,1),s.random(-1,1)), 3)); } things.push(new Thing(cycles[cycles.length - 1], cycles[0])); for (let i = 1; i < cycles.length; i++) { things.push(new Thing(cycles[i - 1],cycles[i])); } s.background(250); } // if (!paused){ //main //drawGrid(10); //s.background(250); //draw items (if any) if (items.length > 0) { let i = items.length - 1; while (i > -1) { if (items[i].shouldBeRemoved) { items.splice(i, 1); } i --; } items.forEach(it => { it.update(); //it.render(); }); } // //update circles if (things.length > 0) { let i = things.length - 1; while (i > -1){ if (!things[i].act) { things.splice(i, 1); } else { things[i].update(); } i--; } } // //draw cycles if (cycles.length > 0) { let i = cycles.length - 1; while (i > -1) { if (cycles[i].destroyed) { cycles.splice(i, 1); } i --; } } cycles.forEach(c => { c.update(); //c.render(); }) if (cycles.length < maxCycleNo) { newPlayerIn(); } // // for (let i = 0; i < things.length; i++) { // for (let j = i; j < things.length;j++) { // let ps = circleIntersection(things[i], things[j]); // if (!ps) continue; // let len = s.dist(ps[0].x, ps[0].y,ps[1].x,ps[1].y); // if (len < 5) continue; // s.push(); // s.noFill; // s.strokeWeight(0.5); // let temc = s.color(things[i].c); // let hue = s.hue(temc); // let sat = s.saturation(temc); // let bri = s.brightness(temc); // hue += (0.5-s.noise((things[i].count+things[j].count)/100)) * 30; // hue = (360+hue) % 360; // s.colorMode(s.HSB); // s.stroke(hue, sat, bri, s.map(len, 0, 400, 0.33, 0.1)); // s.line(ps[0].x, ps[0].y,ps[1].x,ps[1].y); // s.pop(); // } // } things.forEach(c => c.render()); // //s.noLoop(); } else { s.noLoop(); } } } s.mouseClicked = function () { if (!(s.mouseX>0&&s.mouseX0&&s.mouseY { //let tt; // for test only const AnuratiUrl = "https://static.observableusercontent.com/files/5d90d13355b0f8db98ebd049eb2ae6e1a17bba830827904420d963e08490872d7c3a6f970b60a3029c64909f6d03e330105cd6ae4e487ae0966b1b479afebb6b" let itemInterval; let started = false; let paused = false; let anuratiFont; const speedLimit = 5; const neonPink = "#FE019A"; const ribbonNearThreshold = 5; let cycles = []; let items = []; const maxCycleNo = 6; const maxItemNo = 6; const immortalTime = 3; const itemHitBox = 6; const itemScale = 1.5; const itemVisiableRange = 50; const getColor = function () { const pool = [ "#6CBDD8", "#F7DF4B", "#D8700C", "#00FDC3", "#FF352D", ]; return s.random(pool); } const objDeepEq = function (a,b){ //simple deep eq if (a === b) return true; if (a === null && b === null) return true; if ((a === null && b !== null) || (a !== null && b === null)) return false; if (typeof a != 'object' || typeof b != 'object') return false; let keysA = Object.keys(a), keysB = Object.keys(b); if (keysA.length !== keysB.length) return false; for (const key of keysA) { if (!keysB.includes(key) || !objDeepEq(a[key], b[key])) return false; } return true; } const getItemType = function () { const pool = [ "massUp", "ribbonOff", "jumpKit", "Lturn", "Uturn" ]; return s.random(pool); } const drawGrid = function (size) { s.background("#191840"); s.push(); s.stroke("#65A6CD"); s.strokeWeight(5); s.line(0,0,s.width/2 -5, 0); s.line(s.width/2 + 5, 0, s.width, 0); s.line(0,s.height,s.width/2 -5, s.height); s.line(s.width/2 + 5, s.height, s.width, s.height); s.line(0,0,0, s.height/2 -5); s.line(0, s.height/2 + 5, 0, s.height); s.line(s.width,0,s.width, s.height/2 -5); s.line(s.width, s.height/2 + 5, s.width, s.height); const strokeC = s.color("#65A6CD"); strokeC.setAlpha(100); s.stroke(strokeC); s.strokeWeight(1); for (let x = -10; x < s.width + 10; x += size){ s.line(x, -10, x, s.height + 10); } for (let y = -10; y < s.height + 10; y += size) { s.line(-10, y, s.width + 10, y); } s.pop(); } const spawnItem = function () { if (items.length < maxItemNo){ if (s.random() > 0.3) { items.push(new Item(s.random(10, s.width - 10), s.random(10, s.height - 10),getItemType())); } } } const collisionCheck = function (cycle, item) { return s.dist(cycle.loc.x, cycle.loc.y, item.x, item.y) < itemHitBox * itemScale }; const caculateDistPoint2Line = function (p, l){ let d1 = s.dist(p.x,p.y,l[0].x,l[0].y); let d2 = s.dist(p.x,p.y,l[1].x,l[1].y); return s.abs(d1+(d2-d1)/2); } const ribbonNearCheck = function (cyc, ribbon) { if (ribbon.length < 2) return false; if (objDeepEq(cyc.lightRibbon, ribbon)) return false; return mightNearCheck(cyc.loc, ribbon); } const mightNearCheck = function (point, ribbon) { if (ribbon.length < 2) return false; let rib = [...ribbon]; rib.pop(); for (let i = 1; i < rib.length; i++) { if (rib[i] != null && rib[i-1] !== null) { if (s.dist(rib[i].x, rib[i].y, rib[i-1].x, rib[i-1].y) > 500) continue; if (caculateDistPoint2Line(point, [rib[i-1], rib[i]]) < ribbonNearThreshold) return [rib[i-1], rib[i]]; } } return false; } const check2LinesIntersect = function (l1x1, l1y1, l1x2, l1y2, l2x1, l2y1, l2x2, l2y2) { if (s.dist(l2x1,l2y1,l2x2,l2y2) > 500 || s.dist(l1x1, l1y1, l1x2, l1y2) > 500) return false; //from https://stackoverflow.com/a/24392281 let det, gamma, lambda; det = (l1x2 - l1x1) * (l2y2 - l2y1) - (l2x2 - l2x1) * (l1y2 - l1y1); if (det === 0) { return false; } else { lambda = ((l2y2 - l2y1) * (l2x2 - l1x1) + (l2x1 - l2x2) * (l2y2 - l1y1)) / det; gamma = ((l1y1 - l1y2) * (l2x2 - l1x1) + (l1x2 - l1x1) * (l2y2 - l1y1)) / det; return (0 < lambda && lambda < 1) && (0 < gamma && gamma < 1); } } const checkIntersect= function (l, r){ if (r.length < 2) return false; for (let i = 1; i < r.length; i++) { if (r[i] !== null && r[i-1] !== null) { if (check2LinesIntersect(l[0].x,l[0].y,l[1].x,l[1].y,r[i].x,r[i].y,r[i-1].x,r[i-1].y)) return [r[i], r[i-1]]; } } return false; } // below over all shall be O(n); const goOverCheck = function (cyc, ribbon) { if (!cyc.lastPosition) return false; if (ribbon.length < 2) return false; let rib = [...ribbon]; if (objDeepEq(rib, cyc.lightRibbon)) rib.pop(); return checkIntersect([cyc.loc, cyc.lastPosition], rib); } const mightGoOver = function (l, ribbon) { let rib = [...ribbon]; return checkIntersect(l, rib); } // const newPlayerIn = function () { let dice = s.random([0,1,2]); switch(dice){ default: cycles.push(new LightCycle(s.createVector(s.random(s.width/2 - 5, s.width/2 + 5), 7), getColor(), s.createVector(s.random(-0.5,0.5),s.random(0.6, 1)), 1)); break; case 0: cycles.push(new LightCycle(s.createVector(s.random(s.width/2 - 5, s.width/2 + 5), s.height - 7), getColor(), s.createVector(s.random(-0.5,0.5),s.random(-1, -0.6)), 1)); break; case 1: cycles.push(new LightCycle(s.createVector(7, s.random(s.height/2 - 5, s.height/2 + 5)), getColor(), s.createVector(s.random(0.6, 1),s.random(-0.5, 0.5)), 1)); break; case 2: cycles.push(new LightCycle(s.createVector(s.width - 7, s.random(s.height/2 - 5, s.height/2 + 5)), getColor(), s.createVector(s.random(-1, -0.6),s.random(-0.5, 0.5)), 1)); break; } things.push(new Thing(cycles[cycles.length - 1],cycles[0])); things.push(new Thing(cycles[cycles.length - 2],cycles[cycles.length - 1])); } class LightCycle{ constructor(loc,c,v,imm){ this.loc = loc; this.c = c; this.m = 2; this.mChangedCount = 0; this.hasJumpKit = 0; this.lightRibbonOn = true; this.lightRibbonOffCount = 0; this.v = v; this.acc = s.createVector(0,0); this.lightRibbon = []; this.immortal = true; this.immortalTime = imm; this.immortalCount = 0; this.destroyed = false; this.lastPosition = null; } render(){ //destroyed animation (only one frame ... lol) if (this.destroyed){ //boom s.push(); s.translate(this.loc.x, this.loc.y); s.rotate(s.random(-s.PI, s.PI)); s.noFill(); s.stroke(this.c); s.strokeWeight(3); s.beginShape(); for (let i = 0; i < 10; i++) { let di; di = s.random(6,10); if (i % 2 === 0) di = s.random(2,5); let r = (s.PI/5 * i) + s.random(-0.1, 0.1); s.vertex(di*s.cos(r), di*s.sin(r)); } s.endShape(s.CLOSE); s.pop(); return; } // // jumpKit if (this.hasJumpKit){ s.push(); s.stroke(255); s.noFill(); s.strokeWeight(0.8); s.translate(this.loc.x, this.loc.y); s.rotate(s.frameCount/10); for (let i = 0; i < 2*s.PI; i += s.PI/2){ s.arc(0,0,15,15,i, i + s.PI/4); } s.pop(); } // //light ribbon for (let i = 1; i < this.lightRibbon.length; i ++) { s.push(); let temC = s.color(this.c); temC.setAlpha(i < 50? s.map(i,0,49,50,255): 255); s.stroke(temC); s.noFill(); s.strokeWeight( i < 4 ? s.map(i, 0, 3, 0.5, 2.5) : 2.5); if (this.lightRibbon[i] != null && this.lightRibbon[i-1] != null) { if (s.dist(this.lightRibbon[i-1].x, this.lightRibbon[i-1].y,this.lightRibbon[i].x,this.lightRibbon[i].y) < 500){ s.line(this.lightRibbon[i-1].x, this.lightRibbon[i-1].y,this.lightRibbon[i].x,this.lightRibbon[i].y); } } s.pop(); } //the vehicle s.push(); s.fill(0); if (this.immortal) { if (this.immortalCount % s.frameRate()/4 > s.frameRate() / 8) { let temC = s.color(this.c); temC.setAlpha(150); s.stroke(temC) } else { s.stroke(this.c) } } else { s.stroke(this.c); } s.translate(this.loc.x, this.loc.y); s.rotate(this.getDirection()); //wheel 1 s.beginShape(); s.vertex(1.5, -1); s.vertex(1.5, -5); s.curveVertex(1.5,-5); s.curveVertex(1.5,-7); s.curveVertex(-1.5, -7); s.curveVertex(-1.5,-5); s.vertex(-1.5,-5); s.vertex(-1.5,-1); s.curveVertex(-1.5,-1); s.curveVertex(-1.5, 1); s.curveVertex(1.5,1); s.curveVertex(1.5,-1); s.endShape(s.CLOSE); //wheel 2 s.beginShape(); s.vertex(1.5, 1); s.vertex(1.5, 5); s.curveVertex(1.5,5); s.curveVertex(1.5,7); s.curveVertex(-1.5,7); s.curveVertex(-1.5,5); s.vertex(-1.5,5); s.vertex(-1.5,1); s.curveVertex(-1.5,1); s.curveVertex(-1.5,-1); s.curveVertex(1.5,-1); s.curveVertex(1.5,1); s.endShape(s.CLOSE); s.pop(); } update(){ //check immortal state this.immortalCount ++; if (this.immortal && this.immortalCount > this.immortalTime * s.frameRate()) this.immortal = false; // //check if distroyed if (!this.immortal) { for (const cyc of cycles) { if (ribbonNearCheck(this, cyc.lightRibbon) || goOverCheck(this, cyc.lightRibbon)){ if (this.hasJumpKit > 0){ this.hasJumpKit --; } else { this.destroyed = true; } break; } } if (this.loc.x < -1 || this.loc.x > s.width + 1 || this.loc.y < -1|| this.loc.y > s.height + 1) { this.destroyed = true; } } // if (!this.destroyed) { //check other states (m, ribbon state, etc) if (this.m > 2) { if (this.mChangedCount > s.frameRate() * 7) { this.m = 2; this.mChangedCount = 0; } else { this.mChangedCount ++; } } if (!this.lightRibbonOn) { if (this.lightRibbonOffCount > s.frameRate() * 5){ this.lightRibbonOn = true; this.lightRibbonOffCount = 0; } else { this.lightRibbonOffCount ++; } } // //check "food" for (const it of items) { if (collisionCheck(this, it)) { switch(it.type) { default: break; case "massUp": this.m *= 2; this.v.x = this.v.x/2; this.v.y = this.v.y/2; break; case "jumpKit": this.hasJumpKit = 3; break; case "ribbonOff": this.lightRibbonOn = false; break; case "Lturn": let tem = this.v.x; this.v.x = this.v.y; this.v.y = tem; break; case "Uturn": this.v.x = -this.v.x; this.v.y = -this.v.y; break; } it.shouldBeRemoved = true; break; } } // this.move(); } } move(){ this.caculateSpeed(); if (this.v.magSq() > 0) { if (!this.immortal){ if (this.lightRibbonOn) { this.lightRibbon.push(s.createVector(this.loc.x, this.loc.y)); } else { this.lightRibbon.push(null); } } if (this.lightRibbon.length > 100) this.lightRibbon.shift(); this.lastPosition = s.createVector(this.loc.x, this.loc.y); } this.loc.add(this.v); } caculateSpeed(){ this.caculateAcc(); this.v.x += this.acc.x; this.v.y += this.acc.y; //speed limit this.v.x = s.constrain(this.v.x, -speedLimit, speedLimit); this.v.y = s.constrain(this.v.y, -speedLimit, speedLimit); } caculateAcc(){ let forceX = 0; let forceY = 0; //random walk forceX += s.random(-1,1); forceY += s.random(-1,1); // let nextPosible = s.createVector(this.loc.x + this.v.x, this.loc.y + this.v.y); //prevent hit if (!this.hasJumpKit){ //the cycle is not afraid with jumpKit for (const cyc of cycles) { let nearSeg = mightNearCheck(nextPosible, cyc.lightRibbon); let intersectSeg = mightGoOver([nextPosible, this.loc], cyc.lightRibbon); if (nearSeg || intersectSeg) { //try to avoid let dir; if (nearSeg) { let temVec1 = s.createVector(nearSeg[0].x - nearSeg[1].x, nearSeg[0].y - nearSeg[1].y); let temVec2 = s.createVector(nearSeg[1].x - nearSeg[0].x, nearSeg[1].y - nearSeg[0].y); let ang1 = temVec1.angleBetween(this.v); let ang2 = temVec2.angleBetween(this.v); let determin = (s.abs(ang1) > s.abs(ang2) ? ang1 : ang2); if (determin < 0) { dir = - s.PI/2; } else { dir = s.PI/2; } } if (intersectSeg) { let temVec1 = s.createVector(intersectSeg[0].x - intersectSeg[1].x, intersectSeg[0].y - intersectSeg[1].y); let temVec2 = s.createVector(intersectSeg[1].x - intersectSeg[0].x, intersectSeg[1].y - intersectSeg[0].y); let ang1 = temVec1.angleBetween(this.v); let ang2 = temVec2.angleBetween(this.v); let determin = (s.abs(ang1) > s.abs(ang2) ? ang1 : ang2); if (determin < 0) { dir = - s.PI/2; } else { dir = s.PI/2; } } let turnForce = s.createVector(this.v.x, this.v.y); turnForce.normalize(); turnForce.rotate(dir + s.random(-s.PI/8, s.PI/8)); // around 90 degree turn let para = s.random(5,7); forceX += turnForce.x * para; forceY += turnForce.y * para; // } } } // // hit wall let dir = undefined; if (nextPosible.x < 0) dir = (this.v.heading() < 0) ? s.PI/2 : -s.PI/2; if (nextPosible.x > s.width) dir = (this.v.heading() > 0) ? s.PI/2 : -s.PI/2; if (nextPosible.y < 0) dir = (this.v.heading() > -s.PI/2) ? s.PI/2 : -s.PI/2; if (nextPosible.y > s.height ) dir = (this.v.heading() > s.PI/2) ? s.PI/2 : -s.PI/2; if (dir) { let turnForce = s.createVector(this.v.x, this.v.y); turnForce.normalize(); turnForce.rotate(dir + s.random(-s.PI/8, s.PI/8)); // around 90 degree turn let para = s.random(5,10); forceX += turnForce.x * para; forceY += turnForce.y * para; } // // items hunt for (const it of items) { if (s.dist(it.x, it.y, this.loc.x, this.loc.y) < itemVisiableRange) { if (it.type === "jumpKit") { let para = s.random(0.3,1.5); let vec = s.createVector(it.x - this.loc.x, it.y - this.loc.y); vec.normalize(); forceX += vec.x * para; forceY += vec.y * para; } else if (it.type === "Lturn" || it.type === "Uturn") { let para = s.random(0.2,0.6); let vec = s.createVector(it.x - this.loc.x, it.y - this.loc.y); vec.normalize(); forceX += vec.x * para; forceY += vec.y * para; } else { let para = s.random(0.2,0.5); let vec = s.createVector(this.loc.x - it.x, this.loc.y - it.y); vec.normalize(); forceX += vec.x * para; forceY += vec.y * para; } //break; // multi-tasking? } } // //force to acc this.acc.x = forceX/this.m; this.acc.y = forceY/this.m; } getDirection(){ return this.v.heading() + s.PI/2; } } class Item { constructor(x,y,type){ this.x = x; this.y = y; this.type = type; //this.v = s.createVector(0,0); //this.acc = s.createVector(0,0); this.lifeSpan = s.floor(s.random(15, 20)) * s.frameRate(); this.lifeCount = 0; this.shouldBeRemoved = false; this.m = s.floor(s.random(2000, 5000)); } update(){ this.lifeCount ++; if (this.lifeCount > this.lifeSpan) this.shouldBeRemoved = true; this.x += (0.5 - s.noise(this.lifeCount/1000 + this.lifeSpan)) / 2; this.y += (0.5 - s.noise(this.lifeCount/1000 + this.lifeSpan*2)) / 2; this.x = s.constrain(this.x, 5, s.width - 5); this.y = s.constrain(this.y, 5, s.height - 5); } render(){ switch(this.type) { default: break; case "massUp": s.push(); s.translate(this.x, this.y); s.scale(itemScale); s.rotate(this.lifeCount/20); s.noFill(); s.strokeWeight(0.5); s.stroke(neonPink); s.push(); for (let i = 0; i < 4; i ++) { s.triangle(0, -2, 1, -5, -1, -5); s.rotate(s.PI/2); } s.pop(); s.pop(); break; case "ribbonOff": s.push(); s.translate(this.x, this.y); s.scale(itemScale); s.rotate(this.lifeCount/20 + s.PI/4); s.noFill(); s.strokeWeight(0.5); s.stroke(neonPink); s.push(); for (let i = 0; i < 10; i ++) { s.ellipse(2, -2, 3, 3); s.rotate(s.PI/5); } s.pop(); s.pop(); break; case "jumpKit": s.push(); s.translate(this.x, this.y); s.scale(itemScale); s.rotate(this.lifeCount/20 + s.PI/2); s.noFill(); s.strokeWeight(0.5); s.stroke(neonPink); s.push(); for (let i = 0; i < 6; i ++) { s.rect(0, 0, 5, 5); s.rotate(s.PI/3); } s.pop(); s.pop(); break; case "Lturn": s.push(); s.translate(this.x, this.y); s.scale(itemScale); s.rotate(this.lifeCount/20 + s.PI * 3 / 4); s.noFill(); s.stroke(255); s.strokeWeight(0.5); s.textAlign(s.CENTER, s.CENTER); s.textSize(10); s.text("L",0,0); s.pop(); break; case "Uturn": s.push(); s.translate(this.x, this.y); s.scale(itemScale); s.rotate(this.lifeCount/20 + s.PI); s.noFill(); s.stroke(255); s.strokeWeight(0.5); s.textAlign(s.CENTER, s.CENTER); s.textSize(10); s.text("U",0,0); s.pop(); break; } } } s.preload = function () { anuratiFont = s.loadFont(AnuratiUrl); //a by type designer Emmeran Richard. //https://www.behance.net/gallery/33704618/ANURATI-Free-font } s.setup = function () { s.createCanvas(650,650); s.background(250); s.frameRate(30); if (itemInterval) { clearInterval(itemInterval); itemInterval = undefined; } } let things = []; const getThingC = function(){ let pool = [ "#308b95","#1e647a","#ca635f","#e9c67f","#484646" ]; return s.random(pool); } class Thing{ constructor(p1, p2){ this.p1 = p1; this.p2 = p2; this.c = getThingC(); this.act = true; this.center = s.createVector((this.p1.loc.x + this.p2.loc.x)/2, (this.p1.loc.y + this.p2.loc.y)/2); this.r = s.dist(this.p1.loc.x, this.p1.loc.y, this.p2.loc.x, this.p2.loc.y)/2; this.count = 0; this.gapUp = s.random(0.05,0.2); this.gapDown = s.random(0.05,0.2); this.noiseStart1 = s.floor(s.random(40,10000)); this.noiseStart2 = s.floor(s.random(40,10000)); this.cp1 = s.random([-1,1]); } update(){ if (!this.p1 || !this.p2 || this.p1.destroyed || this.p2.destroyed) { this.act = false; } this.center = s.createVector((this.p1.loc.x + this.p2.loc.x)/2, (this.p1.loc.y + this.p2.loc.y)/2); this.r = s.dist(this.p1.loc.x, this.p1.loc.y, this.p2.loc.x, this.p2.loc.y)/2; this.count ++; this.gapUp += s.random(-0.001, 0.001); this.gapDown += s.random(-0.001, 0.001); this.gapUp = s.constrain(this.gapUp, 0.05, 0.2); this.gapDown = s.constrain(this.gapDown, 0.05, 0.2); } render(){ s.push(); s.noFill(); s.strokeWeight(0.5); let temc = s.color(this.c); //temc.setAlpha(s.map(this.r, 0, 400, 100, 20)); //s.stroke(temc); let hue = s.hue(temc); let sat = s.saturation(temc); let bri = s.brightness(temc); hue += (0.5 - s.noise(this.count / 100 + 40)) * 30; hue = (360 + hue)%360; s.colorMode(s.HSB); s.stroke(hue, sat, bri, s.map(this.r, 0, 400, 0.33, 0)); s.translate(this.center.x, this.center.y); let d = s.createVector(this.p1.loc.x - this.p2.loc.x, this.p1.loc.y - this.p2.loc.y); s.rotate(d.heading()); let cupx = s.noise(this.count/100 + this.noiseStart1) * this.r * 2 - this.r; let cdownx = s.noise(this.count/100 + this.noiseStart2) * this.r * 2 - this.r; s.bezier(-this.r, 0, cupx , - this.gapUp* 2 * this.r * this.cp1, cdownx, this.gapDown * 2 * this.r * this.cp1, this.r, 0); s.pop(); } } const circleIntersection = function(cir1, cir2){ let d = s.dist(cir1.center.x,cir1.center.y,cir2.center.x,cir2.center.y) if (cir1.r + cir2.r < d || d < s.abs(cir1.r - cir2.r) || d < 5) return false; // no intersection let a = (cir1.r * cir1.r - cir2.r * cir2.r + d*d) / (2 * d); let midx = cir1.center.x + (a * (cir2.center.x - cir1.center.x)) / d; let midy = cir1.center.y + (a * (cir2.center.y - cir1.center.y)) / d; let h = s.sqrt(cir1.r * cir1.r - a*a); let p1x = midx + h*(cir2.center.y - cir1.center.y ) / d; let p1y = midy - h*(cir2.center.x - cir1.center.x ) / d; let p2x = midx - h*(cir2.center.y - cir1.center.y ) / d; let p2y = midy + h*(cir2.center.x - cir1.center.x ) / d; return [s.createVector(p1x, p1y), s.createVector(p2x, p2y)]; } const polygon = function (x, y, radius, npoints) { let angle = s.PI*2 / npoints; s.beginShape(); for (let a = 0; a < s.PI*2; a += angle) { let sx = x + s.cos(a) * radius; let sy = y + s.sin(a) * radius; s.vertex(sx, sy); } s.endShape(s.CLOSE); } s.draw = function () { if (!started){ //not started //init screen s.push(); s.textFont(anuratiFont); s.textSize(40); s.fill(0); s.noStroke(); s.textAlign(s.CENTER, s.CENTER); s.text("BEZIER", s.width/2, s.height/2); s.pop(); s.noLoop(); } else { //setting interval function lines if (!itemInterval) { itemInterval = setInterval(spawnItem,2000); for (let no = 0; no < maxCycleNo; no++) { cycles.push(new LightCycle(s.createVector(s.width/2,s.height/2),getColor(),s.createVector(s.random(-1,1),s.random(-1,1)), 3)); } things.push(new Thing(cycles[cycles.length - 1], cycles[0])); for (let i = 1; i < cycles.length; i++) { things.push(new Thing(cycles[i - 1],cycles[i])); } s.background(250); } // if (!paused){ //main //drawGrid(10); //s.background(250); //draw items (if any) if (items.length > 0) { let i = items.length - 1; while (i > -1) { if (items[i].shouldBeRemoved) { items.splice(i, 1); } i --; } items.forEach(it => { it.update(); //it.render(); }); } // //update circles if (things.length > 0) { let i = things.length - 1; while (i > -1){ if (!things[i].act) { things.splice(i, 1); } else { things[i].update(); } i--; } } // //draw cycles if (cycles.length > 0) { let i = cycles.length - 1; while (i > -1) { if (cycles[i].destroyed) { cycles.splice(i, 1); } i --; } } cycles.forEach(c => { c.update(); //c.render(); }) if (cycles.length < maxCycleNo) { newPlayerIn(); } // // for (let i = 0; i < things.length; i++) { // for (let j = i; j < things.length;j++) { // let ps = circleIntersection(things[i], things[j]); // if (!ps) continue; // let len = s.dist(ps[0].x, ps[0].y,ps[1].x,ps[1].y); // if (len < 5) continue; // s.push(); // s.noFill; // s.strokeWeight(0.5); // let temc = s.color(things[i].c); // let hue = s.hue(temc); // let sat = s.saturation(temc); // let bri = s.brightness(temc); // hue += (0.5-s.noise((things[i].count+things[j].count)/100)) * 30; // hue = (360+hue) % 360; // s.colorMode(s.HSB); // s.stroke(hue, sat, bri, s.map(len, 0, 400, 0.33, 0.1)); // s.line(ps[0].x, ps[0].y,ps[1].x,ps[1].y); // s.pop(); // } // } things.forEach(c => c.render()); // //s.noLoop(); } else { s.noLoop(); } } } s.mouseClicked = function () { if (!(s.mouseX>0&&s.mouseX0&&s.mouseY { //let tt; // for test only const AnuratiUrl = "https://static.observableusercontent.com/files/5d90d13355b0f8db98ebd049eb2ae6e1a17bba830827904420d963e08490872d7c3a6f970b60a3029c64909f6d03e330105cd6ae4e487ae0966b1b479afebb6b" let itemInterval; let started = false; let paused = false; let anuratiFont; const speedLimit = 5; const neonPink = "#FE019A"; const ribbonNearThreshold = 5; let cycles = []; let items = []; const maxCycleNo = 6; const maxItemNo = 6; const immortalTime = 3; const itemHitBox = 6; const itemScale = 1.5; const itemVisiableRange = 50; const getColor = function () { const pool = [ "#6CBDD8", "#F7DF4B", "#D8700C", "#00FDC3", "#FF352D", ]; return s.random(pool); } const objDeepEq = function (a,b){ //simple deep eq if (a === b) return true; if (a === null && b === null) return true; if ((a === null && b !== null) || (a !== null && b === null)) return false; if (typeof a != 'object' || typeof b != 'object') return false; let keysA = Object.keys(a), keysB = Object.keys(b); if (keysA.length !== keysB.length) return false; for (const key of keysA) { if (!keysB.includes(key) || !objDeepEq(a[key], b[key])) return false; } return true; } const getItemType = function () { const pool = [ "massUp", "ribbonOff", "jumpKit", "Lturn", "Uturn" ]; return s.random(pool); } const drawGrid = function (size) { s.background("#191840"); s.push(); s.stroke("#65A6CD"); s.strokeWeight(5); s.line(0,0,s.width/2 -5, 0); s.line(s.width/2 + 5, 0, s.width, 0); s.line(0,s.height,s.width/2 -5, s.height); s.line(s.width/2 + 5, s.height, s.width, s.height); s.line(0,0,0, s.height/2 -5); s.line(0, s.height/2 + 5, 0, s.height); s.line(s.width,0,s.width, s.height/2 -5); s.line(s.width, s.height/2 + 5, s.width, s.height); const strokeC = s.color("#65A6CD"); strokeC.setAlpha(100); s.stroke(strokeC); s.strokeWeight(1); for (let x = -10; x < s.width + 10; x += size){ s.line(x, -10, x, s.height + 10); } for (let y = -10; y < s.height + 10; y += size) { s.line(-10, y, s.width + 10, y); } s.pop(); } const spawnItem = function () { if (items.length < maxItemNo){ if (s.random() > 0.3) { items.push(new Item(s.random(10, s.width - 10), s.random(10, s.height - 10),getItemType())); } } } const collisionCheck = function (cycle, item) { return s.dist(cycle.loc.x, cycle.loc.y, item.x, item.y) < itemHitBox * itemScale }; const caculateDistPoint2Line = function (p, l){ let d1 = s.dist(p.x,p.y,l[0].x,l[0].y); let d2 = s.dist(p.x,p.y,l[1].x,l[1].y); return s.abs(d1+(d2-d1)/2); } const ribbonNearCheck = function (cyc, ribbon) { if (ribbon.length < 2) return false; if (objDeepEq(cyc.lightRibbon, ribbon)) return false; return mightNearCheck(cyc.loc, ribbon); } const mightNearCheck = function (point, ribbon) { if (ribbon.length < 2) return false; let rib = [...ribbon]; rib.pop(); for (let i = 1; i < rib.length; i++) { if (rib[i] != null && rib[i-1] !== null) { if (s.dist(rib[i].x, rib[i].y, rib[i-1].x, rib[i-1].y) > 500) continue; if (caculateDistPoint2Line(point, [rib[i-1], rib[i]]) < ribbonNearThreshold) return [rib[i-1], rib[i]]; } } return false; } const check2LinesIntersect = function (l1x1, l1y1, l1x2, l1y2, l2x1, l2y1, l2x2, l2y2) { if (s.dist(l2x1,l2y1,l2x2,l2y2) > 500 || s.dist(l1x1, l1y1, l1x2, l1y2) > 500) return false; //from https://stackoverflow.com/a/24392281 let det, gamma, lambda; det = (l1x2 - l1x1) * (l2y2 - l2y1) - (l2x2 - l2x1) * (l1y2 - l1y1); if (det === 0) { return false; } else { lambda = ((l2y2 - l2y1) * (l2x2 - l1x1) + (l2x1 - l2x2) * (l2y2 - l1y1)) / det; gamma = ((l1y1 - l1y2) * (l2x2 - l1x1) + (l1x2 - l1x1) * (l2y2 - l1y1)) / det; return (0 < lambda && lambda < 1) && (0 < gamma && gamma < 1); } } const checkIntersect= function (l, r){ if (r.length < 2) return false; for (let i = 1; i < r.length; i++) { if (r[i] !== null && r[i-1] !== null) { if (check2LinesIntersect(l[0].x,l[0].y,l[1].x,l[1].y,r[i].x,r[i].y,r[i-1].x,r[i-1].y)) return [r[i], r[i-1]]; } } return false; } // below over all shall be O(n); const goOverCheck = function (cyc, ribbon) { if (!cyc.lastPosition) return false; if (ribbon.length < 2) return false; let rib = [...ribbon]; if (objDeepEq(rib, cyc.lightRibbon)) rib.pop(); return checkIntersect([cyc.loc, cyc.lastPosition], rib); } const mightGoOver = function (l, ribbon) { let rib = [...ribbon]; return checkIntersect(l, rib); } // const newPlayerIn = function () { let dice = s.random([0,1,2]); switch(dice){ default: cycles.push(new LightCycle(s.createVector(s.random(s.width/2 - 5, s.width/2 + 5), 7), getColor(), s.createVector(s.random(-0.5,0.5),s.random(0.6, 1)), 1)); break; case 0: cycles.push(new LightCycle(s.createVector(s.random(s.width/2 - 5, s.width/2 + 5), s.height - 7), getColor(), s.createVector(s.random(-0.5,0.5),s.random(-1, -0.6)), 1)); break; case 1: cycles.push(new LightCycle(s.createVector(7, s.random(s.height/2 - 5, s.height/2 + 5)), getColor(), s.createVector(s.random(0.6, 1),s.random(-0.5, 0.5)), 1)); break; case 2: cycles.push(new LightCycle(s.createVector(s.width - 7, s.random(s.height/2 - 5, s.height/2 + 5)), getColor(), s.createVector(s.random(-1, -0.6),s.random(-0.5, 0.5)), 1)); break; } things.push(new Thing(cycles[cycles.length - 1],cycles[0])); things.push(new Thing(cycles[cycles.length - 2],cycles[cycles.length - 1])); } class LightCycle{ constructor(loc,c,v,imm){ this.loc = loc; this.c = c; this.m = 2; this.mChangedCount = 0; this.hasJumpKit = 0; this.lightRibbonOn = true; this.lightRibbonOffCount = 0; this.v = v; this.acc = s.createVector(0,0); this.lightRibbon = []; this.immortal = true; this.immortalTime = imm; this.immortalCount = 0; this.destroyed = false; this.lastPosition = null; } render(){ //destroyed animation (only one frame ... lol) if (this.destroyed){ //boom s.push(); s.translate(this.loc.x, this.loc.y); s.rotate(s.random(-s.PI, s.PI)); s.noFill(); s.stroke(this.c); s.strokeWeight(3); s.beginShape(); for (let i = 0; i < 10; i++) { let di; di = s.random(6,10); if (i % 2 === 0) di = s.random(2,5); let r = (s.PI/5 * i) + s.random(-0.1, 0.1); s.vertex(di*s.cos(r), di*s.sin(r)); } s.endShape(s.CLOSE); s.pop(); return; } // // jumpKit if (this.hasJumpKit){ s.push(); s.stroke(255); s.noFill(); s.strokeWeight(0.8); s.translate(this.loc.x, this.loc.y); s.rotate(s.frameCount/10); for (let i = 0; i < 2*s.PI; i += s.PI/2){ s.arc(0,0,15,15,i, i + s.PI/4); } s.pop(); } // //light ribbon for (let i = 1; i < this.lightRibbon.length; i ++) { s.push(); let temC = s.color(this.c); temC.setAlpha(i < 50? s.map(i,0,49,50,255): 255); s.stroke(temC); s.noFill(); s.strokeWeight( i < 4 ? s.map(i, 0, 3, 0.5, 2.5) : 2.5); if (this.lightRibbon[i] != null && this.lightRibbon[i-1] != null) { if (s.dist(this.lightRibbon[i-1].x, this.lightRibbon[i-1].y,this.lightRibbon[i].x,this.lightRibbon[i].y) < 500){ s.line(this.lightRibbon[i-1].x, this.lightRibbon[i-1].y,this.lightRibbon[i].x,this.lightRibbon[i].y); } } s.pop(); } //the vehicle s.push(); s.fill(0); if (this.immortal) { if (this.immortalCount % s.frameRate()/4 > s.frameRate() / 8) { let temC = s.color(this.c); temC.setAlpha(150); s.stroke(temC) } else { s.stroke(this.c) } } else { s.stroke(this.c); } s.translate(this.loc.x, this.loc.y); s.rotate(this.getDirection()); //wheel 1 s.beginShape(); s.vertex(1.5, -1); s.vertex(1.5, -5); s.curveVertex(1.5,-5); s.curveVertex(1.5,-7); s.curveVertex(-1.5, -7); s.curveVertex(-1.5,-5); s.vertex(-1.5,-5); s.vertex(-1.5,-1); s.curveVertex(-1.5,-1); s.curveVertex(-1.5, 1); s.curveVertex(1.5,1); s.curveVertex(1.5,-1); s.endShape(s.CLOSE); //wheel 2 s.beginShape(); s.vertex(1.5, 1); s.vertex(1.5, 5); s.curveVertex(1.5,5); s.curveVertex(1.5,7); s.curveVertex(-1.5,7); s.curveVertex(-1.5,5); s.vertex(-1.5,5); s.vertex(-1.5,1); s.curveVertex(-1.5,1); s.curveVertex(-1.5,-1); s.curveVertex(1.5,-1); s.curveVertex(1.5,1); s.endShape(s.CLOSE); s.pop(); } update(){ //check immortal state this.immortalCount ++; if (this.immortal && this.immortalCount > this.immortalTime * s.frameRate()) this.immortal = false; // //check if distroyed if (!this.immortal) { for (const cyc of cycles) { if (ribbonNearCheck(this, cyc.lightRibbon) || goOverCheck(this, cyc.lightRibbon)){ if (this.hasJumpKit > 0){ this.hasJumpKit --; } else { this.destroyed = true; } break; } } if (this.loc.x < -1 || this.loc.x > s.width + 1 || this.loc.y < -1|| this.loc.y > s.height + 1) { this.destroyed = true; } } // if (!this.destroyed) { //check other states (m, ribbon state, etc) if (this.m > 2) { if (this.mChangedCount > s.frameRate() * 7) { this.m = 2; this.mChangedCount = 0; } else { this.mChangedCount ++; } } if (!this.lightRibbonOn) { if (this.lightRibbonOffCount > s.frameRate() * 5){ this.lightRibbonOn = true; this.lightRibbonOffCount = 0; } else { this.lightRibbonOffCount ++; } } // //check "food" for (const it of items) { if (collisionCheck(this, it)) { switch(it.type) { default: break; case "massUp": this.m *= 2; this.v.x = this.v.x/2; this.v.y = this.v.y/2; break; case "jumpKit": this.hasJumpKit = 3; break; case "ribbonOff": this.lightRibbonOn = false; break; case "Lturn": let tem = this.v.x; this.v.x = this.v.y; this.v.y = tem; break; case "Uturn": this.v.x = -this.v.x; this.v.y = -this.v.y; break; } it.shouldBeRemoved = true; break; } } // this.move(); } } move(){ this.caculateSpeed(); if (this.v.magSq() > 0) { if (!this.immortal){ if (this.lightRibbonOn) { this.lightRibbon.push(s.createVector(this.loc.x, this.loc.y)); } else { this.lightRibbon.push(null); } } if (this.lightRibbon.length > 100) this.lightRibbon.shift(); this.lastPosition = s.createVector(this.loc.x, this.loc.y); } this.loc.add(this.v); } caculateSpeed(){ this.caculateAcc(); this.v.x += this.acc.x; this.v.y += this.acc.y; //speed limit this.v.x = s.constrain(this.v.x, -speedLimit, speedLimit); this.v.y = s.constrain(this.v.y, -speedLimit, speedLimit); } caculateAcc(){ let forceX = 0; let forceY = 0; //random walk forceX += s.random(-1,1); forceY += s.random(-1,1); // let nextPosible = s.createVector(this.loc.x + this.v.x, this.loc.y + this.v.y); //prevent hit if (!this.hasJumpKit){ //the cycle is not afraid with jumpKit for (const cyc of cycles) { let nearSeg = mightNearCheck(nextPosible, cyc.lightRibbon); let intersectSeg = mightGoOver([nextPosible, this.loc], cyc.lightRibbon); if (nearSeg || intersectSeg) { //try to avoid let dir; if (nearSeg) { let temVec1 = s.createVector(nearSeg[0].x - nearSeg[1].x, nearSeg[0].y - nearSeg[1].y); let temVec2 = s.createVector(nearSeg[1].x - nearSeg[0].x, nearSeg[1].y - nearSeg[0].y); let ang1 = temVec1.angleBetween(this.v); let ang2 = temVec2.angleBetween(this.v); let determin = (s.abs(ang1) > s.abs(ang2) ? ang1 : ang2); if (determin < 0) { dir = - s.PI/2; } else { dir = s.PI/2; } } if (intersectSeg) { let temVec1 = s.createVector(intersectSeg[0].x - intersectSeg[1].x, intersectSeg[0].y - intersectSeg[1].y); let temVec2 = s.createVector(intersectSeg[1].x - intersectSeg[0].x, intersectSeg[1].y - intersectSeg[0].y); let ang1 = temVec1.angleBetween(this.v); let ang2 = temVec2.angleBetween(this.v); let determin = (s.abs(ang1) > s.abs(ang2) ? ang1 : ang2); if (determin < 0) { dir = - s.PI/2; } else { dir = s.PI/2; } } let turnForce = s.createVector(this.v.x, this.v.y); turnForce.normalize(); turnForce.rotate(dir + s.random(-s.PI/8, s.PI/8)); // around 90 degree turn let para = s.random(5,7); forceX += turnForce.x * para; forceY += turnForce.y * para; // } } } // // hit wall let dir = undefined; if (nextPosible.x < 0) dir = (this.v.heading() < 0) ? s.PI/2 : -s.PI/2; if (nextPosible.x > s.width) dir = (this.v.heading() > 0) ? s.PI/2 : -s.PI/2; if (nextPosible.y < 0) dir = (this.v.heading() > -s.PI/2) ? s.PI/2 : -s.PI/2; if (nextPosible.y > s.height ) dir = (this.v.heading() > s.PI/2) ? s.PI/2 : -s.PI/2; if (dir) { let turnForce = s.createVector(this.v.x, this.v.y); turnForce.normalize(); turnForce.rotate(dir + s.random(-s.PI/8, s.PI/8)); // around 90 degree turn let para = s.random(5,10); forceX += turnForce.x * para; forceY += turnForce.y * para; } // // items hunt for (const it of items) { if (s.dist(it.x, it.y, this.loc.x, this.loc.y) < itemVisiableRange) { if (it.type === "jumpKit") { let para = s.random(0.3,1.5); let vec = s.createVector(it.x - this.loc.x, it.y - this.loc.y); vec.normalize(); forceX += vec.x * para; forceY += vec.y * para; } else if (it.type === "Lturn" || it.type === "Uturn") { let para = s.random(0.2,0.6); let vec = s.createVector(it.x - this.loc.x, it.y - this.loc.y); vec.normalize(); forceX += vec.x * para; forceY += vec.y * para; } else { let para = s.random(0.2,0.5); let vec = s.createVector(this.loc.x - it.x, this.loc.y - it.y); vec.normalize(); forceX += vec.x * para; forceY += vec.y * para; } //break; // multi-tasking? } } // //force to acc this.acc.x = forceX/this.m; this.acc.y = forceY/this.m; } getDirection(){ return this.v.heading() + s.PI/2; } } class Item { constructor(x,y,type){ this.x = x; this.y = y; this.type = type; //this.v = s.createVector(0,0); //this.acc = s.createVector(0,0); this.lifeSpan = s.floor(s.random(15, 20)) * s.frameRate(); this.lifeCount = 0; this.shouldBeRemoved = false; this.m = s.floor(s.random(2000, 5000)); } update(){ this.lifeCount ++; if (this.lifeCount > this.lifeSpan) this.shouldBeRemoved = true; this.x += (0.5 - s.noise(this.lifeCount/1000 + this.lifeSpan)) / 2; this.y += (0.5 - s.noise(this.lifeCount/1000 + this.lifeSpan*2)) / 2; this.x = s.constrain(this.x, 5, s.width - 5); this.y = s.constrain(this.y, 5, s.height - 5); } render(){ switch(this.type) { default: break; case "massUp": s.push(); s.translate(this.x, this.y); s.scale(itemScale); s.rotate(this.lifeCount/20); s.noFill(); s.strokeWeight(0.5); s.stroke(neonPink); s.push(); for (let i = 0; i < 4; i ++) { s.triangle(0, -2, 1, -5, -1, -5); s.rotate(s.PI/2); } s.pop(); s.pop(); break; case "ribbonOff": s.push(); s.translate(this.x, this.y); s.scale(itemScale); s.rotate(this.lifeCount/20 + s.PI/4); s.noFill(); s.strokeWeight(0.5); s.stroke(neonPink); s.push(); for (let i = 0; i < 10; i ++) { s.ellipse(2, -2, 3, 3); s.rotate(s.PI/5); } s.pop(); s.pop(); break; case "jumpKit": s.push(); s.translate(this.x, this.y); s.scale(itemScale); s.rotate(this.lifeCount/20 + s.PI/2); s.noFill(); s.strokeWeight(0.5); s.stroke(neonPink); s.push(); for (let i = 0; i < 6; i ++) { s.rect(0, 0, 5, 5); s.rotate(s.PI/3); } s.pop(); s.pop(); break; case "Lturn": s.push(); s.translate(this.x, this.y); s.scale(itemScale); s.rotate(this.lifeCount/20 + s.PI * 3 / 4); s.noFill(); s.stroke(255); s.strokeWeight(0.5); s.textAlign(s.CENTER, s.CENTER); s.textSize(10); s.text("L",0,0); s.pop(); break; case "Uturn": s.push(); s.translate(this.x, this.y); s.scale(itemScale); s.rotate(this.lifeCount/20 + s.PI); s.noFill(); s.stroke(255); s.strokeWeight(0.5); s.textAlign(s.CENTER, s.CENTER); s.textSize(10); s.text("U",0,0); s.pop(); break; } } } s.preload = function () { anuratiFont = s.loadFont(AnuratiUrl); //a by type designer Emmeran Richard. //https://www.behance.net/gallery/33704618/ANURATI-Free-font } s.setup = function () { s.createCanvas(650,650); s.background(250); s.frameRate(30); if (itemInterval) { clearInterval(itemInterval); itemInterval = undefined; } } let things = []; const getThingC = function(){ let pool = [ "#308b95","#1e647a","#ca635f","#e9c67f","#484646" ]; return s.random(pool); } class Thing{ constructor(p1, p2){ this.p1 = p1; this.p2 = p2; this.c = getThingC(); this.act = true; this.center = s.createVector((this.p1.loc.x + this.p2.loc.x)/2, (this.p1.loc.y + this.p2.loc.y)/2); this.r = s.dist(this.p1.loc.x, this.p1.loc.y, this.p2.loc.x, this.p2.loc.y)/2; this.count = 0; this.gapUp = s.random(0.05,0.2); this.gapDown = s.random(0.05,0.2); this.noiseStart1 = s.floor(s.random(40,10000)); this.noiseStart2 = s.floor(s.random(40,10000)); this.cp1 = s.random([-1,1]); } update(){ if (!this.p1 || !this.p2 || this.p1.destroyed || this.p2.destroyed) { this.act = false; } this.center = s.createVector((this.p1.loc.x + this.p2.loc.x)/2, (this.p1.loc.y + this.p2.loc.y)/2); this.r = s.dist(this.p1.loc.x, this.p1.loc.y, this.p2.loc.x, this.p2.loc.y)/2; this.count ++; this.gapUp += s.random(-0.001, 0.001); this.gapDown += s.random(-0.001, 0.001); this.gapUp = s.constrain(this.gapUp, 0.05, 0.2); this.gapDown = s.constrain(this.gapDown, 0.05, 0.2); } render(){ s.push(); s.noFill(); s.strokeWeight(0.5); // let temc = s.color(this.c); // //temc.setAlpha(s.map(this.r, 0, 400, 100, 20)); // //s.stroke(temc); // let hue = s.hue(temc); // let sat = s.saturation(temc); // let bri = s.brightness(temc); // hue += (0.5 - s.noise(this.count / 100 + 40)) * 30; // hue = (360 + hue)%360; // s.colorMode(s.HSB); s.stroke(s.map(this.r, 0, 400, 0, 250), s.map(this.r, 0, 400, 100, 50)); s.translate(this.center.x, this.center.y); let d = s.createVector(this.p1.loc.x - this.p2.loc.x, this.p1.loc.y - this.p2.loc.y); s.rotate(d.heading()); let cupx = s.noise(this.count/100 + this.noiseStart1) * this.r * 2 - this.r; let cdownx = s.noise(this.count/100 + this.noiseStart2) * this.r * 2 - this.r; s.bezier(-this.r, 0, cupx , - this.gapUp* 2 * this.r * this.cp1, cdownx, this.gapDown * 2 * this.r * this.cp1, this.r, 0); s.pop(); } } const circleIntersection = function(cir1, cir2){ let d = s.dist(cir1.center.x,cir1.center.y,cir2.center.x,cir2.center.y) if (cir1.r + cir2.r < d || d < s.abs(cir1.r - cir2.r) || d < 5) return false; // no intersection let a = (cir1.r * cir1.r - cir2.r * cir2.r + d*d) / (2 * d); let midx = cir1.center.x + (a * (cir2.center.x - cir1.center.x)) / d; let midy = cir1.center.y + (a * (cir2.center.y - cir1.center.y)) / d; let h = s.sqrt(cir1.r * cir1.r - a*a); let p1x = midx + h*(cir2.center.y - cir1.center.y ) / d; let p1y = midy - h*(cir2.center.x - cir1.center.x ) / d; let p2x = midx - h*(cir2.center.y - cir1.center.y ) / d; let p2y = midy + h*(cir2.center.x - cir1.center.x ) / d; return [s.createVector(p1x, p1y), s.createVector(p2x, p2y)]; } const polygon = function (x, y, radius, npoints) { let angle = s.PI*2 / npoints; s.beginShape(); for (let a = 0; a < s.PI*2; a += angle) { let sx = x + s.cos(a) * radius; let sy = y + s.sin(a) * radius; s.vertex(sx, sy); } s.endShape(s.CLOSE); } s.draw = function () { if (!started){ //not started //init screen s.push(); s.textFont(anuratiFont); s.textSize(40); s.fill(0); s.noStroke(); s.textAlign(s.CENTER, s.CENTER); s.text("BEZIER B", s.width/2, s.height/2); s.pop(); s.noLoop(); } else { //setting interval function lines if (!itemInterval) { itemInterval = setInterval(spawnItem,2000); for (let no = 0; no < maxCycleNo; no++) { cycles.push(new LightCycle(s.createVector(s.width/2,s.height/2),getColor(),s.createVector(s.random(-1,1),s.random(-1,1)), 3)); } things.push(new Thing(cycles[cycles.length - 1], cycles[0])); for (let i = 1; i < cycles.length; i++) { things.push(new Thing(cycles[i - 1],cycles[i])); } s.background(250); } // if (!paused){ //main //drawGrid(10); //s.background(250); //draw items (if any) if (items.length > 0) { let i = items.length - 1; while (i > -1) { if (items[i].shouldBeRemoved) { items.splice(i, 1); } i --; } items.forEach(it => { it.update(); //it.render(); }); } // //update circles if (things.length > 0) { let i = things.length - 1; while (i > -1){ if (!things[i].act) { things.splice(i, 1); } else { things[i].update(); } i--; } } // //draw cycles if (cycles.length > 0) { let i = cycles.length - 1; while (i > -1) { if (cycles[i].destroyed) { cycles.splice(i, 1); } i --; } } cycles.forEach(c => { c.update(); //c.render(); }) if (cycles.length < maxCycleNo) { newPlayerIn(); } // // for (let i = 0; i < things.length; i++) { // for (let j = i; j < things.length;j++) { // let ps = circleIntersection(things[i], things[j]); // if (!ps) continue; // let len = s.dist(ps[0].x, ps[0].y,ps[1].x,ps[1].y); // if (len < 5) continue; // s.push(); // s.noFill; // s.strokeWeight(0.5); // let temc = s.color(things[i].c); // let hue = s.hue(temc); // let sat = s.saturation(temc); // let bri = s.brightness(temc); // hue += (0.5-s.noise((things[i].count+things[j].count)/100)) * 30; // hue = (360+hue) % 360; // s.colorMode(s.HSB); // s.stroke(hue, sat, bri, s.map(len, 0, 400, 0.33, 0.1)); // s.line(ps[0].x, ps[0].y,ps[1].x,ps[1].y); // s.pop(); // } // } things.forEach(c => c.render()); // //s.noLoop(); } else { s.noLoop(); } } } s.mouseClicked = function () { if (!(s.mouseX>0&&s.mouseX0&&s.mouseY { //let tt; // for test only const AnuratiUrl = "https://static.observableusercontent.com/files/5d90d13355b0f8db98ebd049eb2ae6e1a17bba830827904420d963e08490872d7c3a6f970b60a3029c64909f6d03e330105cd6ae4e487ae0966b1b479afebb6b" let itemInterval; let started = false; let paused = false; let anuratiFont; const speedLimit = 5; const neonPink = "#FE019A"; const ribbonNearThreshold = 5; let cycles = []; let items = []; const maxCycleNo = 6; const maxItemNo = 6; const immortalTime = 3; const itemHitBox = 6; const itemScale = 1.5; const itemVisiableRange = 50; const getColor = function () { const pool = [ "#6CBDD8", "#F7DF4B", "#D8700C", "#00FDC3", "#FF352D", ]; return s.random(pool); } const objDeepEq = function (a,b){ //simple deep eq if (a === b) return true; if (a === null && b === null) return true; if ((a === null && b !== null) || (a !== null && b === null)) return false; if (typeof a != 'object' || typeof b != 'object') return false; let keysA = Object.keys(a), keysB = Object.keys(b); if (keysA.length !== keysB.length) return false; for (const key of keysA) { if (!keysB.includes(key) || !objDeepEq(a[key], b[key])) return false; } return true; } const getItemType = function () { const pool = [ "massUp", "ribbonOff", "jumpKit", "Lturn", "Uturn" ]; return s.random(pool); } const drawGrid = function (size) { s.background("#191840"); s.push(); s.stroke("#65A6CD"); s.strokeWeight(5); s.line(0,0,s.width/2 -5, 0); s.line(s.width/2 + 5, 0, s.width, 0); s.line(0,s.height,s.width/2 -5, s.height); s.line(s.width/2 + 5, s.height, s.width, s.height); s.line(0,0,0, s.height/2 -5); s.line(0, s.height/2 + 5, 0, s.height); s.line(s.width,0,s.width, s.height/2 -5); s.line(s.width, s.height/2 + 5, s.width, s.height); const strokeC = s.color("#65A6CD"); strokeC.setAlpha(100); s.stroke(strokeC); s.strokeWeight(1); for (let x = -10; x < s.width + 10; x += size){ s.line(x, -10, x, s.height + 10); } for (let y = -10; y < s.height + 10; y += size) { s.line(-10, y, s.width + 10, y); } s.pop(); } const spawnItem = function () { if (items.length < maxItemNo){ if (s.random() > 0.3) { items.push(new Item(s.random(10, s.width - 10), s.random(10, s.height - 10),getItemType())); } } } const collisionCheck = function (cycle, item) { return s.dist(cycle.loc.x, cycle.loc.y, item.x, item.y) < itemHitBox * itemScale }; const caculateDistPoint2Line = function (p, l){ let d1 = s.dist(p.x,p.y,l[0].x,l[0].y); let d2 = s.dist(p.x,p.y,l[1].x,l[1].y); return s.abs(d1+(d2-d1)/2); } const ribbonNearCheck = function (cyc, ribbon) { if (ribbon.length < 2) return false; if (objDeepEq(cyc.lightRibbon, ribbon)) return false; return mightNearCheck(cyc.loc, ribbon); } const mightNearCheck = function (point, ribbon) { if (ribbon.length < 2) return false; let rib = [...ribbon]; rib.pop(); for (let i = 1; i < rib.length; i++) { if (rib[i] != null && rib[i-1] !== null) { if (s.dist(rib[i].x, rib[i].y, rib[i-1].x, rib[i-1].y) > 500) continue; if (caculateDistPoint2Line(point, [rib[i-1], rib[i]]) < ribbonNearThreshold) return [rib[i-1], rib[i]]; } } return false; } const check2LinesIntersect = function (l1x1, l1y1, l1x2, l1y2, l2x1, l2y1, l2x2, l2y2) { if (s.dist(l2x1,l2y1,l2x2,l2y2) > 500 || s.dist(l1x1, l1y1, l1x2, l1y2) > 500) return false; //from https://stackoverflow.com/a/24392281 let det, gamma, lambda; det = (l1x2 - l1x1) * (l2y2 - l2y1) - (l2x2 - l2x1) * (l1y2 - l1y1); if (det === 0) { return false; } else { lambda = ((l2y2 - l2y1) * (l2x2 - l1x1) + (l2x1 - l2x2) * (l2y2 - l1y1)) / det; gamma = ((l1y1 - l1y2) * (l2x2 - l1x1) + (l1x2 - l1x1) * (l2y2 - l1y1)) / det; return (0 < lambda && lambda < 1) && (0 < gamma && gamma < 1); } } const checkIntersect= function (l, r){ if (r.length < 2) return false; for (let i = 1; i < r.length; i++) { if (r[i] !== null && r[i-1] !== null) { if (check2LinesIntersect(l[0].x,l[0].y,l[1].x,l[1].y,r[i].x,r[i].y,r[i-1].x,r[i-1].y)) return [r[i], r[i-1]]; } } return false; } // below over all shall be O(n); const goOverCheck = function (cyc, ribbon) { if (!cyc.lastPosition) return false; if (ribbon.length < 2) return false; let rib = [...ribbon]; if (objDeepEq(rib, cyc.lightRibbon)) rib.pop(); return checkIntersect([cyc.loc, cyc.lastPosition], rib); } const mightGoOver = function (l, ribbon) { let rib = [...ribbon]; return checkIntersect(l, rib); } // const newPlayerIn = function () { while (cycles.length < maxCycleNo) { let dice = s.random([0,1,2]); switch(dice){ default: cycles.push(new LightCycle(s.createVector(s.random(s.width/2 - 5, s.width/2 + 5), 7), getColor(), s.createVector(s.random(-0.5,0.5),s.random(0.6, 1)), 1)); break; case 0: cycles.push(new LightCycle(s.createVector(s.random(s.width/2 - 5, s.width/2 + 5), s.height - 7), getColor(), s.createVector(s.random(-0.5,0.5),s.random(-1, -0.6)), 1)); break; case 1: cycles.push(new LightCycle(s.createVector(7, s.random(s.height/2 - 5, s.height/2 + 5)), getColor(), s.createVector(s.random(0.6, 1),s.random(-0.5, 0.5)), 1)); break; case 2: cycles.push(new LightCycle(s.createVector(s.width - 7, s.random(s.height/2 - 5, s.height/2 + 5)), getColor(), s.createVector(s.random(-1, -0.6),s.random(-0.5, 0.5)), 1)); break; } } // things.push(new Thing(cycles[cycles.length - 1],cycles[0])); // things.push(new Thing(cycles[cycles.length - 2],cycles[cycles.length - 1])); } class LightCycle{ constructor(loc,c,v,imm){ this.loc = loc; this.c = c; this.m = 2; this.mChangedCount = 0; this.hasJumpKit = 0; this.lightRibbonOn = true; this.lightRibbonOffCount = 0; this.v = v; this.acc = s.createVector(0,0); this.lightRibbon = []; this.immortal = true; this.immortalTime = imm; this.immortalCount = 0; this.destroyed = false; this.lastPosition = null; } render(){ //destroyed animation (only one frame ... lol) if (this.destroyed){ //boom s.push(); s.translate(this.loc.x, this.loc.y); s.rotate(s.random(-s.PI, s.PI)); s.noFill(); s.stroke(this.c); s.strokeWeight(3); s.beginShape(); for (let i = 0; i < 10; i++) { let di; di = s.random(6,10); if (i % 2 === 0) di = s.random(2,5); let r = (s.PI/5 * i) + s.random(-0.1, 0.1); s.vertex(di*s.cos(r), di*s.sin(r)); } s.endShape(s.CLOSE); s.pop(); return; } // // jumpKit if (this.hasJumpKit){ s.push(); s.stroke(255); s.noFill(); s.strokeWeight(0.8); s.translate(this.loc.x, this.loc.y); s.rotate(s.frameCount/10); for (let i = 0; i < 2*s.PI; i += s.PI/2){ s.arc(0,0,15,15,i, i + s.PI/4); } s.pop(); } // //light ribbon for (let i = 1; i < this.lightRibbon.length; i ++) { s.push(); let temC = s.color(this.c); temC.setAlpha(i < 50? s.map(i,0,49,50,255): 255); s.stroke(temC); s.noFill(); s.strokeWeight( i < 4 ? s.map(i, 0, 3, 0.5, 2.5) : 2.5); if (this.lightRibbon[i] != null && this.lightRibbon[i-1] != null) { if (s.dist(this.lightRibbon[i-1].x, this.lightRibbon[i-1].y,this.lightRibbon[i].x,this.lightRibbon[i].y) < 500){ s.line(this.lightRibbon[i-1].x, this.lightRibbon[i-1].y,this.lightRibbon[i].x,this.lightRibbon[i].y); } } s.pop(); } //the vehicle s.push(); s.fill(0); if (this.immortal) { if (this.immortalCount % s.frameRate()/4 > s.frameRate() / 8) { let temC = s.color(this.c); temC.setAlpha(150); s.stroke(temC) } else { s.stroke(this.c) } } else { s.stroke(this.c); } s.translate(this.loc.x, this.loc.y); s.rotate(this.getDirection()); //wheel 1 s.beginShape(); s.vertex(1.5, -1); s.vertex(1.5, -5); s.curveVertex(1.5,-5); s.curveVertex(1.5,-7); s.curveVertex(-1.5, -7); s.curveVertex(-1.5,-5); s.vertex(-1.5,-5); s.vertex(-1.5,-1); s.curveVertex(-1.5,-1); s.curveVertex(-1.5, 1); s.curveVertex(1.5,1); s.curveVertex(1.5,-1); s.endShape(s.CLOSE); //wheel 2 s.beginShape(); s.vertex(1.5, 1); s.vertex(1.5, 5); s.curveVertex(1.5,5); s.curveVertex(1.5,7); s.curveVertex(-1.5,7); s.curveVertex(-1.5,5); s.vertex(-1.5,5); s.vertex(-1.5,1); s.curveVertex(-1.5,1); s.curveVertex(-1.5,-1); s.curveVertex(1.5,-1); s.curveVertex(1.5,1); s.endShape(s.CLOSE); s.pop(); } update(){ //check immortal state this.immortalCount ++; if (this.immortal && this.immortalCount > this.immortalTime * s.frameRate()) this.immortal = false; // //check if distroyed if (!this.immortal) { for (const cyc of cycles) { if (ribbonNearCheck(this, cyc.lightRibbon) || goOverCheck(this, cyc.lightRibbon)){ if (this.hasJumpKit > 0){ this.hasJumpKit --; } else { this.destroyed = true; } break; } } if (this.loc.x < -1 || this.loc.x > s.width + 1 || this.loc.y < -1|| this.loc.y > s.height + 1) { this.destroyed = true; } } // if (!this.destroyed) { //check other states (m, ribbon state, etc) if (this.m > 2) { if (this.mChangedCount > s.frameRate() * 7) { this.m = 2; this.mChangedCount = 0; } else { this.mChangedCount ++; } } if (!this.lightRibbonOn) { if (this.lightRibbonOffCount > s.frameRate() * 5){ this.lightRibbonOn = true; this.lightRibbonOffCount = 0; } else { this.lightRibbonOffCount ++; } } // //check "food" for (const it of items) { if (collisionCheck(this, it)) { switch(it.type) { default: break; case "massUp": this.m *= 2; this.v.x = this.v.x/2; this.v.y = this.v.y/2; break; case "jumpKit": this.hasJumpKit = 3; break; case "ribbonOff": this.lightRibbonOn = false; break; case "Lturn": let tem = this.v.x; this.v.x = this.v.y; this.v.y = tem; break; case "Uturn": this.v.x = -this.v.x; this.v.y = -this.v.y; break; } it.shouldBeRemoved = true; break; } } // this.move(); } } move(){ this.caculateSpeed(); if (this.v.magSq() > 0) { if (!this.immortal){ if (this.lightRibbonOn) { this.lightRibbon.push(s.createVector(this.loc.x, this.loc.y)); } else { this.lightRibbon.push(null); } } if (this.lightRibbon.length > 100) this.lightRibbon.shift(); this.lastPosition = s.createVector(this.loc.x, this.loc.y); } this.loc.add(this.v); } caculateSpeed(){ this.caculateAcc(); this.v.x += this.acc.x; this.v.y += this.acc.y; //speed limit this.v.x = s.constrain(this.v.x, -speedLimit, speedLimit); this.v.y = s.constrain(this.v.y, -speedLimit, speedLimit); } caculateAcc(){ let forceX = 0; let forceY = 0; //random walk forceX += s.random(-1,1); forceY += s.random(-1,1); // let nextPosible = s.createVector(this.loc.x + this.v.x, this.loc.y + this.v.y); //prevent hit if (!this.hasJumpKit){ //the cycle is not afraid with jumpKit for (const cyc of cycles) { let nearSeg = mightNearCheck(nextPosible, cyc.lightRibbon); let intersectSeg = mightGoOver([nextPosible, this.loc], cyc.lightRibbon); if (nearSeg || intersectSeg) { //try to avoid let dir; if (nearSeg) { let temVec1 = s.createVector(nearSeg[0].x - nearSeg[1].x, nearSeg[0].y - nearSeg[1].y); let temVec2 = s.createVector(nearSeg[1].x - nearSeg[0].x, nearSeg[1].y - nearSeg[0].y); let ang1 = temVec1.angleBetween(this.v); let ang2 = temVec2.angleBetween(this.v); let determin = (s.abs(ang1) > s.abs(ang2) ? ang1 : ang2); if (determin < 0) { dir = - s.PI/2; } else { dir = s.PI/2; } } if (intersectSeg) { let temVec1 = s.createVector(intersectSeg[0].x - intersectSeg[1].x, intersectSeg[0].y - intersectSeg[1].y); let temVec2 = s.createVector(intersectSeg[1].x - intersectSeg[0].x, intersectSeg[1].y - intersectSeg[0].y); let ang1 = temVec1.angleBetween(this.v); let ang2 = temVec2.angleBetween(this.v); let determin = (s.abs(ang1) > s.abs(ang2) ? ang1 : ang2); if (determin < 0) { dir = - s.PI/2; } else { dir = s.PI/2; } } let turnForce = s.createVector(this.v.x, this.v.y); turnForce.normalize(); turnForce.rotate(dir + s.random(-s.PI/8, s.PI/8)); // around 90 degree turn let para = s.random(5,7); forceX += turnForce.x * para; forceY += turnForce.y * para; // } } } // // hit wall let dir = undefined; if (nextPosible.x < 0) dir = (this.v.heading() < 0) ? s.PI/2 : -s.PI/2; if (nextPosible.x > s.width) dir = (this.v.heading() > 0) ? s.PI/2 : -s.PI/2; if (nextPosible.y < 0) dir = (this.v.heading() > -s.PI/2) ? s.PI/2 : -s.PI/2; if (nextPosible.y > s.height ) dir = (this.v.heading() > s.PI/2) ? s.PI/2 : -s.PI/2; if (dir) { let turnForce = s.createVector(this.v.x, this.v.y); turnForce.normalize(); turnForce.rotate(dir + s.random(-s.PI/8, s.PI/8)); // around 90 degree turn let para = s.random(5,10); forceX += turnForce.x * para; forceY += turnForce.y * para; } // // items hunt for (const it of items) { if (s.dist(it.x, it.y, this.loc.x, this.loc.y) < itemVisiableRange) { if (it.type === "jumpKit") { let para = s.random(0.3,1.5); let vec = s.createVector(it.x - this.loc.x, it.y - this.loc.y); vec.normalize(); forceX += vec.x * para; forceY += vec.y * para; } else if (it.type === "Lturn" || it.type === "Uturn") { let para = s.random(0.2,0.6); let vec = s.createVector(it.x - this.loc.x, it.y - this.loc.y); vec.normalize(); forceX += vec.x * para; forceY += vec.y * para; } else { let para = s.random(0.2,0.5); let vec = s.createVector(this.loc.x - it.x, this.loc.y - it.y); vec.normalize(); forceX += vec.x * para; forceY += vec.y * para; } //break; // multi-tasking? } } // //force to acc this.acc.x = forceX/this.m; this.acc.y = forceY/this.m; } getDirection(){ return this.v.heading() + s.PI/2; } } class Item { constructor(x,y,type){ this.x = x; this.y = y; this.type = type; //this.v = s.createVector(0,0); //this.acc = s.createVector(0,0); this.lifeSpan = s.floor(s.random(15, 20)) * s.frameRate(); this.lifeCount = 0; this.shouldBeRemoved = false; this.m = s.floor(s.random(2000, 5000)); } update(){ this.lifeCount ++; if (this.lifeCount > this.lifeSpan) this.shouldBeRemoved = true; this.x += (0.5 - s.noise(this.lifeCount/1000 + this.lifeSpan)) / 2; this.y += (0.5 - s.noise(this.lifeCount/1000 + this.lifeSpan*2)) / 2; this.x = s.constrain(this.x, 5, s.width - 5); this.y = s.constrain(this.y, 5, s.height - 5); } render(){ switch(this.type) { default: break; case "massUp": s.push(); s.translate(this.x, this.y); s.scale(itemScale); s.rotate(this.lifeCount/20); s.noFill(); s.strokeWeight(0.5); s.stroke(neonPink); s.push(); for (let i = 0; i < 4; i ++) { s.triangle(0, -2, 1, -5, -1, -5); s.rotate(s.PI/2); } s.pop(); s.pop(); break; case "ribbonOff": s.push(); s.translate(this.x, this.y); s.scale(itemScale); s.rotate(this.lifeCount/20 + s.PI/4); s.noFill(); s.strokeWeight(0.5); s.stroke(neonPink); s.push(); for (let i = 0; i < 10; i ++) { s.ellipse(2, -2, 3, 3); s.rotate(s.PI/5); } s.pop(); s.pop(); break; case "jumpKit": s.push(); s.translate(this.x, this.y); s.scale(itemScale); s.rotate(this.lifeCount/20 + s.PI/2); s.noFill(); s.strokeWeight(0.5); s.stroke(neonPink); s.push(); for (let i = 0; i < 6; i ++) { s.rect(0, 0, 5, 5); s.rotate(s.PI/3); } s.pop(); s.pop(); break; case "Lturn": s.push(); s.translate(this.x, this.y); s.scale(itemScale); s.rotate(this.lifeCount/20 + s.PI * 3 / 4); s.noFill(); s.stroke(255); s.strokeWeight(0.5); s.textAlign(s.CENTER, s.CENTER); s.textSize(10); s.text("L",0,0); s.pop(); break; case "Uturn": s.push(); s.translate(this.x, this.y); s.scale(itemScale); s.rotate(this.lifeCount/20 + s.PI); s.noFill(); s.stroke(255); s.strokeWeight(0.5); s.textAlign(s.CENTER, s.CENTER); s.textSize(10); s.text("U",0,0); s.pop(); break; } } } s.preload = function () { anuratiFont = s.loadFont(AnuratiUrl); //a by type designer Emmeran Richard. //https://www.behance.net/gallery/33704618/ANURATI-Free-font } s.setup = function () { s.createCanvas(650,650); s.background(250); s.frameRate(30); if (itemInterval) { clearInterval(itemInterval); itemInterval = undefined; } } let things = []; const getThingC = function(){ let pool = [ "#d793bb","#1071b7","#83c8a3","#e7caa1","#e4a590" ]; return s.random(pool); } class Thing{ constructor(p1, p2){ this.p1 = p1; this.p2 = p2; this.c = getThingC(); this.act = true; this.center = s.createVector((this.p1.loc.x + this.p2.loc.x)/2, (this.p1.loc.y + this.p2.loc.y)/2); this.r = s.dist(this.p1.loc.x, this.p1.loc.y, this.p2.loc.x, this.p2.loc.y)/2; this.count = 0; this.gapUp = s.random(0.05,0.2); this.gapDown = s.random(0.05,0.2); this.noiseStart1 = s.floor(s.random(40,10000)); this.noiseStart2 = s.floor(s.random(40,10000)); this.cp1 = s.random([-1,1]); } update(){ if (!this.p1 || !this.p2 || this.p1.destroyed || this.p2.destroyed) { this.act = false; } this.center = s.createVector((this.p1.loc.x + this.p2.loc.x)/2, (this.p1.loc.y + this.p2.loc.y)/2); this.r = s.dist(this.p1.loc.x, this.p1.loc.y, this.p2.loc.x, this.p2.loc.y)/2; this.count ++; this.gapUp += s.random(-0.001, 0.001); this.gapDown += s.random(-0.001, 0.001); this.gapUp = s.constrain(this.gapUp, 0.05, 0.2); this.gapDown = s.constrain(this.gapDown, 0.05, 0.2); } render(){ s.push(); s.noFill(); s.strokeWeight(0.5); // let temc = s.color(this.c); // //temc.setAlpha(s.map(this.r, 0, 400, 100, 20)); // //s.stroke(temc); // let hue = s.hue(temc); // let sat = s.saturation(temc); // let bri = s.brightness(temc); // hue += (0.5 - s.noise(this.count / 100 + 40)) * 30; // hue = (360 + hue)%360; // s.colorMode(s.HSB); s.stroke(s.map(this.r, 0, 400, 0, 250), s.map(this.r, 0, 400, 100, 50)); s.translate(this.center.x, this.center.y); let d = s.createVector(this.p1.loc.x - this.p2.loc.x, this.p1.loc.y - this.p2.loc.y); s.rotate(d.heading()); let cupx = s.noise(this.count/100 + this.noiseStart1) * this.r * 2 - this.r; let cdownx = s.noise(this.count/100 + this.noiseStart2) * this.r * 2 - this.r; s.bezier(-this.r, 0, cupx , - this.gapUp* 2 * this.r * this.cp1, cdownx, this.gapDown * 2 * this.r * this.cp1, this.r, 0); s.pop(); } } const circleIntersection = function(cir1, cir2){ let d = s.dist(cir1.center.x,cir1.center.y,cir2.center.x,cir2.center.y) if (cir1.r + cir2.r < d || d < s.abs(cir1.r - cir2.r) || d < 5) return false; // no intersection let a = (cir1.r * cir1.r - cir2.r * cir2.r + d*d) / (2 * d); let midx = cir1.center.x + (a * (cir2.center.x - cir1.center.x)) / d; let midy = cir1.center.y + (a * (cir2.center.y - cir1.center.y)) / d; let h = s.sqrt(cir1.r * cir1.r - a*a); let p1x = midx + h*(cir2.center.y - cir1.center.y ) / d; let p1y = midy - h*(cir2.center.x - cir1.center.x ) / d; let p2x = midx - h*(cir2.center.y - cir1.center.y ) / d; let p2y = midy + h*(cir2.center.x - cir1.center.x ) / d; return [s.createVector(p1x, p1y), s.createVector(p2x, p2y)]; } const polygon = function (x, y, radius, npoints) { let angle = s.PI*2 / npoints; s.beginShape(); for (let a = 0; a < s.PI*2; a += angle) { let sx = x + s.cos(a) * radius; let sy = y + s.sin(a) * radius; s.vertex(sx, sy); } s.endShape(s.CLOSE); } let cColor = getThingC(); s.draw = function () { if (!started){ //not started //init screen s.push(); s.textFont(anuratiFont); s.textSize(40); s.fill(0); s.noStroke(); s.textAlign(s.CENTER, s.CENTER); s.text("SPLINE CURVES", s.width/2, s.height/2); s.pop(); s.noLoop(); } else { //setting interval function lines if (!itemInterval) { itemInterval = setInterval(spawnItem,2000); for (let no = 0; no < maxCycleNo; no++) { cycles.push(new LightCycle(s.createVector(s.width/2,s.height/2),getColor(),s.createVector(s.random(-1,1),s.random(-1,1)), 3)); } // things.push(new Thing(cycles[cycles.length - 1], cycles[0])); // for (let i = 1; i < cycles.length; i++) { // things.push(new Thing(cycles[i - 1],cycles[i])); // } s.background(250); } // if (!paused){ //main //drawGrid(10); //s.background(250); //draw items (if any) if (items.length > 0) { let i = items.length - 1; while (i > -1) { if (items[i].shouldBeRemoved) { items.splice(i, 1); } i --; } items.forEach(it => { it.update(); //it.render(); }); } // //update circles // if (things.length > 0) { // let i = things.length - 1; // while (i > -1){ // if (!things[i].act) { // things.splice(i, 1); // } else { // things[i].update(); // } // i--; // } // } // //draw cycles if (cycles.length > 0) { let i = cycles.length - 1; while (i > -1) { if (cycles[i].destroyed) { cycles.splice(i, 1); } i --; } } cycles.forEach(c => { c.update(); //c.render(); }) if (cycles.length < maxCycleNo) { newPlayerIn(); cColor = getThingC(); } // draw a contour s.push(); let temc = s.color(cColor); //temc.setAlpha(s.map(this.r, 0, 400, 100, 20)); //s.stroke(temc); let hue = s.hue(temc); let sat = s.saturation(temc); let bri = s.brightness(temc); hue += (0.5 - s.noise(s.frameCount / 100 + 40)) * 30; hue = (360 + hue)%360; s.colorMode(s.HSB); s.stroke(hue, sat, bri, 0.2); s.strokeWeight(0.5); s.noFill(); s.curveTightness((0.5 - s.noise(this.frameCount/120 + 144)) * 5); s.beginShape(); s.curveVertex(cycles[cycles.length - 1].loc.x, cycles[cycles.length - 1].loc.y); cycles.forEach(cycle => {s.curveVertex(cycle.loc.x, cycle.loc.y)}); s.curveVertex(cycles[0].loc.x, cycles[0].loc.y); s.curveVertex(cycles[1].loc.x, cycles[1].loc.y); s.endShape(); s.pop(); //things.forEach(c => c.render()); // //s.noLoop(); } else { s.noLoop(); } } } s.mouseClicked = function () { if (!(s.mouseX>0&&s.mouseX0&&s.mouseYScreenshots

Lines (sketches here)

Circles

Polygons

Bezier

Spline Curve

`3a:[{"id":"4106185a56f1be87dbce060fe226670a2ecbbf13e7c60895dc3f80789b7eb647bf85fd5369d50dbe17f0c275b3fd2231da140d31ee74a575f2624a8cd2f1cc9b","href":"https://static.observableusercontent.com/files/4106185a56f1be87dbce060fe226670a2ecbbf13e7c60895dc3f80789b7eb647bf85fd5369d50dbe17f0c275b3fd2231da140d31ee74a575f2624a8cd2f1cc9b","name":"圖片@1.png","type":"image/png","lastModified":1633193064181.028,"size":1133037},{"id":"25d9cbc805e1ed039512fe0f2b729089cd358a444435e07778031ca588781cfe8570976638c96135debe9f9a8a8ca8976b179a93e6ed3e058e2383ec64646e6c","href":"https://static.observableusercontent.com/files/25d9cbc805e1ed039512fe0f2b729089cd358a444435e07778031ca588781cfe8570976638c96135debe9f9a8a8ca8976b179a93e6ed3e058e2383ec64646e6c","name":"圖片@2.png","type":"image/png","lastModified":1633193083897.698,"size":908447},{"id":"f78d48a9c706dc85abe184e35cfaddda29b3500f41741654786ab52fc2fe295601583e34d216828dc37246da5eeaabac1e339c770f2d2b4417bd5be46ee6aed7","href":"https://static.observableusercontent.com/files/f78d48a9c706dc85abe184e35cfaddda29b3500f41741654786ab52fc2fe295601583e34d216828dc37246da5eeaabac1e339c770f2d2b4417bd5be46ee6aed7","name":"圖片@3.png","type":"image/png","lastModified":1633193102655.691,"size":665686},{"id":"8d703e89355666b4b54408cfca0319ac8c6543c9485a1f328f5cf09c667e145f63851572b2c9fcd9c44cd43d528f137b16ca4e8fda79c594902380e64f810600","href":"https://static.observableusercontent.com/files/8d703e89355666b4b54408cfca0319ac8c6543c9485a1f328f5cf09c667e145f63851572b2c9fcd9c44cd43d528f137b16ca4e8fda79c594902380e64f810600","name":"圖片.png","type":"image/png","lastModified":1633193025994.928,"size":1110447},{"id":"435bace6859c5dd127e0e759bdfe4d3ddcc33b2bdc644919c869d519689ba3b51168268189494e702a7e4e17d4243faa1a2129e89f6a454815944bc9c6908397","href":"https://static.observableusercontent.com/files/435bace6859c5dd127e0e759bdfe4d3ddcc33b2bdc644919c869d519689ba3b51168268189494e702a7e4e17d4243faa1a2129e89f6a454815944bc9c6908397","name":"螢幕截圖 2021-10-04 下午4.22.26.png","type":"image/png","lastModified":1633335787101.741,"size":2280667},{"id":"ca29ab1ec0f1bbae910cbb4f69605d536742844b336477719631de55a2a81bfdeffbc04708188f553225a73989c7e09a135584210e28985a78fef31c8f34591e","href":"https://static.observableusercontent.com/files/ca29ab1ec0f1bbae910cbb4f69605d536742844b336477719631de55a2a81bfdeffbc04708188f553225a73989c7e09a135584210e28985a78fef31c8f34591e","name":"螢幕截圖 2021-10-04 下午5.10.35.png","type":"image/png","lastModified":1633338653298.896,"size":2201673},{"id":"2527acf4809e96b315caf3ce9c77b4db858bcbb9d656b0ed8af7757ce60b4c0c6a1b5dabb5587920743eba81f3321731a8ef6df6bbaef1dbb9460cfe23f2d327","href":"https://static.observableusercontent.com/files/2527acf4809e96b315caf3ce9c77b4db858bcbb9d656b0ed8af7757ce60b4c0c6a1b5dabb5587920743eba81f3321731a8ef6df6bbaef1dbb9460cfe23f2d327","name":"螢幕截圖 2021-10-04 下午5.17.02.png","type":"image/png","lastModified":1633339038057.121,"size":4262684},{"id":"abd085f72fef3ebdeb7a99b52b8b945a45c5dfac271d22977a12e244ff503f452ecb7f44535a724566c5b140d45079c42c6f5d54b0a061b492f8d124e8eb93dc","href":"https://static.observableusercontent.com/files/abd085f72fef3ebdeb7a99b52b8b945a45c5dfac271d22977a12e244ff503f452ecb7f44535a724566c5b140d45079c42c6f5d54b0a061b492f8d124e8eb93dc","name":"螢幕截圖 2021-10-04 下午5.16.17.png","type":"image/png","lastModified":1633339038005.981,"size":4486073},{"id":"f428c2168a06004b762f10be649b460b1a2b0b40f037b172893894ed92da0d7750ce8ea5aec743820d06fbc07b582acc33af1babb52a96d6ccf3a846c062b1ed","href":"https://static.observableusercontent.com/files/f428c2168a06004b762f10be649b460b1a2b0b40f037b172893894ed92da0d7750ce8ea5aec743820d06fbc07b582acc33af1babb52a96d6ccf3a846c062b1ed","name":"螢幕截圖 2021-10-04 下午5.54.01.png","type":"image/png","lastModified":1633341296169.383,"size":4484173},{"id":"01e18c0396ad486907dcd5edcb45d0c4d77cd70a1793d42efbc20c44a9261372a8e5008d18885d51951eb4e97edd0921033bf8e3b1ac0043819398eab3eef362","href":"https://static.observableusercontent.com/files/01e18c0396ad486907dcd5edcb45d0c4d77cd70a1793d42efbc20c44a9261372a8e5008d18885d51951eb4e97edd0921033bf8e3b1ac0043819398eab3eef362","name":"螢幕截圖 2021-10-04 下午5.56.07.png","type":"image/png","lastModified":1633341384420.899,"size":4684717},{"id":"cb21ef095d8ac9275f7ccfa5b7c346876557755702f7daf54654a42cd08237e04912d2b68c06cf16da071eada6c5c23f2834d7dc9b9b8490de17727c9664ec81","href":"https://static.observableusercontent.com/files/cb21ef095d8ac9275f7ccfa5b7c346876557755702f7daf54654a42cd08237e04912d2b68c06cf16da071eada6c5c23f2834d7dc9b9b8490de17727c9664ec81","name":"圖片@4.png","type":"image/png","lastModified":1633351173264.362,"size":1748628},{"id":"6e131921ab29d875e7624a99a98f84dc637444604351be0e5764a84a53033ddc11e45a914bad30908bf4909f02457815e5db27ac5652c26bfbfa098e766ffc07","href":"https://static.observableusercontent.com/files/6e131921ab29d875e7624a99a98f84dc637444604351be0e5764a84a53033ddc11e45a914bad30908bf4909f02457815e5db27ac5652c26bfbfa098e766ffc07","name":"圖片@5.png","type":"image/png","lastModified":1633351356347.856,"size":1733706},{"id":"9f9a9d3f0634707eac82c5d45db949fb84e635c6cb938ec7c8cbed7d71e9e21ae559af49106fb648045bc85acb9f2bc7faef8158b8c98ce7bfa7432f5646b90b","href":"https://static.observableusercontent.com/files/9f9a9d3f0634707eac82c5d45db949fb84e635c6cb938ec7c8cbed7d71e9e21ae559af49106fb648045bc85acb9f2bc7faef8158b8c98ce7bfa7432f5646b90b","name":"圖片@7.png","type":"image/png","lastModified":1633351741986.332,"size":807241},{"id":"8764989d1520b72cfc25ba0f3d190a8a2e11814b396b5d47aad0c217412aecdece2fb3e61ca634de74a401e3f753a1d4fa3c5a09732c7e8573758af932fb701e","href":"https://static.observableusercontent.com/files/8764989d1520b72cfc25ba0f3d190a8a2e11814b396b5d47aad0c217412aecdece2fb3e61ca634de74a401e3f753a1d4fa3c5a09732c7e8573758af932fb701e","name":"圖片@6.png","type":"image/png","lastModified":1633351622864.342,"size":726892},{"id":"816e9564f82b1c60bb0512a69e98c194a3601daf7669943eeb8f1e9834fc02652150acada576bf4fa05746095f75aac3421bb065b0aecee112df236776ffb1c5","href":"https://static.observableusercontent.com/files/816e9564f82b1c60bb0512a69e98c194a3601daf7669943eeb8f1e9834fc02652150acada576bf4fa05746095f75aac3421bb065b0aecee112df236776ffb1c5","name":"圖片@9.png","type":"image/png","lastModified":1633368723308.044,"size":1401028},{"id":"b07e7f114ea8a419bc7a2855f8094edae50dd9acc190e7863ed130c5827fc9d2756a8b46a1982be7cd2c3eaa3881368e2e4940767c4ba6ec02ca1452e1531f7b","href":"https://static.observableusercontent.com/files/b07e7f114ea8a419bc7a2855f8094edae50dd9acc190e7863ed130c5827fc9d2756a8b46a1982be7cd2c3eaa3881368e2e4940767c4ba6ec02ca1452e1531f7b","name":"圖片@8.png","type":"image/png","lastModified":1633368612938.649,"size":1535758}] 31:{"id":"779ddda5c6ed4d85","slug":"assignment-4-genart","title":"Assignment 4 - GenArt","thumbnail":"82a36e630850c039ec8007014d6fcbd155631b4a87ee8241f901c272501cc073","access_level":"public","create_time":"$D2021-10-02T15:04:48.339Z","update_time":"$D2021-10-05T12:01:59.808Z","view_time":null,"first_public_time":"$D2021-10-02T16:46:58.648Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"b2e9840be7b1b607","login":"real-john-cheung","name":"John C","avatar_url":"https://avatars-next.observableusercontent.com/1d9ef6121a0bbd1a75fab479f9891fe1d78cc65f76c394585ae1a7dad0d3abf6","tier":"starter_2024"},"version":218,"publish_version":218,"role":null,"authored":false,"authors":[{"type":"individual","id":"e8e99acdbe3aebfb","login":"real-john-cheung","name":"John C","avatar_url":"https://avatars-next.observableusercontent.com/1d9ef6121a0bbd1a75fab479f9891fe1d78cc65f76c394585ae1a7dad0d3abf6","tier":null}],"members":[{"type":"individual","id":"e8e99acdbe3aebfb","login":"real-john-cheung","name":"John C","avatar_url":"https://avatars-next.observableusercontent.com/1d9ef6121a0bbd1a75fab479f9891fe1d78cc65f76c394585ae1a7dad0d3abf6","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Assignment 4 - GenArt","cells":[{"id":5,"value":"html`

Assignment 4 - GenArt

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"html`

Readings Responses

Sketches

All sketches below share the same ideology: drawing simple perfect geometric shapes repeatedly with the random walk system.

Lines
Please check them here

Circles

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"

Polygons

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"

Bezier

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"

Spline Curve

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"import {p5} from \"@real-john-cheung/sm3809-a1\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3a","stdlib":"1","titling":"auto"}} 32:"$31:body"