| license: mit |
| // note: this file is poorly named - it can generally be ignored. | |
| // helper functions below for supporting blocks/purview | |
| function saveBlocksImages() { | |
| // generate 960x500 preview.jpg of entire canvas | |
| // TODO: should this be recycled? | |
| var offscreenCanvas = document.createElement('canvas'); | |
| offscreenCanvas.width = 960; | |
| offscreenCanvas.height = 500; | |
| var context = offscreenCanvas.getContext('2d'); | |
| // background is flat white | |
| context.fillStyle="#FFFFFF"; | |
| context.fillRect(0, 0, 960, 500); | |
| context.drawImage(this.canvas, 0, 0, 960, 500); | |
| // save to browser | |
| var downloadMime = 'image/octet-stream'; | |
| var imageData = offscreenCanvas.toDataURL('image/jpeg'); | |
| imageData = imageData.replace('image/jpeg', downloadMime); | |
| p5.prototype.downloadFile(imageData, 'preview.jpg', 'jpg'); | |
| // generate 230x120 thumbnail.png centered on mouse | |
| offscreenCanvas.width = 230; | |
| offscreenCanvas.height = 120; | |
| // background is flat white | |
| context = offscreenCanvas.getContext('2d'); | |
| context.fillStyle="#FFFFFF"; | |
| context.fillRect(0, 0, 230, 120); | |
| // pixelDensity does the right thing on retina displays | |
| var pd = this._pixelDensity; | |
| var sx = pd * mouseX - pd * 230/2; | |
| var sy = pd * mouseY - pd * 120/2; | |
| var sw = pd * 230; | |
| var sh = pd * 120; | |
| // bounds checking - just displace if necessary | |
| if (sx < 0) { | |
| sx = 0; | |
| } | |
| if (sx > this.canvas.width - sw) { | |
| sx = this.canvas.width - sw; | |
| } | |
| if (sy < 0) { | |
| sy = 0; | |
| } | |
| if (sy > this.canvas.height - sh) { | |
| sy = this.canvas.height - sh; | |
| } | |
| // save to browser | |
| context.drawImage(this.canvas, sx, sy, sw, sh, 0, 0, 230, 120); | |
| imageData = offscreenCanvas.toDataURL('image/png'); | |
| imageData = imageData.replace('image/png', downloadMime); | |
| p5.prototype.downloadFile(imageData, 'thumbnail.png', 'png'); | |
| } |
PS1 MDDN 342 2016
For the final I could not get the moving around functionality working due to time constraints as I had to add 2 - 300 level papers this semester and I am still playing catch up.
That being said, I added in some further game elements to the previous build. When you have claimed all the faces you now are presented with an end screen that shows you how long it took to finish it as well as a little fun graphic.
Enjoy!
| <head> | |
| <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js"></script> | |
| <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/addons/p5.dom.js"></script> | |
| <script language="javascript" type="text/javascript" src=".purview_helper.js"></script> | |
| <script language="javascript" type="text/javascript" src="sketch.js"></script> | |
| <style> body {padding: 0; margin: 0;} </style> | |
| </head> | |
| <body style="background-color:white"> | |
| </body> |
| var sizeW, sizeH; | |
| var faces = []; // holds the faces objects | |
| var rand1 = []; // random numbers for the Headpieces 5 options | |
| var rand2 = []; // random numbers for the mouth pieces 3 options | |
| var numFaces; // number of faces | |
| var randStyle; // flag for checking what style to draw the robots grid or random | |
| var horSliderCheck; // container to check if the hornPercentageSlider has moved. IF so update the sketch properties | |
| var hit; // flag that activates if the mouse if over a face only | |
| var r,g,b; // RGB values for the eyes and gems so they can change when player clicks mouse | |
| var timeOrigin; // Starting time of the current "game itteration" | |
| var scoreChecked; // flag to check if score is shown yet so that it does not keep counting | |
| var showScore; // variable to hold the time it took to finish the game | |
| var img1; // Hold the end screen image | |
| function preload(){ | |
| // Load the endgame image | |
| img1 = loadImage("https://scontent-syd1-1.xx.fbcdn.net/v/t1.0-9/13620844_10206813433034903_8275047245596916584_n.jpg?oh=6859c8d4404187d8709bed3118d508c8&oe=582DB551"); | |
| } | |
| function setup() { | |
| // Creating Sliders for Distributions | |
| hornPercentage = createSlider(0,100,20); | |
| hornPercentage.position(15,25); | |
| // create the main canvas | |
| createCanvas(960, 500); | |
| // Buttons to initiate new randoms without pressing the slider | |
| reorderButtonGrid = createButton('New Grid'); | |
| reorderButtonGrid.position(width-125,height-25); | |
| reorderButtonGrid.mousePressed(newRandomGrid); | |
| reorderButtonMess = createButton('New Mess'); | |
| reorderButtonMess.position(width-225,height-25); | |
| reorderButtonMess.mousePressed(newRandomMess); | |
| numFaces = random(10,100); | |
| // Sets up the hit detection to be false to begin with | |
| hit = false; | |
| // Sets up the scoreChecker to false originally | |
| scoreChecked = false; | |
| // Sets the first Origin Time to be the start of the game initially | |
| timeOrigin = millis(); | |
| // Set up Default color of eyes | |
| r = 56; | |
| g = 37; | |
| b = 20; | |
| // Setting the score value to 0 | |
| score = 0; | |
| // Sets the inital value of horSliderCheck which is the default of the slider | |
| horSliderCheck = 20; | |
| sizeW = width/10; | |
| sizeH = height/6; | |
| randStyle = true; // set to true to begin with = grid style | |
| // populating the arrays with faces and the random variables for the headpieces and mouth pieces grid config for first time print | |
| for(var i = 0; i < 5; i++){ | |
| faces[i] = []; | |
| rand1[i] = []; | |
| rand2[i] = []; | |
| for(var j = 0; j < 3; j++){ | |
| faces[i][j] = new Face(sizeW+(sizeW*i)+(sizeW*i),sizeH+(sizeH*j)+(sizeH*j),sizeW,sizeH,rand1[i][j],rand2[i][j]); | |
| rand1[i][j] = random(0,5); | |
| rand2[i][j] = random(0,3); | |
| faces[i][j].head = new headPiece(faces[i][j].x,faces[i][j].y,rand1[i][j]); | |
| faces[i][j].mouth = new mouthPiece(faces[i][j].x,faces[i][j].y,rand2[i][j]); | |
| } | |
| } | |
| noStroke(); | |
| } | |
| function draw() { | |
| // Creating visual feedback when mouse is pressed. Changes background unless over the slider section | |
| if(mouseIsPressed && ((mouseX > 160) || (mouseY > 150))){ | |
| background(92,100,40); | |
| r = random(45,61); | |
| g = random(144,160); | |
| b = random(211.227); | |
| } else { | |
| background(92,131,48); | |
| r = 56; | |
| g = 37; | |
| b = 20; | |
| } | |
| if(horSliderCheck != hornPercentage.value()){ | |
| horSliderCheck = hornPercentage.value(); | |
| if(randStyle == true){ | |
| newRandomGrid(); | |
| } else { | |
| newRandomMess(); | |
| } | |
| } | |
| if(randStyle == true){ | |
| for(var i = 0; i < 5; i++){ | |
| for(var j = 0; j < 3; j++){ | |
| // Checking that a face is in the array | |
| if(faces[i][j] != null){ | |
| faces[i][j].display(); | |
| faces[i][j].head.display(); | |
| faces[i][j].mouth.display() | |
| } | |
| // If a hit is true and the user presses down on the mouse | |
| if(hit == true && mouseIsPressed){ | |
| faces[i][j] = null; | |
| } | |
| } | |
| } | |
| } else { | |
| for(var i = 0; i < numFaces; i++){ | |
| // Checking that there is a face in the array | |
| if(faces[i] != null){ | |
| faces[i].display(); | |
| faces[i].head.display(); | |
| faces[i].mouth.display(); | |
| } | |
| // Checking to see if there is a hit on the face area | |
| if(hit == true && mouseIsPressed){ | |
| faces[i] = null; | |
| } | |
| } | |
| } | |
| fill(50); | |
| rect(0,0,160,150); | |
| fill(100); | |
| textSize(22); | |
| text("Horn Saturation",5,20); | |
| textSize(32); | |
| text("Score", 15, 100); | |
| //checkScore(randStyle); | |
| text(checkScore(randStyle)+" / "+checkTotal(randStyle), 15, 132); | |
| if(checkScore(randStyle) == checkTotal(randStyle)){ | |
| // DEBUG : println("you won!"); | |
| image(img1,width/2,height/2-30); | |
| fill(50); | |
| rectMode(CENTER); | |
| rect(width/2,height/2,400,200); | |
| rectMode(CORNER); | |
| fill(100); | |
| textSize(40); | |
| text("Congratulations!",width/2-180,200); | |
| textSize(30); | |
| text("It took you",width/2-180,240); | |
| if(scoreChecked == false){ | |
| scoreChecked = true; | |
| showScore = Math.ceil((Math.ceil(millis()) - Math.ceil(timeOrigin))/1000); | |
| } | |
| text(showScore,width/2-180,270); | |
| text("Seconds to get em all",width/2-180,300); | |
| } | |
| } | |
| function initiateNewRandom(){ | |
| //Resets the timeOrigin to be the start of the new "game" as well as scoreChecked | |
| timeOrigin = millis(); | |
| scoreChecked = false; | |
| println(checkHorns+" "+hornPercentage.value()); | |
| // New random set of faces for grid configuration | |
| if(randStyle == true){ | |
| for(var i = 0; i < 5; i++){ | |
| rand1[i] = []; | |
| rand2[i] = []; | |
| faces[i] = []; | |
| for(var j = 0; j < 3; j++){ | |
| faces[i][j] = new Face(sizeW+(sizeW*i)+(sizeW*i),sizeH+(sizeH*j)+(sizeH*j),sizeW,sizeH,rand1[i][j],rand2[i][j]); | |
| rand1[i][j] = random(0,5); | |
| rand2[i][j] = random(0,3); | |
| //This section checks to see what the hornPercentage slider is set to and increases the chance for the headpiece to be horns instead | |
| var checkHorns = random(0,100); | |
| if(checkHorns <= hornPercentage.value()){ | |
| rand1[i][j] = 4.5; // the value that will generate horns as its >4 && <5 | |
| } // else it just goes on as normal | |
| faces[i][j].head = new headPiece(faces[i][j].x,faces[i][j].y,rand1[i][j]); | |
| faces[i][j].mouth = new mouthPiece(faces[i][j].x,faces[i][j].y,rand2[i][j]); | |
| } | |
| } | |
| } else { | |
| // New number of random faces for random configuration | |
| numFaces = random(10,100); | |
| // This is for printing it out in random positions within the constrains of the screen depending on the size of the screen and face | |
| for(var i = 0; i < numFaces; i++){ | |
| rand1[i] = random(0,5); | |
| rand2[i] = random(0,3); | |
| //This section checks to see what the hornPercentage slider is set to and increases the chance for the headpiece to be horns instead | |
| var checkHorns = random(0,100); | |
| if(checkHorns <= hornPercentage.value()){ | |
| rand1[i] = 4.5; // the value that will generate horns as its >4 && <5 | |
| } // else it just goes on as normal | |
| faces[i] = new Face(random(sizeW/4,width-sizeW/4),random(sizeH/4,height-sizeH/4),sizeW,sizeH,rand1[i],rand2[i]); | |
| faces[i].head = new headPiece(faces[i].x,faces[i].y,rand1[i]); | |
| faces[i].mouth = new mouthPiece(faces[i].x,faces[i].y,rand2[i]); | |
| } | |
| } | |
| } | |
| // Function for generating a new face | |
| function Face(faceX, faceY, faceW, faceH,randHead,randMouth){ | |
| this.x = faceX; | |
| this.y = faceY; | |
| this.w = faceW; | |
| this.h = faceH; | |
| this.rand1 = randHead; | |
| this.rand2 = randMouth; | |
| this.display = function(){ | |
| // If mouse is over a head then trigger action | |
| if(mouseX > (this.x-this.w/2) && mouseX < (this.x-this.w/2+this.w) && mouseY > this.y-this.h/2 && mouseY < this.y-this.h/2+this.h){ | |
| hit = true; | |
| println("Hit a head"+" "+hit); | |
| } else { | |
| hit = false; | |
| println(hit); | |
| } | |
| this.leftEye = new Eye(this.x-1*(this.w/3), this.y-1*(this.h/4), this.w/4); | |
| this.rightEye = new Eye(this.x+1*(this.w/3), this.y-1*(this.h/4), this.w/4); | |
| fill(54,57,66); | |
| rect(this.x-this.w/2, this.y-this.h/2,this.w,this.h); | |
| rect(this.x-(sizeW/8*2),this.y+(sizeH/2),sizeW/8*4,sizeH/8*2); | |
| this.leftEye.update(mouseX,mouseY); | |
| this.leftEye.display(); | |
| this.rightEye.update(mouseX,mouseY); | |
| this.rightEye.display(); | |
| }; | |
| } | |
| // For generting a headpiece for the face | |
| function headPiece(headX, headY, type){ | |
| this.x = headX; | |
| this.y = headY; | |
| this.type = type; | |
| this.display = function(){ | |
| if(this.type > 4 && this.type <= 5 && hornPercentage.value() < 1){ | |
| this.type = random(0,4); // If the horn Percentage is less than 1 make it impossible to be a horn | |
| } | |
| push(); | |
| // Double triangle head display | |
| if(this.type > 0 && this.type <= 1){ | |
| fill(142,40,0); | |
| triangle(this.x,this.y-(sizeH/25),this.x-(sizeW/4*3),this.y-(sizeH/4*3),this.x+(sizeW/4*3),this.y-(sizeH/4*3)); | |
| } | |
| // Simple square head display | |
| if(this.type > 1 && this.type <= 2){ | |
| fill(0); | |
| rect(this.x-(sizeW/4*3),this.y-(sizeH/4*3),sizeW/4*6,sizeH/4*1.5,sizeW/4); | |
| } | |
| // Triangle with "gem" display | |
| if(this.type > 2 && this.type <= 3){ | |
| fill(142,40,0); | |
| triangle(this.x,this.y-(sizeH/25),this.x-(sizeW/4*3),this.y-(sizeH/4*3),this.x+(sizeW/4*3),this.y-(sizeH/4*3)); | |
| fill(0); | |
| ellipse(this.x,this.y-(sizeH/3),sizeW/3,sizeH/3); | |
| fill(r,g,b); | |
| ellipse(this.x,this.y-(sizeH/3),sizeW/4,sizeH/4); | |
| } | |
| // Square with 2 "gems" display | |
| if(this.type > 3 && this.type <= 4){ | |
| fill(0); | |
| rect(this.x-(sizeW/4*3),this.y-(sizeH/4*3),sizeW/4*6,sizeH/4*1.5,sizeW/4); | |
| fill(r,g,b); | |
| ellipse(this.x-sizeW/4*1.75,this.y-(sizeH/3*1.75),sizeW/3,sizeH/3); | |
| fill(41,73,8); | |
| ellipse(this.x-sizeW/4*1.75,this.y-(sizeH/3*1.75),sizeW/4,sizeH/4); | |
| fill(r,g,b); | |
| ellipse(this.x+sizeW/4*1.75,this.y-(sizeH/3*1.75),sizeW/3,sizeH/3); | |
| fill(41,73,8); | |
| ellipse(this.x+sizeW/4*1.75,this.y-(sizeH/3*1.75),sizeW/4,sizeH/4); | |
| } | |
| // 2 "Horns" display | |
| if(this.type > 4 && this.type <= 5){ | |
| fill(76,28,28); | |
| triangle(this.x,this.y-(sizeH/8*2),this.x-(sizeW/8*6),this.y-(sizeH/8*2),this.x-(sizeW/8*6),this.y-(sizeH/8*12)); | |
| triangle(this.x,this.y-(sizeH/8*2),this.x+(sizeW/8*6),this.y-(sizeH/8*2),this.x+(sizeW/8*6),this.y-(sizeH/8*12)); | |
| } | |
| pop(); | |
| }; | |
| } | |
| // For generating and eye, the update function allows the eye to "follow" the mouse | |
| function Eye(eyeX, eyeY, eyeSize) { | |
| this.x = eyeX; | |
| this.y = eyeY; | |
| this.size = eyeSize; | |
| this.angle = 0; | |
| this.update = function(ax, ay){ | |
| this.angle = atan2(ay - this.y, ax - this.x); | |
| }; | |
| this.display = function(){ | |
| push(); | |
| translate(this.x,this.y); | |
| fill(r,g,b); | |
| ellipse(0,0, this.size, this.size); | |
| rotate(this.angle); | |
| fill(216,201,168); | |
| ellipse(this.size/4,0,this.size/2,this.size/2); | |
| pop(); | |
| }; | |
| } | |
| function mouthPiece(mX, mY, type){ | |
| this.x = mX; | |
| this.y = mY; | |
| this.type = type; | |
| this.display = function(){ | |
| push(); | |
| // Mouth shape similar to first itteration | |
| if(this.type>0 && this.type <= 1){ | |
| fill(76,28,28); | |
| quad(this.x,this.y-(sizeH/8*1),this.x-(sizeW/8*2.5),this.y+(sizeH/8*1.5),this.x,this.y+(sizeH/8*6),this.x+(sizeW/8*2.5),this.y+(sizeH/8*1.5)); | |
| fill(255,176,58); | |
| quad(this.x,this.y-(sizeH/8*1),this.x-(sizeW/8*1.5),this.y+(sizeH/8*1),this.x,this.y+(sizeH/8*5.5),this.x+(sizeW/8*1.5),this.y+(sizeH/8*1)); | |
| } | |
| // Sieve type mouthpiece | |
| if(this.type>1 && this.type <= 2){ | |
| fill(76,28,28); | |
| ellipse(this.x,this.y+(sizeH/8*2.5),sizeW/8*6,sizeH/8*6); | |
| fill(255,176,58); | |
| for(var i = 0; i < 10; i++){ | |
| ellipse(random(this.x-(sizeW/8*2),this.x+(sizeW/8*2)),random(this.y+(sizeH/8),this.y+(sizeH/8*4)),sizeW/8,sizeH/8); | |
| } | |
| } | |
| // Square with teeth | |
| if(this.type>2 && this.type <= 3){ | |
| fill(76,28,28); | |
| rect(this.x-(sizeW/8*2.5),this.y+(sizeH/8*1.5),sizeW/8*5,sizeH/8*1); | |
| rect(this.x-(sizeW/8*2.5),this.y+(sizeH/8*3.5),sizeW/8*5,sizeH/8*1); | |
| fill(255,176,58); | |
| rect(this.x-(sizeW/8*2),this.y+(sizeH/8*2.5),sizeW/16,sizeH/8*1); | |
| rect(this.x-(sizeW/8*1),this.y+(sizeH/8*2.5),sizeW/16,sizeH/8*1); | |
| rect(this.x-(sizeW/8*0.25),this.y+(sizeH/8*2.5),sizeW/16,sizeH/8*1); | |
| rect(this.x+(sizeW/8*0.5),this.y+(sizeH/8*2.5),sizeW/16,sizeH/8*1); | |
| rect(this.x+(sizeW/8*1.5),this.y+(sizeH/8*2.5),sizeW/16,sizeH/8*1); | |
| } | |
| pop(); | |
| }; | |
| } | |
| // function to check the score by checking to see which values in the arrays are null. This is because | |
| // when it is the mess randomisation, there could be faces behind others who get clicked and would count | |
| // as 2 hits+ instead of just the 1 | |
| function checkScore(x){ | |
| this.type = x; | |
| var score = 0; | |
| // the style is the grid | |
| if(this.type == true){ | |
| for(var i = 0; i < 5; i++){ | |
| for(var j = 0; j < 3; j++){ | |
| if(faces[i][j] == null){ | |
| score++; | |
| } | |
| } | |
| } | |
| } | |
| if(this.type == false){ | |
| for(var k = 0; k < numFaces; k++){ | |
| if(faces[k] == null){ | |
| score++; | |
| } | |
| } | |
| } | |
| return score; | |
| } | |
| // Function that returns the total faces available depending on the type of randoms created | |
| function checkTotal(x){ | |
| this.type = x; | |
| var total; | |
| var y; | |
| if(type == true){ | |
| total = 15; | |
| } | |
| if(type == false){ | |
| // find the number of faces. Have to use Math.ceil as the array function adds a face in even a small fraction of the number. | |
| y = Math.ceil(numFaces); | |
| total = y; | |
| } | |
| return total; | |
| } | |
| // Initiates a new random grid | |
| function newRandomGrid(){ | |
| randStyle = true; | |
| initiateNewRandom(); | |
| } | |
| // Initiates a new random mess | |
| function newRandomMess(){ | |
| randStyle = false; | |
| initiateNewRandom(); | |
| } | |
| function keyTyped() { | |
| if (key == '!') { | |
| saveBlocksImages(); | |
| } | |
| } |
