diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..e902b72 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +**/.ipynb_checkpoints diff --git a/ZIPFILES/THISISNOTART.zip b/ZIPFILES/thisisnotart.zip similarity index 100% rename from ZIPFILES/THISISNOTART.zip rename to ZIPFILES/thisisnotart.zip diff --git a/canvas.js b/canvas.js index 64b0931..cc57763 100644 --- a/canvas.js +++ b/canvas.js @@ -6,7 +6,19 @@ function randomNumber(min,max) { return Math.floor(Math.random() * (max - min) + min); }; -var x = randomNumber(0,9); +function openWindow(c) { + if /* if we're on iOS, open in Apple Maps */ + ((navigator.platform.indexOf("iPhone") != -1) || + (navigator.platform.indexOf("iPad") != -1) || + (navigator.platform.indexOf("iPod") != -1)) + window.open(`maps://http://www.google.com/maps/place/${c}`); else /* else use Google */ + window.open(`http://www.google.com/maps/place/${c}`, "_self"); + } + +var x = randomNumber(null,5); +var y = randomNumber(0,2); + +console.log(x) @@ -14,11 +26,12 @@ var x = randomNumber(0,9); function preload() { footsteps = document.getElementById("footsteps");//walking -//PNF1 = document.getElementById("PNF1"); - //PNF2 = document.getElementById("PNF2"); +PNF1 = document.getElementById("PNF1"); +PNF2 = document.getElementById("PNF2"); LOBS1 = document.getElementById("LOBS1"); -LOBS2= document.getElementById("LOBS2"); -GARDE = document.getElementById("GARDE"); +LOBS2 = document.getElementById("LOBS2"); +GARDE = document.getElementById("GARDE1"); +GARDE = document.getElementById("GARDE2"); SONIC1 = document.getElementById("SONIC1 "); SONIC2 = document.getElementById("SONIC2"); PIGEON1 = document.getElementById("PIGEON1 "); @@ -39,18 +52,20 @@ myFont = loadFont("ApfelGrotezk-Regular.ttf", fontRead); myFont13 = loadFont("typefaces/TINY5x3-260.ttf", fontRead); myFont14 = loadFont("typefaces/TINY5x3-280.ttf", fontRead); - var SOU =["LOBS1", "LOBS2", "GARDE", "SONIC1", "SONIC2", "PIGEON1", "PIGEON2"] + + - sou = SOU[x]; - console.log(sou) -}; - var HOTSPOT = { - names: ["Hotspot name:\nTHE SECRET GARDEN", "Hotspot name:\nSONIC THE SELLOUT", "Hotspot name:\nSONIC THE SELLOUT", "Hotspot name:\nPIGEON PLAZA", "Hotspot name:\nPIGEON PLAZA"], - coord: ["52.073237, 4.314601", "52.076413, 4.308312", "52.07863, 4.303875","52.072243, 4.311191", "52.074982, 4.311327", "52.073237, 4.314601", "52.076413, 4.308312", "52.07863, 4.303875"], }; +var SOU =[[PNF1, PNF2],[LOBS1, LOBS2],[GARDE1, GARDE2], [SONIC1, SONIC2], [PIGEON1, PIGEON2]] + +let sou = SOU[x][y]; + var HOTSPOT = { + names: ["Hotspot name:\nPLACE NOT FOUND", "Hotspot name:\nLOBSTER LOUNGE", "Hotspot name:\nTHE SECRET GARDEN", "Hotspot name:\nSONIC THE SELLOUT", "Hotspot name:\nPIGEON PLAZA"], + coord: ["52.07242636201861,\n4.311324269227487","52.07494151159389,\n4.311367399049404","52.073236822099176,\n4.314598358985356","52.07642086169303,\n4.3083705464802105","52.07863969677628,\n4.304184010905719"], +}; // Place not found 1 @@ -109,8 +124,8 @@ var stage = 0; //0 =splash //1 =pong -var coordinateX = Math.random() * window.innerWidth; -var coordinateY = Math.random() * window.innerHeight; +var coordinateX = Math.random() * window.innerWidth-100; +var coordinateY = Math.random() * window.innerHeight-100; var letterSize = 50; @@ -176,21 +191,21 @@ function draw(){ if (stage == 1){ splash2();//run splash2 } - if(stage == 1 && clicks == 3){ + if(stage == 1 && clicks == 4){ stage = 2;//run splash2 }//close 1 if (stage == 2){ splash3();//run splash3 } - if(stage == 2 && clicks == 4){ + if(stage == 2 && clicks == 6){ stage = 3;//run splash3 }//close 2 if (stage == 3){ splash4();//run splash4 } - if(stage == 3 && clicks == 5){ + if(stage == 3 && clicks == 8){ stage = 4;//run splash4 }//close 3 if (stage == 4){ @@ -204,13 +219,13 @@ function draw(){ //text(clicks, width/2, height/2); }//close 2 - if(stage == 6){ //player 1 wins - p1Wins(); - }//close 3 - - if(stage == 7){ //player 2 wins - p2Wins(); - }//close 4 + // if(stage == 6){ //player 1 wins + // p1Wins(); + // }//close 3 + // + // if(stage == 7){ //player 2 wins + // p2Wins(); + // }//close 4 @@ -296,31 +311,31 @@ function splash4(){ } -function p1Wins(){ +//function p1Wins(){ //P1 Win screen - r = map(mouseX, 0, windowHeight, 0, 255); - g = map(mouseY, 0, windowHeight, 255, 0); - b = map(mouseX, 0, windowWidth, 0, 255); +// r = map(mouseX, 0, windowHeight, 0, 255); +// g = map(mouseY, 0, windowHeight, 255, 0); +// b = map(mouseX, 0, windowWidth, 0, 255); // col = mouseX/2; - background(r, g, b); - fill(255); - textSize(25); - textFont(myFont); - text('Refresh to launch a new ball', width/2, height/2); +// background(r, g, b); +// fill(255); +// textSize(25); +// textFont(myFont); +// text('Refresh to launch a new ball', width/2, height/2); -}//close P1 +//}//close P1 -function p2Wins(){ +//function p2Wins(){ //P2 Win screen - background(163); - fill(255); +// background(163); +// fill(255); - textSize(20); - textFont(myFont); - text('Refresh to launch a new ball', width/2, height/2); -}//close P2 + // textSize(20); + // textFont(myFont); + // text('Refresh to launch a new ball', width/2, height/2); +//}//close P2 function windowResized() { @@ -397,22 +412,26 @@ function pong() { console.log(hit) } if (hit == true){ - PNF1.play(); - inside = true; + sou.play(); + inside = true; } else { if (inside){ + if (capture){ //inside bounce + ballDirectionX = ballDirectionX*-1; ballDirectionY = ballDirectionY*-1; } else { inside = false; + } } } + fill(255); // text(cheatcode, 100, 100); @@ -425,7 +444,7 @@ function pong() { textFont(myFont); textAlign(TOP); textLeading(width/20); -text("I Don't Know Where We're Going, But\nyou are "+e+"px away from finding a hotspot ", width/2, 70); + text("I Don't Know Where We're Going, But\nyou are "+e+"px away from finding a hotspot ", width/2, 70); textSize(width/35); textFont(myFont); textAlign(CENTER); @@ -436,11 +455,7 @@ text("I Don't Know Where We're Going, But\nyou are "+e+"px away from finding a h //background(r, g, b); } else if (hit == true) { background(0,0,0); - - //click.loop = false; - //text('Your mouse is inside the hotspot range range at: '+ mouseX + ' pixels (x) /' + mouseY + ' pixels (y)', width/2, 280); - // clear(); - + if(mouseIsPressed == true) { // if the mouse is pressed, while the ball is in the circle // big text at the top @@ -462,8 +477,13 @@ text("I Don't Know Where We're Going, But\nyou are "+e+"px away from finding a h textSize(width/17); text(coord , width/2, height/2); fill(0); - //layer1.play();//sirens - } else { + + if(mouseReleased){ + openWindow(coord); + + } + } + else { // if the mouse is not pressed, while the ball is in the circle // big text at the top coordinateBallColored(); diff --git a/codes.js b/codes.js index 2cd413b..ba18136 100644 --- a/codes.js +++ b/codes.js @@ -13,56 +13,56 @@ location='ZIPFILES/pprgm/'; }//OK if (document.querySelector ("input[type='toxt']").value.toUpperCase() === "BORDERS") { - location='ZIPFILES/BORDERS.zip/'; + location='ZIPFILES/BORDERS.zip'; } if (document.querySelector ("input[type='toxt']").value.toUpperCase() === "LIFE") { - location='ZIPFILES/LIFE.zip/'; + location='ZIPFILES/LIFE.zip'; } if (document.querySelector ("input[type='toxt']").value.toUpperCase() === "FUTURE") { - location='ZIPFILES/FUTURE.zip/'; + location='ZIPFILES/FUTURE.zip'; } if (document.querySelector ("input[type='toxt']").value.toUpperCase() === "DIALOGUE") { - location='ZIPFILES/DIALOGUE.zip/'; + location='ZIPFILES/DIALOGUE.zip'; } if (document.querySelector ("input[type='toxt']").value.toUpperCase() === "BREATH") { - location='ZIPFILES/BREATH.zip/'; + location='ZIPFILES/BREATH.zip'; } if (document.querySelector ("input[type='toxt']").value.toUpperCase() === "CAPITALISM") { - location='ZIPFILES/CAPITALISM.zip/'; + location='ZIPFILES/CAPITALISM.zip'; } if (document.querySelector ("input[type='toxt']").value.toUpperCase() === "GAMES") { - location='ZIPFILES/CAPITALISM.zip/'; + location='ZIPFILES/GAMES.zip'; } if (document.querySelector ("input[type='toxt']").value.toUpperCase() === "SYNERGY") { - location='ZIPFILES/SINERGY.zip/'; + location='ZIPFILES/SINERGY.zip'; } if (document.querySelector ("input[type='toxt']").value.toUpperCase() === "DEATH") { - location='ZIPFILES/DEATH.zip/'; + location='ZIPFILES/DEATH.zip'; } if (document.querySelector ("input[type='toxt']").value.toUpperCase() === "VIRUS") { - location='ZIPFILES/VIRUS.zip/'; + location='ZIPFILES/VIRUS.zip'; } if (document.querySelector ("input[type='toxt']").value.toUpperCase() === "THEWHOLE") { - location='ZIPFILES/THEWHOLE.zip/'; + location='ZIPFILES/THEWHOLE.zip'; } if (document.querySelector ("input[type='toxt']").value.toUpperCase() === "CAT") { location='https://hub.xpub.nl/sandbot/PrototypingTimes/sketches/Euna/'; } if (document.querySelector ("input[type='toxt']").value.toUpperCase() === "APPOINTMENT") { - location='ZIPFILES/APPOINTMENT.zip/'; + location='ZIPFILES/appointment/'; } if (document.querySelector ("input[type='toxt']").value.toUpperCase() === "PRAXIS") { - location='ZIPFILES/PRAXIS.zip/'; + location='ZIPFILES/PRAXIS.zip'; } if (document.querySelector ("input[type='toxt']").value.toUpperCase() === "OFFLINE") { - location='ZIPFILES/offline.zip/'; + location='ZIPFILES/OFFLINE.zip'; } //OK if (document.querySelector ("input[type='toxt']").value.toUpperCase() === "SAVIOR") { - location='ZIPFILES/SAVIOR.zip/'; + location='ZIPFILES/SAVIOR.zip'; } if (document.querySelector ("input[type='toxt']").value.toUpperCase() === "THISISNOTART") { - location='ZIPFILES/thisisnotart.zip/'; + location='ZIPFILES/thisisnotart.zip'; } else { diff --git a/index.html b/index.html index 9de6569..5a589ee 100644 --- a/index.html +++ b/index.html @@ -10,13 +10,13 @@ - + I Don't Know Where We're Going, But.. - + @@ -161,9 +161,9 @@ This license does not apply to the materials that were created by third party cr - - + + + diff --git a/p5.collide2d.js b/p5.collide2d.js new file mode 100644 index 0000000..a983ef3 --- /dev/null +++ b/p5.collide2d.js @@ -0,0 +1,521 @@ +/* +Repo: https://github.com/bmoren/p5.collide2D/ +Created by http://benmoren.com +Some functions and code modified version from http://www.jeffreythompson.org/collision-detection +Version v0.7.3 | June 22, 2020 +CC BY-NC-SA 4.0 +*/ + + +console.log("### p5.collide v0.7.3 ###") + +p5.prototype._collideDebug = false; + +p5.prototype.collideDebug = function(debugMode){ + _collideDebug = debugMode; +} + +/*~++~+~+~++~+~++~++~+~+~ 2D ~+~+~++~+~++~+~+~+~+~+~+~+~+~+~+*/ + +p5.prototype.collideRectRect = function (x, y, w, h, x2, y2, w2, h2) { + //2d + //add in a thing to detect rectMode CENTER + if (x + w >= x2 && // r1 right edge past r2 left + x <= x2 + w2 && // r1 left edge past r2 right + y + h >= y2 && // r1 top edge past r2 bottom + y <= y2 + h2) { // r1 bottom edge past r2 top + return true; + } + return false; +}; + +// p5.vector version of collideRectRect +p5.prototype.collideRectRectVector = function(p1, sz, p2, sz2){ + return p5.prototype.collideRectRect(p1.x, p1.y, sz.x, sz.y, p2.x, p2.y, sz2.x,sz2.y) +} + + +p5.prototype.collideRectCircle = function (rx, ry, rw, rh, cx, cy, diameter) { + //2d + // temporary variables to set edges for testing + var testX = cx; + var testY = cy; + + // which edge is closest? + if (cx < rx){ testX = rx // left edge + }else if (cx > rx+rw){ testX = rx+rw } // right edge + + if (cy < ry){ testY = ry // top edge + }else if (cy > ry+rh){ testY = ry+rh } // bottom edge + + // // get distance from closest edges + var distance = this.dist(cx,cy,testX,testY) + + // if the distance is less than the radius, collision! + if (distance <= diameter/2) { + return true; + } + return false; +}; + +// p5.vector version of collideRectCircle +p5.prototype.collideRectCircleVector = function(r, sz, c, diameter){ + return p5.prototype.collideRectCircle(r.x,r.y, sz.x,sz.y, c.x,c.y, diameter) +} + +p5.prototype.collideCircleCircle = function (x, y,d, x2, y2, d2) { +//2d + if( this.dist(x,y,x2,y2) <= (d/2)+(d2/2) ){ + return true; + } + return false; +}; + + +// p5.vector version of collideCircleCircle +p5.prototype.collideCircleCircleVector = function(p1,d, p2, d2){ + return p5.prototype.collideCircleCircle(p1.x,p1.y, d, p2.x,p2.y, d2) +} + + +p5.prototype.collidePointCircle = function (x, y, cx, cy, d) { +//2d +if( this.dist(x,y,cx,cy) <= d/2 ){ + return true; +} +return false; +}; + +// p5.vector version of collidePointCircle +p5.prototype.collidePointCircleVector = function(p, c, d){ + return p5.prototype.collidePointCircle(p.x,p.y,c.x,c.y, d) +} + +p5.prototype.collidePointEllipse = function (x, y, cx, cy, dx, dy) { + //2d + var rx = dx/2, ry = dy/2; + // Discarding the points outside the bounding box + if (x > cx + rx || x < cx - rx ||y > cy + ry || y < cy - ry) { + return false; + } + // Compare the point to its equivalent on the ellipse + var xx = x - cx, yy = y - cy; + var eyy = ry * this.sqrt(this.abs(rx * rx - xx * xx)) / rx; + return yy <= eyy && yy >= -eyy; +}; + +// p5.vector version of collidePointEllipse +p5.prototype.collidePointEllipseVector = function(p, c, d){ + return p5.prototype.collidePointEllipse(p.x,p.y,c.x,c.y,d.x,d.y); +} + +p5.prototype.collidePointRect = function (pointX, pointY, x, y, xW, yW) { +//2d +if (pointX >= x && // right of the left edge AND + pointX <= x + xW && // left of the right edge AND + pointY >= y && // below the top AND + pointY <= y + yW) { // above the bottom + return true; +} +return false; +}; + +// p5.vector version of collidePointRect +p5.prototype.collidePointRectVector = function(point, p1, sz){ + return p5.prototype.collidePointRect(point.x, point.y, p1.x, p1.y, sz.x, sz.y); +} + +p5.prototype.collidePointLine = function(px,py,x1,y1,x2,y2, buffer){ + // get distance from the point to the two ends of the line +var d1 = this.dist(px,py, x1,y1); +var d2 = this.dist(px,py, x2,y2); + +// get the length of the line +var lineLen = this.dist(x1,y1, x2,y2); + +// since floats are so minutely accurate, add a little buffer zone that will give collision +if (buffer === undefined){ buffer = 0.1; } // higher # = less accurate + +// if the two distances are equal to the line's length, the point is on the line! +// note we use the buffer here to give a range, rather than one # +if (d1+d2 >= lineLen-buffer && d1+d2 <= lineLen+buffer) { + return true; +} +return false; +} + +// p5.vector version of collidePointLine +p5.prototype.collidePointLineVector = function(point,p1,p2, buffer){ + return p5.prototype.collidePointLine(point.x,point.y, p1.x,p1.y, p2.x,p2.y, buffer); +} + +p5.prototype.collideLineCircle = function( x1, y1, x2, y2, cx, cy, diameter) { + // is either end INSIDE the circle? + // if so, return true immediately + var inside1 = this.collidePointCircle(x1,y1, cx,cy,diameter); + var inside2 = this.collidePointCircle(x2,y2, cx,cy,diameter); + if (inside1 || inside2) return true; + + // get length of the line + var distX = x1 - x2; + var distY = y1 - y2; + var len = this.sqrt( (distX*distX) + (distY*distY) ); + + // get dot product of the line and circle + var dot = ( ((cx-x1)*(x2-x1)) + ((cy-y1)*(y2-y1)) ) / this.pow(len,2); + + // find the closest point on the line + var closestX = x1 + (dot * (x2-x1)); + var closestY = y1 + (dot * (y2-y1)); + + // is this point actually on the line segment? + // if so keep going, but if not, return false + var onSegment = this.collidePointLine(closestX,closestY,x1,y1,x2,y2); + if (!onSegment) return false; + + // draw a debug circle at the closest point on the line + if(this._collideDebug){ + this.ellipse(closestX, closestY,10,10); + } + + // get distance to closest point + distX = closestX - cx; + distY = closestY - cy; + var distance = this.sqrt( (distX*distX) + (distY*distY) ); + + if (distance <= diameter/2) { + return true; + } + return false; +} + +// p5.vector version of collideLineCircle +p5.prototype.collideLineCircleVector = function( p1, p2, c, diameter){ + return p5.prototype.collideLineCircle( p1.x, p1.y, p2.x, p2.y, c.x, c.y, diameter); +} +p5.prototype.collideLineLine = function(x1, y1, x2, y2, x3, y3, x4, y4,calcIntersection) { + + var intersection; + + // calculate the distance to intersection point + var uA = ((x4-x3)*(y1-y3) - (y4-y3)*(x1-x3)) / ((y4-y3)*(x2-x1) - (x4-x3)*(y2-y1)); + var uB = ((x2-x1)*(y1-y3) - (y2-y1)*(x1-x3)) / ((y4-y3)*(x2-x1) - (x4-x3)*(y2-y1)); + + // if uA and uB are between 0-1, lines are colliding + if (uA >= 0 && uA <= 1 && uB >= 0 && uB <= 1) { + + if(this._collideDebug || calcIntersection){ + // calc the point where the lines meet + var intersectionX = x1 + (uA * (x2-x1)); + var intersectionY = y1 + (uA * (y2-y1)); + } + + if(this._collideDebug){ + this.ellipse(intersectionX,intersectionY,10,10); + } + + if(calcIntersection){ + intersection = { + "x":intersectionX, + "y":intersectionY + } + return intersection; + }else{ + return true; + } + } + if(calcIntersection){ + intersection = { + "x":false, + "y":false + } + return intersection; + } + return false; +} + + +// p5.vector version of collideLineLine +p5.prototype.collideLineLineVector = function(p1, p2, p3, p4, calcIntersection){ + return p5.prototype.collideLineLine(p1.x, p1.y, p2.x, p2.y, p3.x, p3.y, p4.x, p4.y, calcIntersection); +} + +p5.prototype.collideLineRect = function(x1, y1, x2, y2, rx, ry, rw, rh, calcIntersection) { + + // check if the line has hit any of the rectangle's sides. uses the collideLineLine function above + var left, right, top, bottom, intersection; + + if(calcIntersection){ + left = this.collideLineLine(x1,y1,x2,y2, rx,ry,rx, ry+rh,true); + right = this.collideLineLine(x1,y1,x2,y2, rx+rw,ry, rx+rw,ry+rh,true); + top = this.collideLineLine(x1,y1,x2,y2, rx,ry, rx+rw,ry,true); + bottom = this.collideLineLine(x1,y1,x2,y2, rx,ry+rh, rx+rw,ry+rh,true); + intersection = { + "left" : left, + "right" : right, + "top" : top, + "bottom" : bottom + } + }else{ + //return booleans + left = this.collideLineLine(x1,y1,x2,y2, rx,ry,rx, ry+rh); + right = this.collideLineLine(x1,y1,x2,y2, rx+rw,ry, rx+rw,ry+rh); + top = this.collideLineLine(x1,y1,x2,y2, rx,ry, rx+rw,ry); + bottom = this.collideLineLine(x1,y1,x2,y2, rx,ry+rh, rx+rw,ry+rh); + } + + // if ANY of the above are true, the line has hit the rectangle + if (left || right || top || bottom) { + if(calcIntersection){ + return intersection; + } + return true; + } + return false; +} + +// p5.vector version of collideLineRect +p5.prototype.collideLineRectVector = function(p1, p2, r, rsz, calcIntersection){ + return p5.prototype.collideLineRect(p1.x, p1.y, p2.x, p2.y, r.x, r.y, rsz.x, rsz.y, calcIntersection); +} + +p5.prototype.collidePointPoly = function(px, py, vertices) { + var collision = false; + + // go through each of the vertices, plus the next vertex in the list + var next = 0; + for (var current=0; current= py && vn.y < py) || (vc.y < py && vn.y >= py)) && + (px < (vn.x-vc.x)*(py-vc.y) / (vn.y-vc.y)+vc.x)) { + collision = !collision; + } + } + return collision; +} + +// p5.vector version of collidePointPoly +p5.prototype.collidePointPolyVector = function(p1, vertices){ + return p5.prototype.collidePointPoly(p1.x, p1.y, vertices); +} + +// POLYGON/CIRCLE +p5.prototype.collideCirclePoly = function(cx, cy, diameter, vertices, interior) { + + if (interior === undefined){ + interior = false; + } + + // go through each of the vertices, plus the next vertex in the list + var next = 0; + for (var current=0; current 0 && angle <= arcAngle / 2 && angle >= -arcAngle / 2) { + return true; + } + } + return false; +} + +// p5.vector version of collidePointArc +p5.prototype.collidePointArcVector = function(p1, a, arcRadius, arcHeading, arcAngle, buffer){ + return p5.prototype.collidePointArc(p1.x, p1.y, a.x, a.y, arcRadius, arcHeading, arcAngle, buffer); +}