Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	The Picture Puzzle Game
ID	4546853234868224
Created	8 years ago, 1485780887676
Updated	8 years ago, 1485960696568
Code	//Subscribe to me here // http://bit.ly/292w7sv /** Thank you all so much for your support!! Thanks for the feedbacks, and thanks for checking this out! * * * * Huge credit to Talal Zulfiqar for the pictures! Links to the programs: / //A Sleepy Valley: //https://www.khanacademy.org/computer-programming/a-sleepy-valley/6164381834477568 //Night at a Campsite: //https://www.khanacademy.org/computer-programming/night-by-a-campsite/5142487742087168 //Also credit to Jacob for designing the movement of the pieces in the scene transition //Also credit to T#1B12 proponent for advising the scene transition pieces reduce in size instead of increase imageMode(CENTER); var pieces=[]; var choice=2; var solved=false; var scene='menu'; textFont(createFont('Trebuchet MS Bold')); textAlign(CENTER,CENTER); rectMode(CORNER); var got=false; var birdandcursor = function(x, y, s, v, w, z) { pushMatrix(); translate(x, y); translate(0, 0); scale(s); scale(1); fill(v, w, z); rect(39, 111, 20, 9, 12); fill(0, 0, 0, 50); rect(44, 111, 7, 9, 12); fill(158, 81, 81); rect(71, 145, 7, 26, 12); rect(81, 145, 7, 26, 12); rect(67, 164, 26, 7, 12); fill(26, 26, 26); arc(85, 127, 59, 58, 0, 180); rect(64, 117, 15, 39); rect(56, 117, 13, 39, 120); ellipse(64, 114, 31, 29); fill(61, 61, 61); arc(89, 136, 29, 19, 0, 180); fill(255, 255, 255); ellipse(62, 113, 10, 10); popMatrix(); }; //the bird (from A Sleepy Valley, my own project) var x = 0; var y = 0; var shpe = 0; //the variables for the cloud var campsite= function() { background(21, 122, 117); //the sky //the different shades in the sky { fill(76, 255, 210, 20); //the shape of it (lighter part) beginShape(); curveVertex(133, 12); curveVertex(172, 44); curveVertex(85, 32); curveVertex(227, 3); curveVertex(231, 24); curveVertex(317, 40); curveVertex(236, 67); curveVertex(173, 71); endShape(); fill(0, 255, 187, 20); //the shape of it beginShape(); curveVertex(-1, -77); curveVertex(172, 44); curveVertex(70, 34); curveVertex(260, -12); curveVertex(260, 14); curveVertex(338, 40); curveVertex(216, 73); curveVertex(65, -27); endShape(); } noStroke(); //no outlines var r = random(0, 100); var r2 = random(0, 100); //the star twinkling fill(255, 255, 255, 120 + r); ellipse(207, 43, 3, 3); ellipse(125, 58, 3, 3); ellipse(138, 21, 2, 2); ellipse(293, 43, 3, 3); ellipse(272, 53, 2, 2); fill(255, 255, 255, 120 + r2); ellipse(10, 29, 3, 3); ellipse(187, 29, 4, 4); ellipse(151, 40, 2, 2); ellipse(238, 60, 1, 1); ellipse(87, 29, 3, 3); //the stars fill(255, 255, 255, 30); ellipse(237, 27, 39, 39); //the light of the moon fill(200, 240, 238); ellipse(237, 27, 30, 30); //the moon fill(102, 186, 179); ellipse(230, 23, 10, 10); ellipse(232, 35, 5, 5); fill(148, 209, 203); ellipse(239, 30, 5, 5); ellipse(245, 23, 7, 7); //the moon shadows fill(0, 0, 0, 30); arc(189, 250, 161, 273, 175, 397); arc(49, 274, 161, 494, 175, 397); arc(338, 250, 161, 349, 175, 397); //the mountains around fill(22, 97, 91); rect(255, 167, 25, 88, 12); triangle(321, 205, 215, 205, 266, 135); triangle(311, 166, 222, 165, 266, 86); //the trees at the background triangle(371, 266, 295, 262, 330, 225); triangle(110, 287, 237, 255, 199, 211); //the rocks //the clouds, from my cityscape program! { fill(0, 0, 0, 40); //the complex, yet funky cloud beginShape(); curveVertex(133+x, 12+y); curveVertex(172+x+shpe, 44+y); curveVertex(85+x+shpe, 32+y); curveVertex(227+x, 3+y); curveVertex(231+x, 24+y); curveVertex(317+x+shpe, 40+y); curveVertex(236+x+shpe, 67+y); curveVertex(173+x, 71+y); endShape(); //animation x ++; //repition and different cloud shapes if(x > 400) { x = random(-1020, 40); y = random(-10, 100); shpe = random(-100, 100); } } fill(11, 122, 92); ellipse(50, 135, 80, 80); //the leaves behind stroke(125, 74, 74); strokeWeight(17); //the line settings line(12, 157, 49, 182); line(84, 157, 49, 182); //the branches noStroke(); //no more outlines fill(125, 74, 74); rect(40, 130, 23, 125); fill(255, 255, 255, 30); rect(52, 130, 12, 125); //the tree bark fill(50, 186, 150); ellipse(92, 150, 50, 50); ellipse(8, 150, 50, 50); //the leaves on either side of the tree fill(0, 0, 0,30); arc(92, 150, 50, 50, 90, 270); arc(8, 150, 50, 50, 90, 270); fill(40, 171, 138); ellipse(50, 106, 80, 80); //the leaves ahead fill(0, 0, 0,30); arc(50, 106, 80, 80,90,270); //the darker parts fill(1, 115, 83); rect(0, 245, 400, 200); //the land fill(0, 0, 0,30); rect(0, 302, 400, 100); rect(0, 356, 400, 100); //the depth fill(0, 0, 0,60); bezier(-22, 258, 176, 244, 113, 143, 89, 258); //the flat shadow fill(112, 112, 112); rect(33,238,18,12,12); //the rock ahead of the tree fill(31, 171, 19); bezier(44, 258, 143, 12, 113, 143, 194, 258); //the tent fill(43, 196, 29); bezier(134, 258, 121, 44, 123, 143, 193, 258); //the lighter part fill(0, 0, 0,80); bezier(71, 258, 140, 266, 106, 142, 181, 258); fill(5, 5, 5); bezier(78, 258, 140, 266, 106, 149, 176, 258); //the opening fill(16, 112, 19); rect(116, 94, 6, 29, 12); fill(255, 255, 255, 80); rect(119, 95, 3, 26, 12); //the hook fill(92, 51, 51); rect(344, -2, 71, 400); //the tree bark upclose fill(0, 0, 0,20); rect(389, -2, 71, 400); //the darker effect fill(255, 255, 0, 10); rect(344, -2, 29, 400); rect(344, -2, 7, 400); //the light effect fill(89, 44, 44); triangle(355, 326, 355, 300, 205, 300); fill(0, 0, 0, 40); triangle(355, 326, 355, 311, 205, 300); //the branch sticking out fill(0, 0, 0, 100); triangle(354, 414, 355, 326, 344, 324); //the branches shadow fill(13, 110, 57); ellipse(367, 33, 60, 60); fill(0, 158, 74); ellipse(323, -8, 90, 90); fill(10, 140, 71); ellipse(403, -8, 90, 90); //the leaves birdandcursor(260, 198, 0.6, 255, 255, 0); //the bird sleeping and the cursors strokeWeight(34); stroke(0, 0, 0, 60); line(98, 294, 150, 327); line(91, 302, 143, 331); //the log's shadow stroke(87, 46, 46); line(98, 287, 158, 324); //the log strokeWeight(3); stroke(71, 36, 36); line(88, 281, 158, 324); line(88, 295, 128, 319); //the lines on the log noStroke(); fill(66, 33, 33); ellipse(159, 325, 28, 28); //the hole in the log { //The shape of the flame (change this or create another function for new shapes) var circularFlame=function(vertex){ //This function overwrites vertex with our own animated vertex function. beginShape(); var y=180; //RainDrop Shape while(y--){ var i =y2; vertex(207+cos(i)17+sin(i2)8,235+sin(i)42); } endShape(); }; //Array containing smoke data var smoke=[]; //"Wiggle" Effect (simulates light distortion due to heat), but no smoke var nonSmokeyVertexFunction=function(x,y) { var fc=frameCount7;//Can be changed to a fraction of frameCount, etc vertex( x+cos(fc50+(x-y/30-200)20), y+sin(fc+(y-x/3-200)20)3 ); }; //Draw smoke if vertex exceeds bound AND apply "Wiggle" Effect var smokeyVertexFunction= function(x,y,c) { c=c\|\|3.1; var fc=frameCount7;//Can be changed to a fraction of frameCount, etc var t=[x+cos(fc460+(x-y/30-200)20), y+sin(fc+(y-x/3-200)20)3];vertex.apply( this,t); //Create smoke if flame 'flickers' in every 59th frame if(dist(t[0],t[1],x,y)>c){ if(smoke.length<10&&(fc+10)%60>58){ smoke.push([t[0],t[1],random(10)+10]); } } }; //Takes a vertex-drawn shape as input (not bezierVertex yet, unfortunatly) var flame=function(beziershape,centerX,centerY) { strokeWeight(10); stroke(0,0,0,80); fill(255, 100, 0); pushMatrix(); translate(centerX,centerY); translate(-centerX,-centerY); //Inner Flame (determines smoke) beziershape(nonSmokeyVertexFunction); popMatrix(); strokeWeight(10); stroke(255, 170, 0); fill(255, 221, 0); pushMatrix(); translate(centerX,centerY+13); scale(0.5); translate(-centerX,-centerY); //Inner Flame (determines smoke) beziershape(smokeyVertexFunction); popMatrix(); }; pushMatrix(); translate(206, 250); scale(1,0.5); translate(-206, -240); flame(circularFlame, 206, 240); popMatrix(); } //Sequel Maker's work, and he made it look so, so easy! :) noStroke(); fill(148, 80, 80); rect(177, 265, 59, 12, 12); fill(128, 73, 73); rect(199, 274, 59, 12, 12); fill(117, 64, 64); rect(159, 274, 59, 12, 12); //the woods for fire fill(89, 44, 44); triangle(355, 176, 355, 210, 263, 178); fill(0, 0, 0, 40); triangle(355, 191, 355, 209, 263, 178); //the smaller branch sticking out fill(0, 0, 0, 100); triangle(354, 246, 355, 209, 344, 206); //the smaller branches shadow fill(168, 84, 84); rect(296, 172, 3, 7, 12); rect(302, 172, 3, 7, 12); rect(293, 178, 16, 3, 12); //the legs of the bird { fill(255, 0, 0); arc(315, 144, 9, 9, 12, 200); fill(255, 87, 87); arc(316, 145, 9, 9, 200, 357); //the beak } fill(31, 31, 31); rect(296, 133, 18, 29, 12); //the basic bird (the upper one) arc(296, 152, 36, 46, 11, 163); //the lower body stroke(31, 31, 31); strokeWeight(6); line(263, 161, 283, 160); line(258, 170, 284, 164); //its tail noStroke(); fill(255, 255, 255); rect(305, 139, 5, 8, 12); //the eye noFill(); stroke(0, 130, 15); strokeWeight(6); { pushMatrix(); rotate(2); beginShape(); curveVertex(12, 12); curveVertex(18, 321); curveVertex(-14, 422); curveVertex(44, 12); //the stick for the flower endShape(); stroke(255, 255, 0, 70); strokeWeight(2); beginShape(); curveVertex(12, 12); curveVertex(20, 321); curveVertex(-11, 422); curveVertex(12, 12); //the lighter part endShape(); pushMatrix(); rotate(-42); noStroke(); fill(212, 0, 0); ellipse(-197, 246, 46, 15); ellipse(-196, 246, 15, 46); //the petal fill(0, 0, 0, 30); ellipse(-197, 246, 28, 8); ellipse(-196, 246, 8, 28); fill(0, 0, 0, 20); ellipse(-197, 246, 35, 13); ellipse(-196, 246, 13, 35); //the texture fill(255, 102, 0); ellipse(-197, 246, 15, 15); //the inner part fill(0, 0, 0, 30); arc(-197, 246, 15, 15, 110, 282); //the shadow ellipse(-197, 246, 13, 13); ellipse(-197, 246, 7, 7); ellipse(-197, 246, 2, 2); //the inner part popMatrix(); popMatrix(); //let the flower stay away from the screen } //the flower }; campsite(); var campsiteimg=get(0,0,400,400); var sky=function(){ noStroke(); fill(0, 19, 77); rect(-3,0,442,187); //the sky fill(0, 0, 0,50); rect(-3,0,442,122); //the darker parts rect(-3,0,442,77); //the darker parts rect(-3,0,442,36); //the darker parts }; //the sky var moon=function(){ noStroke(); fill(255, 255, 255,60); ellipse(372,34,40,40); fill(255, 255, 255,20); ellipse(372,34,59,59); fill(255, 255, 255,40); ellipse(372,34,50,50);//the bright sky fill(255, 255, 255); ellipse(372,34,30,30); //the main moon fill(199, 197, 199); ellipse(365,34,7,7); fill(194, 194, 194); ellipse(378,39,10,10); fill(184, 184, 184); ellipse(368,44,5,5); fill(222, 222, 222); ellipse(374,31,5,5); fill(224, 224, 224); ellipse(371,24,7,6);//the main moon fill(5, 5, 5,30); arc(372,34,30,30,-124,56); //the shadow }; //the moon var stars=function(){ noStroke(); for(var x3=39;x3<312;x3+=176){ for(var n2=-45;n2<-3;n2+=99){ fill(255, 255, 255,130); ellipse(x3+55,n2+55,3,3); } } //some more stars { var c=random(0,195); fill(255, 255, 255,c); ellipse(54,27,2,2); ellipse(238,5,2,2); ellipse(125,57,2,2); ellipse(183,37,2,2); ellipse(224,67,2,2); //some faint, blinking stars } { fill(255, 255, 255,160); ellipse(12,59,2,2); ellipse(134,75,2,2); ellipse(37,20,2,2); ellipse(156,33,2,2); ellipse(187,41,2,2); ellipse(293,20,2,2); } //some random-ish stars { fill(255, 255, 255,160); ellipse(335,5,4,4); ellipse(101,59,4,4); ellipse(274,31,4,4); } //some random-ish stars { var x=random(0,7); var y=random(0,3); fill(255, 255, 255); ellipse(random(0,400),random(0,150),x,y); //the far away lights } //the flashing part of the sky }; //the features on the sky var clouds=function(x,y,s,t){ pushMatrix(); translate(x,y); translate(0,0); scale(s); scale(1); var r=t; fill(133, 133, 133,t); rect(12,34,18,13,105); rect(26,38,18,13,105); rect(12,45,18,13,105); rect(1,44,18,13,105); rect(4,37,18,13,105); popMatrix(); }; //the clouds var tree=function(x,y,s){ pushMatrix(); translate(x,y); translate(0,0); scale(s); scale(1.0); fill(54, 25, 25); rect(23,110,6,15,78); fill(44, 189, 44); ellipse(26,106,13,13); fill(0, 0, 0,70); arc(26,106,13,12,85,260); //the basic tree popMatrix(); }; //the trees var bigtrees=function(x,y,s,t,c,n){ pushMatrix(); translate(x,y); translate(0,0); scale(s); scale(1); var c=color(t,c,n); fill(69, 32, 32); rect(23,57,13,81,120); rect(23,98,30,12,120); fill(0, 0, 0,50); rect(23,57,8,81,120); fill(c); rect(12,12,35,75,120); rect(44,92,28,21,120); fill(0, 0, 0,50); rect(12,17,23,66,120); rect(44,92,19,21,120); fill(247, 212, 247,100); rect(41,23,5,54,84); rect(67,98,4,7,120); popMatrix(); }; //the big trees var mountain=function(){ var side=true; noStroke(); fill(87, 55, 55); triangle(-90,227,221,251,42,82); fill(0, 0, 0,50); triangle(-90,224,140,246,42,82); fill(0, 0, 0,30); triangle(-24,233,69,239,4,168); fill(0, 0, 0,120); triangle(-24,232,222,251,-17,312); if(side===true){ tree(13,12,0.8); tree(56,38,1.0); tree(-9,39,1.0); tree(18,51,1.2); } }; //the mountain function var mountain2=function(){ var side=true; noStroke(); fill(89, 60, 60); triangle(495,252,104,221,292,88); fill(0, 0, 0,30); triangle(93,227,257,230,294,87); fill(0, 0, 0,70); triangle(93,221,238,254,258,233); if(side===true){ tree(252,45,0.6); tree(183,75,1.0); tree(207,43,0.8); tree(153,75,1.1); } }; //the second mountain var bird=function(x,y,s,v,w,z){ pushMatrix(); translate(x,y); translate(0,0); scale(s); scale(1); fill(v,w,z); rect(39,111,20,9,12); fill(0, 0, 0,50); rect(44,111,7,9,12); fill(158, 81, 81); rect(71,145,7,26,12); rect(81,145,7,26,12); rect(67,164,26,7,12); fill(26, 26, 26); arc(85,127,59,58,0,180); rect(64,117,15,39); rect(56,117,13,39,120); ellipse(64,114,31,29); fill(61, 61, 61); arc(89,136,29,19,0,180); fill(255, 255, 255); ellipse(62,113,10,10); if(mouseIsPressed&&mouseX>330&&mouseX<347&&mouseY>190&&mouseY<204){ noStroke(); fill(26, 26, 26); ellipse(62,113,11,11); noFill(); stroke(255, 255, 255); strokeWeight(2); arc(62,113,10,10,10,187); var x = cos(millis()0.6); var y = cos(millis()+44); var x2 = cos(millis()0.7); var y2 = cos(millis()+55); var x3 = cos(millis()1.0); var y3 = cos(millis()+90); fill(255, 255, 255,160); textSize(33); text("z",x+12,y,120,120); textSize(27); text("z",x2+25,y2+32,120,120); textSize(25); text("z",x3+40,y3+60,120,120); noStroke(); } //sleepy pigeon! if(mouseIsPressed&&mouseX>344&&mouseX<368&&mouseY>204&&mouseY<218){ noStroke(); fill(26, 26, 26); arc(89,136,29,19,0,180); pushMatrix(); rotate(-25); fill(61, 61, 61); arc(24,155,29,19,0,180); popMatrix(); } //flappy pigeon! popMatrix(); }; //the bird var closebymountain=function(){ noStroke(); fill(43, 21, 21); triangle(-78,209,209,465,-170,377); fill(0, 0, 0,100); triangle(-78,209,209,596,-143,377); //the mountain on left fill(43, 21, 21); triangle(180,412,381,412,286,289); triangle(365,492,473,246,286,289); fill(255, 255, 255,20); triangle(709,408,414,261,288,289); }; //the foreground var farmountains=function(){ fill(51, 58, 84); triangle(164,128,233,204,66,217); fill(0, 0, 0,18); triangle(164,128,177,204,66,217); //the mountain in the middle fill(105, 72, 72); triangle(384,93,486,204,261,225); fill(255, 255, 255,20); triangle(384,93,347,204,261,225);//the mountain on the right }; //the far-away background var house=function(x,y,s,r){ pushMatrix(); translate(x,y); translate(0,0); scale(s); scale(1); rotate(r); noStroke(); fill(0, 0, 0,100); triangle(90,317,258,260,183,250); //the shadow fill(64, 64, 64); rect(175,231,76,27,0); fill(255, 255, 255,20); rect(214,231,37,27,0); rect(236,231,15,27,0); //the grey part fill(0, 0, 0,90); rect(175,214,76,24); //shadow fill(125, 21, 21); rect(168,209,90,24,12); fill(255, 255, 255,20); rect(210,209,48,24,12); rect(228,209,30,24,12); //the red rectangle fill(94, 94, 94); triangle(180,209,248,209,212,170); fill(0, 0, 0,50); triangle(180,209,213,209,212,170); fill(255, 255, 255,50); triangle(247,209,238,209,212,170); //the top fill(0, 190, 224); ellipse(212,191,12,12); fill(255, 255, 255,100); arc(212,191,12,12,-90,91); //the window fill(23, 23, 23); rect(168,252,90,12,12); fill(255, 255, 255,20); rect(208,252,50,12,12); rect(232,252,26,12,12); //the platform for the house fill(61, 25, 25); rect(205,238,18,14); fill(255, 255, 255,10); rect(215,238,8,14); //the door fill(112, 112, 112); rect(209.5,161,5,12); fill(0, 0, 0,40); rect(209.5,161,2,12); fill(26, 26, 26); ellipse(212,158,12,12); fill(255, 255, 255,40); arc(212,158,12,12,-90,91); //the light if(mouseIsPressed&&mouseX>219&&mouseX<233&&mouseY>161&&mouseY<180){ fill(255, 221, 0); ellipse(212,158,12,12); fill(255, 255, 255,100); arc(212,158,12,12,-90,91); //the light fill(255, 221, 0,40); ellipse(212,158,42,42); ellipse(212,158,92,92); //the effect fill(255, 255, 0,20); triangle(90,316,247,263,166,264); //the shadow fill(255, 255, 0,35); triangle(237,209,213,209,212,170); fill(255, 255, 0,35); triangle(247,209,238,209,212,170); //lighter part on the top of house } popMatrix(); }; //the nice little hut var paperandpen=function(){ pushMatrix(); fill(209, 209, 209); quad(217,412,237,476,120,476,146,412); //the paper fill(48, 48, 48); ellipse(152,448,17,8); ellipse(144,455,11,5); //the ink spots fill(0, 0, 0,40); quad(163,412,237,476,120,476,146,412); //the shadow pushMatrix(); rotate(24); fill(51, 29, 29); rect(261,352,32,34); ellipse(277,387,32,12); //the shadow of the ink pot popMatrix(); //the quill and the ink pot? fill(158, 0, 0); rect(91,405,32,34); fill(255, 255, 255,50); rect(111,405,12,34); //the body of the ink pot fill(158, 0, 0); ellipse(107,439,32,12); fill(255, 255, 255,50); arc(111,439,22,11,-88,90); //the lower part of the inkpot fill(115, 0, 0); ellipse(107,407,32,12); //the inner side of the inkpot pushMatrix(); rotate(12); fill(3, 3, 3); rect(187,329,5,53,12); //the stick fill(82, 82, 82); arc(189,316,30,42,-3,180); fill(97, 97, 97); arc(189,305,30,42,-3,180); fill(117, 117, 117); arc(189,294,30,42,-3,180); fill(138, 138, 138); arc(189,286,30,42,-35,223);//the feathers fill(3, 3, 3); rect(188,286,2.2,53,12); //the line inside the feathers popMatrix(); }; //the paper and the pen infront of the place var sculptures=function(){ noStroke(); //the one smiling fill(0, 0, 0,70); ellipse(374,429,40,19); //the shadow fill(179, 98, 98); ellipse(369,411,40,40); //the darker part fill(212, 134, 134); ellipse(371,409,35,35); //the lighter part of the face fill(0, 0, 0); ellipse(361,412,6,6); ellipse(378,412,6,6); //the eyes noFill(); stroke(5, 5, 5); strokeWeight(1); arc(370,420,10,10,39,170); //the little smile noStroke(); //the one just looking at you fill(0, 0, 0,90); ellipse(314,434,36,17); ellipse(314,434,45,22); //the shadow fill(20, 20, 20); rect(300,370,29,44,129); fill(77, 77, 77,70); rect(317,375,12,35,129); //the body (you guess what is going on?) fill(179, 98, 98); ellipse(314,359,40,40); //the darker part fill(212, 134, 134); ellipse(315,357,35,35); //the lighter part of the face on the statue fill(0, 0, 0,160); ellipse(322,358,6,6); ellipse(311,358,6,6); //the eyes noFill(); stroke(5, 5, 5); strokeWeight(1); line(324,368,310,368); //the straight mouth noStroke(); fill(0, 84, 110); rect(301,314,25,29,12); fill(0, 0, 0,30); rect(305,319,20,29,2); //the hat fill(153, 153, 153); rect(307,322,17,29,2); fill(130, 130, 130); rect(307,322,8,29,2); //the paper attached to the statue fill(23, 23, 23); rect(297,335,33,12,12); fill(43, 43, 43); rect(309,335,21,12,12); //the lower part of the hat fill(20, 20, 20); rect(303,409,10,26,129); rect(316,409,10,26,129); fill(43, 43, 43); rect(307,409,6,26,129); rect(321,409,5,26,129); //the legs and the lighter part }; //the statue work scale(0.8); { background(44, 143, 51); } //the grass { sky(); stars(); moon(); //the moon } //the stars + sky + moon { clouds(12,12,1.0,100); clouds(120,12,1.2,190); clouds(230,12,0.7,120); clouds(166,12,1.0,140); clouds(285,-15,1.6,190); clouds(334,-2,1.6,170); } //the clouds! PS. the last value in them controls their transparency, for depth! :) { farmountains(); mountain2(); mountain(); } //the mountains { bird(203,122,0.25,37,233,495); } //little bird on the light of the house! { house(12,12,1.0,0); } //the hut { bigtrees(63,136,2.0, 481,32,280); fill(69, 32, 32); rect(72,319,45,23,120); fill(0, 0, 0,50); rect(72,319,45,23,120); fill(69, 32, 32); rect(67,302,16,40,120); fill(0, 0, 0,50); rect(67,302,16,40,120); fill(481, 32, 280); rect(55,264,38,49,120); fill(0, 0, 0,50); rect(55,268,21,41,120); fill(18, 5, 5); rect(117,333,12,29,12); } //the pink tree (last three vars control the colour :P) { closebymountain(); } //the close mountains { bigtrees(282,58,1.7, 77,381,-74); } //the tree bird is relaxing on, (last three vars control the colour of the beak :P) { bird(303,125,0.6 ,331,289,99); } //the bird on right { fill(0, 0, 0); rect(200,0,4,421); rect(-11,200,421,4); //the window lines fill(255, 255, 255,50); triangle(461,405,401,0,97,405); //the lighter areas fill(36, 2, 2); rect(401,0,128,515); fill(255, 255, 255,30); rect(401,0,32,515); fill(82, 26, 26); rect(0,401,401,115); //the window thing fill(82, 26, 26); triangle(499,501,401,402,281,402); triangle(499,501,401,453,281,507); //triangles creating an effect fill(102, 40, 40); triangle(499,501,401,402,99,402); //the lighter part paperandpen(); pushMatrix(); rotate(15); fill(0, 0, 0,50); rect(296,336,5,146,12); //the darker part due to the light blocked popMatrix(); pushMatrix(); rotate(30); fill(51, 28, 28); rect(231,352,41,41); fill(51, 28, 28); ellipse(251,395,43,12); //the shadow of the mug thing popMatrix(); fill(112, 112, 112); rect(16,396,42,41); fill(112, 112, 112); ellipse(37,437,43,12); fill(112, 112, 112); ellipse(37,396,43,12); fill(46, 46, 46); ellipse(37,396,33,10); fill(92, 52, 37); ellipse(37,398,23,5); //the opening noFill(); stroke(0, 0, 0,40); strokeWeight(1); arc(37,412,42,12,41,188); arc(37,423,42,12,85,188); arc(37,399,42,12,21,191); //the lines around the cup stroke(56, 56, 56); strokeWeight(6); bezier(16,429,11,456,3,378,16,407); stroke(31, 31, 31); strokeWeight(2); bezier(16,426,13,450,6,389,16.2,410); //the handle stroke(255, 255, 255,140); strokeWeight(1); bezier(34,378,71,338,6,385,27,322); bezier(31,378,60,338,-8,362,26,296); bezier(31,372,60,338,-8,362,37,272); //the steam } //the window, cup and the house from inside { sculptures(); } //the doll resetMatrix(); var valley=get(0,0,400,400); rectMode(CENTER); var images=[]; var fr = 0; var imag = function(x,y,img,line) { this.x=x; this.y=y; this.img=img; this.r=0; this.s=1; this.line = line; this.br = random(-30,30); this.speed = 1; this.xvel = (x-200)/20; }; imag.prototype.draw = function() { pushMatrix(); translate(this.x, this.y); rotate(this.r); scale(this.s); image(this.img,0,0); popMatrix(); if(frameCount>fr+(50-(this.line/8))){ this.s = 1/max(1,this.speed/4); this.y-=this.speed; this.x+=this.xvel(this.speed/5); this.speed+=0.1; if(this.br>this.r){ this.r++; }else { this.r--; } } }; var piece= function (img,x,y,num,state){ this.img=img; this.x=x; this.y=y; this.num=num; this.state=state; this.down=false; if (state){ if (num<8){ this.rx=50; this.ry=100+num60; } else { this.rx=120; this.ry=100+(num-8)60; }} this.float=false; this.fit=false; this.hover=false; }; piece.prototype.draw = function() { this.hover=false; if (!this.down&&scene!=='menu') { image(this.img,this.rx,this.ry,60,60); } else if (!this.state) { image(this.img,this.rx,this.ry,70,70); } else {image(this.img,this.rx,this.ry);} if (this.rx>200){ this.down=true; } else {this.down=false;} if (this.float){ if (this.rx<200\|\|this.ry<200){ this.rx=mouseX; this.ry=mouseY; } else { this.ry=50+round((mouseY-50)/100)100; this.rx=50+round((mouseX-50)/100)100; this.hover=true; fill(255, 255, 255,100); noStroke(); rect(this.rx,this.ry,100,100); } } if (this.rx<this.x+0.2&&this.rx>this.x-0.2&&this.ry<this.y+0.2&&this.ry>this.y-0.2&&!this.float){ this.fit=true; } else {this.fit=false;} if (!this.fit) { solved=false; } }; piece.prototype.inm= function() { if (this.down){ return mouseY>=this.ry-50&&mouseY<this.ry+50&&mouseX>=this.rx-50&&mouseX<this.rx+50; } else { return mouseY>this.ry-30&&mouseY<this.ry+30&&mouseX>this.rx-30&&mouseX<this.rx+30; } }; var screensplit=function (){ images.length = 0; fr = frameCount; for (var i=0;i<600;i+=100){ for (var j=0;j<600;j+=100){ images.push(new imag(50+i,50+j,get(i,j,100,100),j)); }} }; var count=0; var menu = function() { scene='menu'; background(79, 79, 79); pushMatrix(); translate(300,300); rotate(180); image(valley,0,0,600,600); popMatrix(); noStroke(); fill(0, 0, 0,120); quad(0,0,600,0,600,350,0,250); triangle(100,600,600,600,600,250); fill(227, 227, 227); textSize(77); text('The Picture',280,90); text('Puzzle',320,160); fill(250, 250, 250); textSize(50); text('Click',500,470); text('To Play',474,520); textSize(25); text('By Tegoon',520,210); }; var how = function() { scene='how'; background(77, 77, 76); fill(219, 219, 219); textSize(20); text('In this game, you must piece together fragments\nof a picture to form the complete picture.\n\nChoose the picture you want to piece together:',300,90); text('A sleepy Valley',180,430); text('Night at a Campsite',420,430); fill(31, 31, 31); textSize(17); text('Both pictures by Talal Zulfiqar.\nLink is in the code.',300,530); if (mouseX>=80&&mouseX<=280&&mouseY>=200&&mouseY<=400){ image(valley,180,300,220,220); } else {image(valley,180,300,200,200);} if (mouseX>=320&&mouseX<=520&&mouseY>=200&&mouseY<=400){ image(campsiteimg,420,300,220,220); } else {image(campsiteimg,420,300,200,200);} }; var choosepicture=function (){ scene='choose'; }; var game = function() { scene='game'; solved=true; background(77, 77, 76); if (choice===1){ image(valley, 500,100,160,160); } else { image(campsiteimg, 500,100,160,160);} for (var i=250;i<600;i+=100){ for (var j=250;j<600;j+=100){ fill(145, 145, 145); stroke(112, 112, 112); strokeWeight(1); rect(i,j,100,100); } } noStroke(); fill(0, 0, 0,50); quad(200,200,600,200,600,350,200,450); stroke(255, 255, 255); for (var i=0;i<pieces.length;i++){ pieces[i].draw(); } for (var i=0;i<pieces.length;i++){ if (pieces[i].float){pieces[i].draw();} } //println(solved); noFill(); stroke(69, 29, 8); strokeWeight(3); rect(400,400,402,402,5); if (solved===true){ screensplit(); scene='winscreen'; } fill(222, 222, 222); textSize(18); textAlign(LEFT,CENTER); text('Click on a piece on the\nleft to lift it. Click on the \nboard to place it down.',180,60); textAlign(CENTER,CENTER); }; var winscreen=function () { scene='winscreen'; background(41, 41, 41); fill(240); textSize(25); text('You win!\n\nClick anywhere to return to the menu.',300,150); }; draw = function (){ count++; switch (scene) { case "menu": menu(); break; case "how": how(); break; case "choose": choosepicture(); break; case "game": game(); break; case "winscreen": winscreen(); break; } for (var i =0;i<images.length;i++) { images[i].draw(); if (images[i].y>620){ //images.splice(i,1); } } }; var indices=new Array(16); for (var i=0;i<16;i++){ indices[i]=i; } var producepieces = function (){ if (choice===1){ image(valley, 200,200,400,400);} else {image(campsiteimg, 200,200,400,400);} for (var i=0;i<400;i+=100){ for (var j=0;j<400;j+=100){ var select=round(random(-0.5,indices.length-0.6)); var num=indices[select]; pieces.push(new piece(get(+i,j,100,100),250+i,250+j,num,true)); indices.splice(select,1); }} background(18, 17, 17);}; mouseClicked = function (){ if (scene==="menu"){ scene='how'; screensplit(); } else if (scene==='how'){ if (mouseX>=80&&mouseX<=280&&mouseY>=200&&mouseY<=400){ choice=1; scene='game'; screensplit(); producepieces(); } if (mouseX>=320&&mouseX<=520&&mouseY>=200&&mouseY<=400){ choice=2; scene='game'; screensplit(); producepieces(); } } else if (scene==='game'){ for (var i=0;i<pieces.length;i++){ if (pieces[i].inm()&&!pieces[i].float){ pieces[i].float=true; } else if (pieces[i].float) { pieces[i].float=false; } } } else if (scene==='winscreen'){ pieces.length=0; for (var i=0;i<16;i++){ indices[i]=i; } solved=false; screensplit(); scene='how'; } };
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgKSf7OqJCAw
Votes	342
Spin-Offs	13
Type	PJS
Width	600
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Tegoon
Author Name	NOTTegoon
Author ID	kaid_496323856316872262554856
Author Profile Access	COACH

Archive Data

Added	10 months ago, 1739363470270
Updated	8 months ago, 1744828824755
Source Deleted	unknown