Viewing Program

Program Data

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

Title	Trash or Recycle?
ID	4617174069149696
Created	10 years ago, 1430093243186
Updated	10 years ago, 1436407267599
Code	/*Credit for idea, navigation ,trash and recycle bin goes to {[hello]} Please check out the orginal: https://www.khanacademy.org/computer-programming/trash-can-and-recycle-bin/4931315665338368/ /contest info Wow, I can't believe this got 550+ votes! Thanks everyone! I have been programming for 20+ months I have finished all the Drawing and Animations + Game and visualisations I understand everything except object inheritance. Can you guys check out my other contest entry I made for fun? https://www.khanacademy.org/computer-programming/recycled-background/5131013319688192 //Now with clean code! /* April 22nd is Earth Day! And I haven't announced a contest about it yet, eek! In this contest, I want you to create a game or visualization that shows people ways they can take better care of our environment, the Earth. Maybe its a game to remember what to put in recyling, a game to efficiently wash dishes, or at the larger scale, a visualization of the best irrigation techniques for sustainable agriculture. Please state your experience level (# of months you've been programming, % of JS intro concepts you understand), and attribute any parts of your code you didn't write. Deadline is May 10th. I will judge in the week after that, and award based on creativity, clean commented code, and originality. You can keep working until I judge. The top 5 will get a Golden Winston. / var how2Time = 0;//a fix for the 'how to' page var timer = 0;//this timer starts when the game has ended and cues the text to pop out var sounds = { right: getSound("retro/coin"), wrong: getSound("retro/jump1"), };//the sounds to play var redOp = 0;//the opacity of the red screen var pg=1;//page number var time=1000;//time left var objt=5;//the current object selected var right = 0; var wrong = 0; var grassColor = color(10, 135, 10); var Fantasy = createFont("fantasy");//the main font var items = [//put more Items like this! {//each items MUST start and end with curly braces and end with a "," type: "compost",//they all must have a type (make sure you spell is correctly!) name: "Apple Core",//A name (in case the player can't guess what the drawing is!) draw: function(){ fill(247, 250, 92); noStroke(); rect(-7,0,15,20); beginShape(); vertex(0,0); vertex(10,25); vertex(-12,0); vertex(-4,-5); vertex(0,0); vertex(-11,22); vertex(11,20); vertex(5,6); vertex(11,0); endShape(CLOSE); fill(255, 0, 0); stroke(0, 0, 0); arc(0,0,25,15,180,360); arc(0,20,25,15,0,180); }//and a draw function (objects must be drawn at (0,0)) }, { type: "recycling",//recycling of trash? name: "Aluminum Coke Can",//what's the items' name? draw: function(){ textFont(createFont("")); textSize(11); pushMatrix(); rotate(15); fill(232, 0, 0); stroke(135, 0, 0); rect(-8,-16,16,32); arc(0,16,16,6,0,180); fill(212, 212, 212); ellipse(0,-16,16,6); stroke(54, 54, 54); ellipse(-3,-16,7,2); fill(255, 255, 255); pushMatrix(); rotate(90); text("Coke",2,0); popMatrix(); popMatrix(); }//what will it look like? },{ type: "recycling", name: "Plastic Water Bottle", draw: function(){ noStroke(); fill(136, 185, 227,150); for(var i=0;i<5;i++){ ellipse(0,-5+i5,15,10); } fill(181, 181, 181); rect(-3,-15,6,5); } },{ type: "recycling", name: "Aluminum Pie Crust Shield", draw: function(){ noStroke(); fill(176, 176, 176); for(var i=0;i<4;i++){ if(i===3){ strokeWeight(1.5); stroke(176); fill(125, 125, 125); } ellipse(0,12-i2,31+i2,6); } } },{ type: "recycling", name: "Tin Can", draw: function(){ textFont(createFont("")); fill(110, 110, 110); rect(-10,-15,20,30); arc(0,14,20,5,0,180); fill(48, 48, 48); ellipse(0,-15,20,5); pushMatrix(); translate(15,-21); rotate(-40); fill(179, 179, 179); ellipse(0,0,20,5); popMatrix(); fill(21, 143, 23); rect(-10,-10,20,20); arc(0,9,20,5,0,180); fill(110); arc(0,-11,20,5,0,180); fill(255); pushMatrix(); rotate(-38); textSize(10); text("Can",0,0); popMatrix(); } },{ type: "recycling",//recycling or trash? name: "Wine Bottle", draw: function(){ noStroke();//we don't want any stroke! fill(38, 87, 30,220);//fill a dark green with tranparency beginShape();//the bottle vertex(-3,-20); vertex(-3,-10); vertex(-7,-8); vertex(-8,-4); vertex(-8,20); bezierVertex(-8,20,0,25,8,20); vertex(8,-4); vertex(7,-8); vertex(3,-10); vertex(3,-20); endShape(CLOSE); fill(255, 255, 255,50);//fill white with transparency beginShape();//the highlight on the bottle (left side) vertex(-6,-3); vertex(-6,19); vertex(-2,-9); vertex(-2,-7); endShape(); fill(0,0,0,100);//fill black with transparency beginShape();//the darker part (right side) vertex(6,-6); vertex(6,21); vertex(0,20); vertex(4,17); endShape(); }//how the item will look },{ type: "t&r", name: "Styrofoam", draw: function(){ textFont(Fantasy); fill(255, 255, 255); stroke(133, 130, 130); quad(-20,10,0,-10,20,0,2,21); quad(-20,15,-20,10,2,21,2,27); quad(20,5,20,0,2,21,2,27); fill(105, 105, 105); textSize(14); pushMatrix(); scale(1,0.8); rotate(-21); text("Foam",-2,6); popMatrix(); } },{ type: "t&r", name: "Plastic Bag", draw: function(){ noStroke(); fill(133, 133, 133); beginShape(); vertex(0,-9); vertex(1,-17); vertex(5,-20); vertex(13,-18); vertex(13,-15); vertex(5,-15); vertex(6,-9); endShape(); fill(204, 204, 204); beginShape(); vertex(18,12); vertex(12,17); vertex(3,17); vertex(-3,19); vertex(-10,16); vertex(-15,16); vertex(-19,10); vertex(-18,2); vertex(-16,-7); vertex(-18,-14); vertex(-14,-20); vertex(-7,-19); vertex(-3,-8); vertex(-9,-7); vertex(-10,-15); vertex(-14,-15); vertex(-13,-10); vertex(-4,-9); vertex(11,-9); vertex(10,-18); vertex(14,-19); vertex(18,-5); vertex(17,10); endShape(); fill(156, 156, 156); beginShape(); vertex(-17,7); vertex(-17,9); vertex(-15,12); vertex(-14,14); vertex(-7,15); vertex(-3,17); vertex(0,16); vertex(14,16); vertex(-4,13); vertex(-12,11); vertex(-17,1); endShape(); } },{ type: "recycling", name: "Empty Cereal box", draw: function(){ fill(138, 117, 69); quad(-16,-13,10,-10,10,21,-16,18); fill(148, 120, 89); quad(-16,-13,10,-10,16,-13,-10,-15.5); fill(110, 83, 41); quad(10,21,10,-10,16,-13,16,15); pushMatrix(); scale(0.6,1); rotate(28); fill(255, 230, 0); textSize(13); text("Cereals",-4,5); popMatrix(); } },{ type: "recycling", name: "Empty Toilet Paper Tube", draw: function(){ pushMatrix(); rotate(-62); fill(130, 89, 23); rect(-8,-17,16,34); arc(0.5,-15,15,8,180,360); fill(43, 29, 7); ellipse(0,17,15,8); popMatrix(); } },{ type: "compost", name: "Banana Peel", draw: function(){ fill(255, 221, 0); stroke(255, 183, 0); beginShape(); vertex(-2,-20); vertex(2,-20); vertex(1,-14); bezierVertex(15,-14,13,4,21,3); bezierVertex(7,7,14,-5,4,-6); bezierVertex(4,-6,11,-1,-3,9); bezierVertex(-1,-3,6,3,-2,-7); bezierVertex(-12,-4,-13,4,-20,0); bezierVertex(-7,-3,-11,-13,-1,-14); endShape(CLOSE); noStroke(); fill(77, 45, 11,150); ellipse(-4,-10,-3,3); ellipse(4,-1,2,5); ellipse(15,2,4,3); ellipse(-16,0,4,2); ellipse(0,4,2,3); ellipse(7,-7,4,2.5); } },{ type: "compost", name: "Rotting Carrot", draw: function(){ stroke(82, 92, 10); for(var i=2;i<25;i+=0.5){ for(var j = noise(10,i/10)39;j<noise(0,i/10)60;j+=1.5){ point(i+4,cos(j)121-110); } } fill(255, 140, 0); stroke(207, 121, 16); beginShape(); vertex(5,0); vertex(-18,8); vertex(8,7); bezierVertex(8,7,11,2,5,0); endShape(); } },{ name:"Broken Plate", type: "trash", draw: function(){ strokeWeight(0.1); fill(245, 245, 245); arc(0,0,40,20,95,360+66); fill(230, 230, 230); strokeWeight(0.02); arc(0,0,25,11.1,95,360+79); stroke(0); strokeWeight(0.2); line(0,0,-2,10); line(0,0,2,5); line(2,5,6,7); line(6,7,8,9); line(0,0,-5,2); line(-5,2,-5,4); line(-5,2,-9,2); line(-9,2,-13,4); line(18,4,15,2); line(15,2,11,2); } } ];//all the items textAlign(CENTER,CENTER); var easeInOut = function(pos) { pos = constrain(pos, 0, 1); var s = 1.70158; if((pos/=0.5) < 1) {return 0.5(pospos(((s=(1.525))+1)pos -s));} return 0.5((pos-=2)pos(((s=(1.525))+1)pos +s) +2); };//makes a nice In-Out motion (used in the end screen) var popOut = function(Max, decal){ return easeInOut((timer-decal)/35)Max; };//symplify's easeInOut function to our advantage var Right = function(){ right++;//increas the right answers by 1 playSound(sounds.right);//play the "right answer" sound objt = floor(random(items.length));//get a different "random" object };//if the user gets it right var Wrong = function(){ redOp = 255;//red screen's opacity get's 255 wrong++;//increase the number of wrong answers playSound(sounds.wrong);// play the 'wrong answer' sound objt = floor(random(items.length));//change the current item to a new 'random' item };//if the user get's it wrong var Recycle = function(x,y,c,s){ var arrow = function(x,y){ pushMatrix(); translate(x,y); beginShape(); vertex(41,-93); vertex(65,-67); vertex(0,0); vertex(-50,-50); vertex(0,-99); bezierVertex(0,-99,22,-112,41,-93); endShape(); beginShape(); vertex(29,-109); vertex(121,-109); bezierVertex(121,-109,131,-107,141,-93); vertex(178,-46); vertex(193,-50); vertex(165,-1); vertex(95,-27); vertex(110,-33); vertex(53,-94); bezierVertex(53,-94,41,-106,29,-109); endShape(); popMatrix(); };//one arrow for(var i=0;i<3;i++){//make three of them pushMatrix(); translate(x,y);//translate to the desired position scale(s/10); rotate(i120);//rotate each of them by 120 degrees arrow(-72,(c-1));//draw each arrow popMatrix(); } };//Recycle symbol var grass = function(){ stroke(0, 102, 15); strokeWeight(6); fill(grassColor); beginShape(); vertex(0,226); vertex(10,215); vertex(12,223); vertex(24,222); vertex(32,229); vertex(43,214); vertex(45,224); vertex(52,219); vertex(56,226); vertex(66,218); vertex(76,213); vertex(75,223); vertex(82,228); vertex(87,219); vertex(90,226); vertex(99,220); vertex(102,224); vertex(110,222); vertex(115,211); vertex(117,218); vertex(122,223); vertex(126,220); vertex(131,211); vertex(133,218); vertex(140,216); vertex(144,221); vertex(152,219); vertex(157,214); vertex(161,215); vertex(170,209); vertex(174,216); vertex(180,217); vertex(187,219); vertex(197,216); vertex(200,221); vertex(206,220); vertex(212,209); vertex(215,219); vertex(225,215); vertex(232,222); vertex(239,215); vertex(245,210); vertex(246,217); vertex(250,217); vertex(259,218); vertex(260,224); vertex(270,221); vertex(270,212); vertex(274,219); vertex(286,221); vertex(290,218); vertex(300,223); vertex(306,215); vertex(313,218); vertex(322,207); vertex(327,214); vertex(333,216); vertex(333,225); vertex(340,219); vertex(348,222); vertex(356,230); vertex(363,222); vertex(371,227); vertex(380,218); vertex(386,224); vertex(394,218); vertex(420,230); vertex(420,420); vertex(-20,420); endShape(); }; var trashCan=function(){ stroke(0); strokeWeight(2); fill(77, 73, 77); rect(50,100,100,150,10); arc(100,244,100,50,0,180); rect(40,83,120,25,6); arc(101,105,121,25,0,180); arc(101,121,100,15,0,180); for(var i=58;i<150;i+=23){ rect(i,127-cos(i2)10,15,124,10); } ellipse(100,82,120,25); beginShape(); vertex(68,78); vertex(75,57); vertex(118,57); vertex(127,78); vertex(117,78); vertex(110,63); vertex(85,63); vertex(79,78); endShape(CLOSE); };//the drawing of the trash can. var recycleBin=function(){ strokeWeight(2); stroke(0); fill(11, 61, 15); rect(250,125,100,150); beginShape(); vertex(350,275); vertex(375,250); vertex(375,100); vertex(350,125); endShape(CLOSE); rect(235,110,120,15); beginShape(); vertex(355,110); vertex(355,125); vertex(375,100); vertex(375,85); endShape(CLOSE); beginShape(); vertex(235,110); vertex(275,85); vertex(375,85); vertex(354,110); endShape(CLOSE); beginShape(); vertex(262,100); vertex(287,65); vertex(325,65); vertex(350,100); endShape(CLOSE); beginShape(); vertex(287,65); vertex(307,57); vertex(338,57); vertex(325,65); endShape(CLOSE); beginShape(); vertex(325,64); vertex(341,58); vertex(359,89); vertex(350,100); endShape(CLOSE); fill(255,255,255); Recycle(300,178,54,2); };//the drawing of the recycling can var compost = function(x,y){ textFont(createFont("")); pushMatrix(); translate(x,y); strokeJoin(ROUND); //the bin fill(11, 8, 97); stroke(5, 5, 87); quad(-70,0,70,0,65,70,-65,70); fill(6, 8, 36); stroke(21, 18, 120); strokeWeight(5); quad(-50,-20,50,-20,70,0,-70,0); fill(71, 43, 10); noStroke(); //compost beginShape(); vertex(-58,-2); bezierVertex(-52,-7,-40,-17,-30,-2); bezierVertex(-39,-7,-14,-28,-3,-2); bezierVertex(-10,-7,-4,-17,50,-2); endShape(); ellipse(-3,-7,10,10); ellipse(27,-7,12,7); ellipse(-32,-7,10,8); fill(255,255,255,150); textSize(24); pushMatrix(); scale(1,0.7); text("COMPOST",0,37); popMatrix(); //grass stroke(15, 84, 4); fill(grassColor); strokeWeight(2); beginShape(); vertex(-69,73); for(var i=-70;i<70;i+=10){ vertex(i,46+cos(i93)7); vertex(i+6,63+cos(i98)7); } vertex(75,39); vertex(72,75); endShape(); popMatrix(); strokeJoin(MITER); };//the compost bin var endScreen = function(){ timer++;//increase the timer (used for the word popping out) background(0, 45, 168); fill(0, 122, 2); textAlign(CENTER,CENTER); textSize(popOut(57,0));//pop out this word when the timer gets 0! The first argument is the size it's going to get, the second is the delay. textFont(createFont("fantasy")); text("Time's up!",200,50); fill(0, 207, 21); text("Time's up!",203,52); fill(255, 0, 0); textSize(popOut(60,30));//when the timer gets 30 text("______________________",200,68); textSize(popOut(25,70)); text("Let's see what you got:",121,134); fill(255); Recycle(333,169,50,popOut(3,140));//140 fill(0, 245, 0); textSize(popOut(23,140));//140 text("- "+right+" Items Sorted correctly!",140,200);// textSize(popOut(23,170)); text("- "+wrong+" Items out of place!",113,250);//170 fill(255, 0, 0); textSize(popOut(60,200)); text("______________________",200,250);//200 fill(0, 245, 0); textSize(popOut(24,240));//240 text("Congratulations!\nyou sorted "+round(right/(right+wrong)*100)+"% of the items correctly!",200,339); };//the end screen! var draw = function() { if(pg===1){//menu Page background(0, 124, 232); grass(); trashCan();//add the trash recycleBin();//and the recycling compost(200,274); fill(0, 255, 98); rect(125,100,150,50,10);//top button rect(125,175,150,50,10);//bottom textSize(52); textFont(createFont("fantasy")); fill(0, 107, 9); text("trash or recycle?",197,23);//title fill(0, 255, 0); text("trash or recycle?",200,25);//title fill(33, 69, 34); textSize(30); text("Play",200,127);//text on buttons text("How To",200,202); } if(pg===2){//Play! background(0, 124, 232); grass(); recycleBin(); trashCan(); compost(200,274); fill(255, 0, 0); textSize(20); text("time:"+time,50,25);//show time left pushMatrix(); translate(200,200);//translate the object to the center of the screen scale(1.8);//make the items look bigger strokeWeight(1); stroke(0);//reset stroke color items[objt].draw();//draw the item based on what item was randomly picked popMatrix(); time--;//make the time run out fill(0); textSize(30); textFont(Fantasy); text(items[objt].name,200,350);// show the name of the item if(time<0){//if the timer runs out endScreen();//show the end screen } } if(pg===3){//help page how2Time ++; background(0, 124, 232); grass(); recycleBin(); trashCan(); compost(200,274); fill(199, 208, 255,200); noStroke(); rect(20,20,360,360); textSize(26); fill(2, 6, 92); //explaination text("Try your best to sort out the items! Choose wisely, our planet depends on it!\n\n...But hurry! Times's ticking!\n\n\n\nclick to go\nback to menu!",26,42,350,351); textSize(52); textFont(createFont("fantasy")); fill(0, 107, 9); text("Save the Planet!",197,41);//title fill(0, 255, 0); text("Save the Planet!",200,43);//title } fill(255, 0, 0,redOp);//fill the "red" screen for the Wrong answers redOp-=20;//decrease the opacity rect(-10,-10,420,420); }; mouseClicked=function(){//handles the clicking if(pg===1&&mouseX>125&&mouseX<275&&mouseY>100&&mouseY<150){//button one pg=2; } if(pg===1&&mouseX>125&&mouseX<275&&mouseY>175&&mouseY<225){//button two pg=3; } if(pg===2&&mouseX>50&&mouseX<150&&mouseY>50&&mouseY<275&&time>0){//trash can if(items[objt].type==="trash"\|\|items[objt].type==="t&r"){//if the item's type is trash Right();//right answer }else{ Wrong();//else wrong answer } }else if(pg===2&&mouseX>250&&mouseX<375&&mouseY>50&&mouseY<300&&time>0){//recycle can if(items[objt].type==="recycling"\|\|items[objt].type==="t&r"){//if the items type is recycling Right();//it's a right answer! }else{ Wrong();//else, it's not } }else if(pg===2&&mouseX>125&&mouseX<275&&mouseY>250&&mouseY<350&&time>0){//recycle can if(items[objt].type==="compost"){//if the items type is recycling Right();//it's a right answer! }else{ Wrong();//else, it's not } } if(pg===3&&how2Time>1){//if the user has spent at least one frame on this page pg=1;//make the page to back to menu how2Time = 0; } };
Folds	11,32,36,39,49,73,74,96,97,108,109,123,124,151,152,184,185,202,203,261,262,280,281,294,295,322,323,341,342,365,369,374,375,377,378,382,383,388,389,424,425,500,501,525,526,570,571,618,619,647,650,670,671,695
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgIjiuemZCAw
Votes	656
Spin-Offs	15
Type	PJS
Width	400
Height	400
User Flagged	false
Origin Scratchpad	{"id":"6194437445255168","title":"Contest: Earth Day","deleted":"false","official":"false"}
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Jacob
Author Name	Jacob124
Author ID	kaid_196917702627746948456106
Author Profile Access	PUBLIC

Archive Data

Added	5 months ago, 1739364768377
Updated	3 months ago, 1744820692108
Source Deleted	unknown