2d:null 2e:["$","title",null,{"children":"Assignment 3 - GenArt | John C | Observable"}] 33:T52ab,p5(s => { //let tt; // for test only 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; } } 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("#191840"); s.frameRate(30); if (itemInterval) { clearInterval(itemInterval); itemInterval = undefined; } } s.draw = function () { if (!started){ //not started //init screen s.push(); s.textFont(anuratiFont); s.textSize(40); s.fill(255); s.noStroke(); s.textAlign(s.CENTER, s.CENTER); s.text("CLICK TO START", s.width/2, s.height*2/5); s.text("THE GAME", s.width/2, s.height*3/5); s.pop(); s.noLoop(); } else { //setting interval function 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)); } } // if (!paused){ //main drawGrid(10); //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(); }); } // //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(); } // //s.noLoop(); } else { s.noLoop(); } } } s.mouseClicked = function () { if (!(s.mouseX>0&&s.mouseX0&&s.mouseY { //let tt; // for test only 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; } lines.push(new Line(cycles[cycles.length - 1],cycles[0])); lines.push(new Line(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 lines = []; const getLineC = function(){ let pool = [ "#fefffe", "#e9ebf8", "#b4b8c5", "#a5a299", "#8d818c", "#545e75", "#304d6d", "#925e78", "#f05365", "#fabc2a" ]; return s.random(pool); } class Line{ constructor(p1, p2){ this.p1 = p1; this.p2 = p2; this.c = getLineC(); this.act = true; } update(){ if (!this.p1 || !this.p2 || this.p1.destroyed || this.p2.destroyed) { this.act = false; } } render(){ if (!this.act) return let len = s.dist(this.p1.loc.x, this.p1.loc.y, this.p2.loc.x, this.p2.loc.y); if (len < 20) return; s.push(); let col = s.color(this.c); col.setAlpha(s.map(len, 20, 600, 150, 10)); s.stroke(col); s.strokeWeight(0.5); s.line(this.p1.loc.x, this.p1.loc.y, this.p2.loc.x, this.p2.loc.y); s.pop(); } } 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("AND IF YOU DONT", s.width/2, s.height*2/5); s.text("LIKE GAME", s.width/2, s.height*3/5); s.pop(); s.noLoop(); } else { //setting interval function 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)); } lines.push(new Line(cycles[cycles.length - 1], cycles[0])); for (let i = 1; i < cycles.length; i++) { lines.push(new Line(cycles[i - 1],cycles[i])); } s.background(250); } // if (!paused){ //main //drawGrid(10); //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 lines if (lines.length > 0) { let i = lines.length - 1; while (i > -1){ if (!lines[i].act) { lines.splice(i, 1); } 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(); } lines.forEach(line => { line.render(); }); // //s.noLoop(); } else { s.noLoop(); } } } s.mouseClicked = function () { if (!(s.mouseX>0&&s.mouseX0&&s.mouseY { //let tt; // for test only 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; } } 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; } } 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("AND YOU DONT EVEN", s.width/2, s.height*2/5); s.text("LIKE COLOR", s.width/2, s.height*3/5); s.pop(); s.noLoop(); } else { //setting interval function 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)); } s.background(250); } // if (!paused){ //main //drawGrid(10); //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(); }); } // //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(); }) for (let i = 0; i < cycles.length; i ++) { let left = i === 0 ? cycles.length - 1: i-1; s.push(); s.strokeWeight(0.5); let len = s.dist(cycles[left].loc.x,cycles[left].loc.y,cycles[i].loc.x,cycles[i].loc.y); let thec = s.color(s.map(len, 0, 600,0 ,255), 150); s.stroke(thec); if(len > 20) s.line(cycles[left].loc.x,cycles[left].loc.y,cycles[i].loc.x,cycles[i].loc.y); s.pop(); } if (cycles.length < maxCycleNo) { newPlayerIn(); } // //s.noLoop(); } else { s.noLoop(); } } } s.mouseClicked = function () { if (!(s.mouseX>0&&s.mouseX0&&s.mouseYAssignment 3 - GenArt`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"html`

Readings Responses

Sketch

Before clicking on the sketch to start, it is recommended to click the run button of the cell first. This is to prevent possible bugs related to how Observable works (more precisely, how cells are updated). Thank you :)

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":293,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":301,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"

Visual Reference For The Game

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":274,"value":"

Recording & Screenshots

If the video cannot be played on this page, please right click and open it in a new tab

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

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"import {p5} from \"@real-john-cheung/sm3809-a1\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"AnuratiUrl = await FileAttachment(\"Anurati-Regular.otf\").url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 32:"$31:body"