Viewing Program

Program Data

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

Title	The Man in the Green Jacket
ID	5460555275599872
Created	7 years ago, 1544443912934
Updated	6 years ago, 1545945798695
Code	/*************************************************************** * I have been programming 80 months, and I have * learned 100% of Intro to JS. * * An animated comic strip about success. * * Work log: * 12 hours * 1800 lines of code * * All code and ideas are owned by ѕнєяℓσ¢к нσℓмєѕ and may * not be used without consent and credit. * *************************************************************/ / cursor type control variable / var hoverButton = false; /* General Man in the Green Jacket body part functions / var Man_Body = function(x,y,s1,s2,r) { //x, y, rotation, and scale calls pushMatrix(); translate(x,y); scale(s1,s2); rotate(r); //body outline and inside fill of light green strokeWeight(2); stroke(0); fill(159, 245, 159); beginShape(); vertex(2,0); bezierVertex(14,18,20,52,14,62); bezierVertex(0,69,-21,65,-29,61); bezierVertex(-34,42,-29,4,-20,1); bezierVertex(-18,0,-6,-2,1,0); endShape(); //front and back darker green highlights noFill(); stroke(121, 209, 121); strokeWeight(3); bezier(0,2,11,18,17,52,11,61); strokeWeight(4); bezier(-25,41,-26,53,-22,57,-23,60); //front pocket highlight noStroke(); fill(121, 209, 121); pushMatrix(); rotate(-18); rect(-15,51,11,5,2); popMatrix(); //two buttons fill(0); ellipse(13,32,4,4); ellipse(11,24,4,4); popMatrix(); }; var Man_Head = function(x,y,s1,s2,r) { //x, y, rotation, and scale calls pushMatrix(); translate(x,y); scale(s1,s2); rotate(r); //head outline and skin colored fill fill(255, 224, 171); strokeWeight(2); stroke(0); beginShape(); vertex(0,0); bezierVertex(3,-10,2,-18,-1,-34); bezierVertex(-5,-35,-13,-36,-14,-34); bezierVertex(-19,-27,-21,-10,-20,1); endShape(); //glasses strokeWeight(2); stroke(0); line(-19,-18,0,-18); strokeWeight(1); fill(255, 255, 255); ellipse(0,-18,3,8); popMatrix(); }; var Man_Arm = function(x,y,s1,s2,r) { pushMatrix(); translate(x,y); scale(s1,s2); rotate(r); //skin colored fingers stroke(255, 224, 171); strokeWeight(3); line(46,21,40,22); line(43,20,40,22); line(46,23,40,22); line(46,25,40,25); //arm outline and light green colored fill strokeWeight(2); stroke(0); fill(159, 245, 159); beginShape(); vertex(-5,18); bezierVertex(15,21,27,23,40,21); bezierVertex(42,27,41,30,40,24); bezierVertex(49,29,0,39,-13,34); bezierVertex(-15,27,-12,20,-5,18); endShape(); //darker green arm outline noFill(); stroke(121, 209, 121); strokeWeight(3); bezier(-11,32,-5,35,27,31,37,26); popMatrix(); }; var Man_Leg = function(x,y,s1,s2,r) { //x, y, rotation, and scall calls pushMatrix(); translate(x,y); scale(s1,s2); rotate(r); //foot outline and light green colored fill strokeWeight(2); stroke(0); fill(159, 245, 159); beginShape(); vertex(2,-4); bezierVertex(1,10,0,21,-9,37); bezierVertex(-9,37,-11,38,-14,37); bezierVertex(-17,29,-26,21,-23,-6); endShape(); //darker green highlight strokeWeight(3); stroke(121, 209, 121); bezier(-1,-4,-1,10,-4,21,-11,34); //black shoe noStroke(); fill(0); rect(-15,36,12,5,3); popMatrix(); }; var Man_Head_Front = function(x,y,s1,s2,r,smile) { pushMatrix(); translate(x,y); scale(s1,s2); rotate(r); //outline and skin colored fill fill(255, 224, 171); strokeWeight(2); stroke(0); beginShape(); vertex(0,-3); bezierVertex(3,-11,0,-18,-1,-34); bezierVertex(-2,-35,-18,-36,-19,-33); bezierVertex(-22,-27,-23,-10,-22,-3); bezierVertex(-16,4,-6,2,0,-3); endShape(); //glasses strokeWeight(2); stroke(0); line(-21,-18,-1,-18); strokeWeight(1); fill(255, 255, 255); ellipse(-15,-18,6,8); ellipse(-6,-18,6,8); //for double use, either have line for thinking or arc for a smile if(smile) { noFill(); arc(-11,-9,10,4,20,146); } else { line(-15,-5,-11,-5); } popMatrix(); }; var Man_Body_Front = function(x,y,s1,s2,r) { //x, y, rotation, and scale calls pushMatrix(); translate(x,y); scale(s1,s2); rotate(r); //body outline and light green colored fill strokeWeight(2); stroke(0); fill(159, 245, 159); beginShape(); vertex(2,0); bezierVertex(14,18,20,52,14,62); bezierVertex(0,69,-39,65,-40,61); bezierVertex(-50,42,-30,-4,-27,1); bezierVertex(-9,9,-2,0,1,0); endShape(); //three buttons noStroke(); fill(0); ellipse(-13,29,5,5); ellipse(-13,38,5,5); ellipse(-13,48,5,5); //two pockets left and right noStroke(); fill(121, 209, 121); pushMatrix(); rotate(-18); rect(-15,51,11,5,2); rotate(-18-2); rect(-18,57,11,5,2); popMatrix(); //neck and middle lines noFill(); stroke(0); strokeWeight(1); beginShape(); vertex(0,0); vertex(-13,10); vertex(-29,0); endShape(); line(-13,10,-13,65); popMatrix(); }; /** General Artist body part functions / var Artist_Leg = function(x,y,s1,s2,r) { //x, y, rotation, and scale calls pushMatrix(); translate(x,y); scale(s1,s2); rotate(r); //leg and black fill strokeWeight(2); stroke(0); fill(0); beginShape(); vertex(0,0); bezierVertex(0,0,0,0,-4,92); bezierVertex(-3,94,-26,94,-16,87); bezierVertex(-3,81,-18,94,-10,87); bezierVertex(-7,90,-5,24,-7,0); endShape(); //pin stripe effect on the leg and shoe edge illusion created strokeWeight(1); stroke(255, 100); line(0,0,-4,84); line(-2,0,-6,85); line(-5,0,-8,84); popMatrix(); }; var Artist_Body = function(x,y,s1,s2,r) { //x, y, rotation, and scale calls pushMatrix(); translate(x,y); scale(s1,s2); rotate(r); //main body outline and black fill strokeWeight(2); stroke(0); fill(0); beginShape(); vertex(0,0); bezierVertex(4,-25,4,-72,0,-98); bezierVertex(-4,-98,-8,-96,-9,-96); bezierVertex(-6,-62,-1,-40,-9,-2); endShape(); //hanging tail coat outline and black fill beginShape(); vertex(9,34); bezierVertex(2,26,4,-72,0,-98); bezierVertex(-2,16,-4,11,9,35); endShape(); //back hands folded outline and black fill beginShape(); vertex(2,-75); bezierVertex(6,-46,8,-28,8,-14); bezierVertex(3,-8,8,-28,-1,-14); endShape(); popMatrix(); }; var Artist_Head = function(x,y,s1,s2,r) { //x, y, rotation, and scale calls pushMatrix(); translate(x,y); scale(s1,s2); rotate(r); //head outline and skin colored fill fill(255, 224, 171); strokeWeight(2); stroke(0); beginShape(); vertex(-13,2); bezierVertex(-14,-10,-16,-13,-19,-19); bezierVertex(-23,-20,-27,-21,-31,-16); bezierVertex(-32,-9,-32,-2,-27,-5); bezierVertex(-24,0,-24,-2,-23,6); endShape(); //hair line(-29,-16,-20,-17); line(-29,-17,-20,-19); //moustache line(-29,-3,-24,-4); popMatrix(); }; /* Single Banker body function / var Banker = function(x,y,s1,s2,r) { //x, y, rotation, and scale calls pushMatrix(); translate(x,y); scale(s1,s2); rotate(r); //head outline and dark skin colored fill fill(140, 84, 0); strokeWeight(2); stroke(0); beginShape(); vertex(0,-19); bezierVertex(-1,-20,4,-30,0,-48); bezierVertex(-1,-65,2,-58,0,-68); bezierVertex(-2,-81,-39,-70,-38,-65); bezierVertex(-45,-64,-45,-58,-38,-58); bezierVertex(-40,-40,-34,-45,0,-48); endShape(); //middle body outline and blue fill fill(102, 102, 140); beginShape(); vertex(0,-48); bezierVertex(-17,-46,-39,-43,-33,-46); bezierVertex(-39,-44,-41,-30,-42,-19); bezierVertex(-34,-19,-13,-22,0,-19); endShape(); //leg outline and same blue fill beginShape(); vertex(-11,0); bezierVertex(0,0,0,0,-35,0); bezierVertex(-38,-5,-35,-7,-35,-6); bezierVertex(-31,-5,-35,-7,-35,-20); bezierVertex(-22,-20,-9,-21,-3,-19); bezierVertex(-3,-5,-5,-4,-4,0); endShape(); //hand fill(140, 84, 0); noStroke(); rect(-15,-24,7,5); rect(-17,-24,5,3); //arm outline and same blue fill fill(102, 102, 140); stroke(0); beginShape(); vertex(-6,-37); bezierVertex(-6,-35,-5,-26,-7,-23); bezierVertex(-23,-21,-12,-27,-14,-37); endShape(); //suit lines strokeWeight(2); line(-38,-27,-40,-27); line(-37,-32,-40,-32); line(-36,-37,-37,-37); line(-38,-51,-34,-51); //black hair noStroke(); fill(0); beginShape(); vertex(0,-68); bezierVertex(-2,-81,-39,-70,-38,-65); bezierVertex(-19,-70,7,-65,0,-68); endShape(); //shoe outline and black fill fill(0); beginShape(); vertex(-36,-6); bezierVertex(-41,-10,0,-3,-6,-6); bezierVertex(-4,-6,0,-7,-6,0); bezierVertex(-14,-2,-20,2,-35,0); endShape(); //ear noFill(); stroke(0); arc(-15,-58,6,5,-103,90); popMatrix(); }; /* Single Scientist body function / var Scientist = function(x,y,s1,s2,r) { //x, y, rotation, and scale calls pushMatrix(); translate(x,y); scale(s1,s2); rotate(r); //head outline and skin colored fill strokeWeight(2); stroke(0); fill(255, 226, 168); beginShape(); vertex(3,-48); bezierVertex(4,-84,0,-74,-4,-76); bezierVertex(-28,-74,-51,-67,-52,-57); bezierVertex(-51,-51,-46,-47,-33,-44); bezierVertex(-29,-42,-34,-42,-33,-35); endShape(); //body outline and white colored fill fill(255, 255, 255); beginShape(); vertex(0,0); bezierVertex(0,-14,0,-23,3,-48); bezierVertex(-12,-43,-24,-35,-33,-38); bezierVertex(-33,-23,-36,-16,-35,-5); bezierVertex(-38,10,-2,-2,-1,0); endShape(); //mouth line(-31,-43,-19,-45); //nose ellipse(-48,-54,1,1); //eye and eyebrow noFill(); ellipse(-12,-78,4,6); arc(-12,-79,14,12,-90,-30); //moustache bezier(-36,-45,-34,-44,-40,-41,-44,-44); bezier(-39,-48,-34,-44,-40,-44,-47,-47); //arm outline and white colored fill beginShape(); vertex(-11,-42); bezierVertex(-10,-30,-14,-24,-22,-18); bezierVertex(-24,-18,-22,-15,-26,-22); bezierVertex(-20,-29,-18,-31,-18,-39); bezierVertex(-15,-42,-15,-40,-13,-42); endShape(); //legs strokeWeight(5); bezier(-22,4,-20,21,-23,16,-26,17); bezier(-12,3,-9,21,-13,16,-15,17); //hand fill(255, 226, 168); noStroke(); pushMatrix(); rotate(-30); rect(-16,-31,4,5); rect(-14,-33,2,6); popMatrix(); popMatrix(); }; /* Sign function / var Sign = function(x,y,s1,s2,r) { //x, y, rotation, and scale calls pushMatrix(); translate(x,y); scale(s1,s2); rotate(r); //sign outline and wood colored fill strokeWeight(2); stroke(0); fill(112, 62, 0); beginShape(); vertex(0,0); vertex(0,-16); vertex(22,-18); vertex(20,-27); vertex(9,-28); vertex(22,-32); vertex(22,-45); vertex(-10,-42); vertex(-27,-44); vertex(-27,-37); vertex(-19,-35); vertex(-26,-32); vertex(-28,-15); vertex(-16,-17); vertex(-16,0); vertex(0,0); endShape(); //line text on the sign line(-21,-21,14,-22); line(-18,-28,6,-27); line(-14,-34,13,-36); //line division between sign and post line(-14,-17,-1,-16); popMatrix(); }; /* Comic strip frames with x and animation stage paramaters / var frame0 = function(x,stage) { //x and y call pushMatrix(); translate(x,50); //background fill(191, 191, 255); rect(0,0,400,300); noStroke(); fill(5, 102, 0); arc(200,300,400,20,-180,0); //Man in the Green Jacket Man_Head(131,179,-1.00,1.00,-3); Man_Leg(124,251,-1.00,1.00,2); Man_Leg(134,251,-1.00,1.00,6); Man_Body(131,181,-1.00,1.00,0); Man_Arm(113,194,-1.00,1.00,75); //text fill(0); textSize(20); text("Once upon a time, there lived\na Man in a Green Jacket...",200,60); //frame stroke(0); noFill(); strokeWeight(7); rect(0,0,400,300); popMatrix(); }; var frame1 = function(x,stage) { //x and y calls pushMatrix(); translate(x,50); //background fill(191, 191, 255); rect(0,0,400,300); noStroke(); fill(5, 102, 0); arc(200,300,400,20,-180,0); //Man in the Green Jacket Man_Head(243,179,1.00,1.00,-3); Man_Leg(254,249,1.00,1.00,-4); Man_Leg(242,250,1.00,1.00,0); Man_Body(243,181,1.00,1.00,0); Man_Arm(261,194,1.00,1.00,75); //text fill(0); textSize(20); text("who wanted to know the\nSecret to Success.",200,60); //frame stroke(0); noFill(); strokeWeight(7); rect(0,0,400,300); popMatrix(); }; var frame2 = function(x,stage) { //x and y calls pushMatrix(); translate(x,50); //background fill(191, 191, 255); rect(0,0,400,300); noStroke(); fill(5, 102, 0); arc(200,300,400,20,-180,0); //animation stages for Man in the Green Jacket (walking) if(stage) { Man_Arm(200,223,1.00,1.00,127); Man_Head(198,179,1.00,1.00,-3); Man_Leg(210,243,1.00,1.00,-31); Man_Leg(194,250,1.00,1.00,6); Man_Body(199,181,1.00,1.00,0); Man_Arm(214,185,1.00,1.00,43); } else { Man_Arm(218,184,1.00,1.00,52); Man_Head(198,183,1.00,1.00,-3); Man_Leg(196,249,1.00,1.00,3); Man_Leg(212,247,1.00,1.00,-17); Man_Body(199,184,1.00,1.00,0); Man_Arm(212,219,1.00,1.00,114); } //text fill(0); textSize(20); text("So he set out walking one day\nto find the secret!",200,60); //frame stroke(0); noFill(); strokeWeight(7); rect(0,0,400,300); popMatrix(); }; var frame3 = function(x,stage) { //x and y calls pushMatrix(); translate(x,50); //background fill(191, 191, 255); rect(0,0,400,300); noStroke(); fill(5, 102, 0); arc(200,300,400,20,-180,0); //animation stages for the Man in the Green Jacket (walking) if(stage) { Man_Arm(200,223,1.00,1.00,127); Man_Head(198,179,1.00,1.00,-3); Man_Leg(210,243,1.00,1.00,-31); Man_Leg(194,250,1.00,1.00,6); Man_Body(199,181,1.00,1.00,0); Man_Arm(214,185,1.00,1.00,43); } else { Man_Arm(218,184,1.00,1.00,52); Man_Head(198,183,1.00,1.00,-3); Man_Leg(196,249,1.00,1.00,3); Man_Leg(212,247,1.00,1.00,-17); Man_Body(199,184,1.00,1.00,0); Man_Arm(212,219,1.00,1.00,114); } //text fill(0); textSize(20); text("He walked and he walked\nand he walked until...",200,60); //frame stroke(0); noFill(); strokeWeight(7); rect(0,0,400,300); popMatrix(); }; var frame4 = function(x,stage) { //x and y calls pushMatrix(); translate(x,50); //background fill(191, 191, 255); rect(0,0,400,300); noStroke(); fill(5, 102, 0); arc(200,300,400,20,-180,0); //Man in the Green Jacket Man_Arm(115,202,1.00,1.00,83); Man_Head(102,185,1.00,1.00,8); Man_Leg(94,249,1.00,1.05,1); Man_Leg(99,248.5,1.00,1.05,-2); Man_Body(102,184,1.00,1.00,10); Man_Arm(117,205,1.00,1.00,86); //Banker Banker(296,290,1.00,1.00,0); //text fill(0); textSize(20); text("He met a Banker.",200,60); //frame stroke(0); noFill(); strokeWeight(7); rect(0,0,400,300); popMatrix(); }; var frame5 = function(x,stage) { //x and y calls pushMatrix(); translate(x,50); //background fill(191, 191, 255); rect(0,0,400,300); noStroke(); fill(5, 102, 0); arc(200,300,400,20,-180,0); //Man in the Green Jacket Man_Arm(115,202,1.00,1.00,83); Man_Head(102,185,1.00,1.00,8); Man_Leg(94,249,1.00,1.05,1); Man_Leg(99,248.5,1.00,1.05,-2); Man_Body(102,184,1.00,1.00,10); Man_Arm(117,205,1.00,1.00,86); //Banker Banker(296,290,1.00,1.00,0); //text fill(0); textSize(20); text("The banker said the Secret of Success\nwas being rich and owning everything\nyou can.",200,60); //frame stroke(0); noFill(); strokeWeight(7); rect(0,0,400,300); popMatrix(); }; var frame6 = function(x,stage) { //x and y calls pushMatrix(); translate(x,50); //background fill(191, 191, 255); rect(0,0,400,300); noStroke(); fill(5, 102, 0); arc(200,300,400,20,-180,0); //Man in the Green Jacket Man_Arm(344,191,1.00,1.00,68); Man_Head(323,182,1.00,1.00,-3); Man_Leg(321,249,1.00,1.05,8); Man_Leg(331,248.5,1.00,1.05,-6); Man_Body(324,183,1.00,1.00,1); Man_Arm(337,212,1.00,1.00,101); //Banker (flipped) Banker(79,291,-1.00,1.00,0); //text fill(0); textSize(20); text("But the Man in the Green Jacket\nknew this was not true.",200,43); //frame stroke(0); noFill(); strokeWeight(7); rect(0,0,400,300); popMatrix(); }; var frame7 = function(x,stage) { //x and y calls pushMatrix(); translate(x,50); //background fill(191, 191, 255); rect(0,0,400,300); noStroke(); fill(5, 102, 0); arc(200,300,400,20,-180,0); //animation stage for Man in the Green Jacket (walking) if(stage) { Man_Arm(200,223,1.00,1.00,127); Man_Head(198,179,1.00,1.00,-3); Man_Leg(210,243,1.00,1.00,-31); Man_Leg(194,250,1.00,1.00,6); Man_Body(199,181,1.00,1.00,0); Man_Arm(214,185,1.00,1.00,43); } else { Man_Arm(218,184,1.00,1.00,52); Man_Head(198,183,1.00,1.00,-3); Man_Leg(196,249,1.00,1.00,3); Man_Leg(212,247,1.00,1.00,-17); Man_Body(199,184,1.00,1.00,0); Man_Arm(212,219,1.00,1.00,114); } //text fill(0); textSize(20); text("So he walked and he walked\nand he walked until...",200,60); //frame stroke(0); noFill(); strokeWeight(7); rect(0,0,400,300); popMatrix(); }; var frame8 = function(x,stage) { //x and y calls pushMatrix(); translate(x,50); //background fill(191, 191, 255); rect(0,0,400,300); noStroke(); fill(5, 102, 0); arc(200,300,400,20,-180,0); //Man in the Green Jacket Man_Arm(115,202,1.00,1.00,83); Man_Head(92,182,1.00,1.00,-14); Man_Leg(94,249,1.00,1.05,1); Man_Leg(99,248.5,1.00,1.05,-2); Man_Body(92,184,1.00,1.00,-3); Man_Arm(109,201,1.00,1.00,76); //Artist Artist_Leg(298,198,1.00,1.00,0); Artist_Body(300,200,1.00,1.00,-7); Artist_Head(302,99,1.00,1.00,0); //text fill(0); textSize(20); text("He met an Artist.",200,60); //frame stroke(0); noFill(); strokeWeight(7); rect(0,0,400,300); popMatrix(); }; var frame9 = function(x,stage) { //x and y calls pushMatrix(); translate(x,50); //background fill(191, 191, 255); rect(0,0,400,300); noStroke(); fill(5, 102, 0); arc(200,300,400,20,-180,0); //Man in the Green Jacket Man_Arm(115,202,1.00,1.00,83); Man_Head(92,182,1.00,1.00,-14); Man_Leg(94,249,1.00,1.05,1); Man_Leg(99,248.5,1.00,1.05,-2); Man_Body(92,184,1.00,1.00,-3); Man_Arm(109,201,1.00,1.00,76); //Artist Artist_Leg(298,198,1.00,1.00,0); Artist_Body(300,200,1.00,1.00,-7); Artist_Head(302,99,1.00,1.00,0); //text fill(0); textSize(20); text("The Artist said the Secret of Success\nwas found in knowledge of the arts,\ngreat paintings and books.",200,43); //frame stroke(0); noFill(); strokeWeight(7); rect(0,0,400,300); popMatrix(); }; var frame10 = function(x,stage) { //x and y calls pushMatrix(); translate(x,50); //background fill(191, 191, 255); rect(0,0,400,300); noStroke(); fill(5, 102, 0); arc(200,300,400,20,-180,0); //Man in the Green Jacket Man_Arm(344,191,1.00,1.00,68); Man_Head(323,182,1.00,1.00,-3); Man_Leg(321,249,1.00,1.05,8); Man_Leg(331,248.5,1.00,1.05,-6); Man_Body(324,183,1.00,1.00,1); Man_Arm(337,212,1.00,1.00,101); //Artist (flipped) Artist_Leg(100,198,-1.00,1.00,-4); Artist_Body(101,200,-1.00,1.00,-7); Artist_Head(100,99,-1.00,1.00,0); //text fill(0); textSize(20); text("But the Man in the Green Jacket\nknew this was not true.",200,43); //frame stroke(0); noFill(); strokeWeight(7); rect(0,0,400,300); popMatrix(); }; var frame11 = function(x,stage) { //x and y calls pushMatrix(); translate(x,50); //background fill(191, 191, 255); rect(0,0,400,300); noStroke(); fill(5, 102, 0); arc(200,300,400,20,-180,0); //animation stage for the Man in the Green Jacket (walking) if(stage) { Man_Arm(200,223,1.00,1.00,127); Man_Head(198,179,1.00,1.00,-3); Man_Leg(210,243,1.00,1.00,-31); Man_Leg(194,250,1.00,1.00,6); Man_Body(199,181,1.00,1.00,0); Man_Arm(214,185,1.00,1.00,43); } else { Man_Arm(218,184,1.00,1.00,52); Man_Head(198,183,1.00,1.00,-3); Man_Leg(196,249,1.00,1.00,3); Man_Leg(212,247,1.00,1.00,-17); Man_Body(199,184,1.00,1.00,0); Man_Arm(212,219,1.00,1.00,114); } //text fill(0); textSize(20); text("So he walked and he walked\nand he walked until...",200,60); //frame stroke(0); noFill(); strokeWeight(7); rect(0,0,400,300); popMatrix(); }; var frame12 = function(x,stage) { //x and y calls pushMatrix(); translate(x,50); //background fill(191, 191, 255); rect(0,0,400,300); noStroke(); fill(5, 102, 0); arc(200,300,400,20,-180,0); //Man in the Green Jacket Man_Arm(115,202,1.00,1.00,83); Man_Head(92,182,1.00,1.00,-4); Man_Leg(94,249,1.00,1.05,1); Man_Leg(99,248.5,1.00,1.05,-2); Man_Body(92,184,1.00,1.00,-3); Man_Arm(109,201,1.00,1.00,76); //Scientist Scientist(275,266,1.10,1.31,0); //text fill(0); textSize(20); text("He met a Scientist.",200,60); //frame stroke(0); noFill(); strokeWeight(7); rect(0,0,400,300); popMatrix(); }; var frame13 = function(x,stage) { //x and y calls pushMatrix(); translate(x,50); //background fill(191, 191, 255); rect(0,0,400,300); noStroke(); fill(5, 102, 0); arc(200,300,400,20,-180,0); //Man in the Green Jacket Man_Arm(115,202,1.00,1.00,83); Man_Head(92,182,1.00,1.00,-4); Man_Leg(94,249,1.00,1.05,1); Man_Leg(99,248.5,1.00,1.05,-2); Man_Body(92,184,1.00,1.00,-3); Man_Arm(109,201,1.00,1.00,76); //Scientist Scientist(275,266,1.10,1.31,0); //text fill(0); textSize(20); text("The Scientist said the Secret to Success\nwas found by understanding the laws\nof physics and chemistry.",200,60); //frame stroke(0); noFill(); strokeWeight(7); rect(0,0,400,300); popMatrix(); }; var frame14 = function(x,stage) { //x and y calls pushMatrix(); translate(x,50); //background fill(191, 191, 255); rect(0,0,400,300); noStroke(); fill(5, 102, 0); arc(200,300,400,20,-180,0); //Man in the Green Jacket Man_Arm(344,191,1.00,1.00,68); Man_Head(323,182,1.00,1.00,-3); Man_Leg(321,249,1.00,1.05,8); Man_Leg(331,248.5,1.00,1.05,-6); Man_Body(324,183,1.00,1.00,1); Man_Arm(337,212,1.00,1.00,101); //Scientist (flipped) Scientist(87,266,-1.10,1.31,0); //text fill(0); textSize(20); text("But the Man in the Green Jacket knew\nthis was not true.",200,60); //frame stroke(0); noFill(); strokeWeight(7); rect(0,0,400,300); popMatrix(); }; var frame15 = function(x,stage) { //x and y calls pushMatrix(); translate(x,50); //background fill(191, 191, 255); rect(0,0,400,300); noStroke(); fill(5, 102, 0); arc(200,300,400,20,-180,0); //animation stage for the Man in the Green Jacket (walking) if(stage) { Man_Head(198,183,1.00,1.00,3); Man_Leg(200,248,1.00,1.00,-16); Man_Leg(194,250,1.00,1.00,6); Man_Body(199,185,1.00,1.00,7); Man_Arm(214,195,1.00,1.00,72); } else { Man_Head(198,183,1.00,1.00,3); Man_Leg(193,250,1.00,1.00,9); Man_Leg(201,248,1.00,1.00,-5); Man_Body(199,185,1.00,1.00,7); Man_Arm(211,215,1.00,1.00,112); } //text fill(0); textSize(20); text("Now the Man in the Green Jacket\nwas beginning to wonder if he \nwould ever know the Secret\nto Success",200,60); //frame stroke(0); noFill(); strokeWeight(7); rect(0,0,400,300); popMatrix(); }; var frame16 = function(x,stage) { //x and y calls pushMatrix(); translate(x,50); //background fill(191, 191, 255); rect(0,0,400,300); noStroke(); fill(5, 102, 0); arc(200,300,400,20,-180,0); //Man in the Green Jacket Man_Head(122,183,1.00,1.00,3); Man_Leg(124,250,1.00,1.00,-2); Man_Leg(116,251,1.00,1.00,2); Man_Body(121,185,1.00,1.00,5); Man_Arm(138,201,1.00,1.00,83); //Wooden Sign Sign(300,291,1.00,1.00,0); //text fill(0); textSize(20); text("But then the Man in the Green Jacket\nsaw a wooden sign.",200,60); //frame stroke(0); noFill(); strokeWeight(7); rect(0,0,400,300); popMatrix(); }; var frame17 = function(x,stage) { //x and y calls pushMatrix(); translate(x,50); //background fill(191, 191, 255); rect(0,0,400,300); noStroke(); fill(5, 102, 0); arc(200,300,400,20,-180,0); //Man in the Green Jacket Man_Head(122,183,1.00,1.00,3); Man_Leg(124,250,1.00,1.00,-2); Man_Leg(116,251,1.00,1.00,2); Man_Body(121,185,1.00,1.00,5); Man_Arm(138,201,1.00,1.00,83); //Wooden Sign Sign(300,291,1.00,1.00,0); //text fill(0); textSize(20); text("The Sign said the Secret to Success\nwas found by Thinking Outside\nof The Box.",200,60); //frame stroke(0); noFill(); strokeWeight(7); rect(0,0,400,300); popMatrix(); }; var frame18 = function(x,stage) { //x and y calls pushMatrix(); translate(x,50); //background fill(191, 191, 255); rect(0,0,400,300); noStroke(); fill(5, 102, 0); arc(200,300,400,20,-180,0); //Man in the Green Jacket Man_Head(122,183,1.00,1.00,3); Man_Leg(124,250,1.00,1.00,-2); Man_Leg(116,251,1.00,1.00,2); Man_Body(121,185,1.00,1.00,5); Man_Arm(138,201,1.00,1.00,83); //Wooden Sign Sign(300,291,1.00,1.00,0); //frame stroke(0); noFill(); strokeWeight(7); rect(0,0,400,300); popMatrix(); }; var frame19 = function(x,stage) { //x and y calls pushMatrix(); translate(x,50); //background fill(191, 191, 255); rect(0,0,400,300); noStroke(); fill(5, 102, 0); arc(200,300,400,20,-180,0); //Man in the Green Jacket (looking at the screen) Man_Head_Front(122,185,1.00,1.00,3,false); Man_Leg(124,250,1.00,1.00,-2); Man_Leg(116,251,1.00,1.00,2); Man_Body(121,185,1.00,1.00,5); Man_Arm(138,201,1.00,1.00,83); //Wooden Sign Sign(300,291,1.00,1.00,0); //frame stroke(0); noFill(); strokeWeight(7); rect(0,0,400,300); popMatrix(); }; var frame20 = function(x,stage) { //x and y calls pushMatrix(); translate(x,50); //background fill(191, 191, 255); rect(0,0,400,300); noStroke(); fill(5, 102, 0); arc(200,300,400,20,-180,0); //Man in the Green Jacket (close looking at the screen) Man_Arm(128,256,-0.91,1.37,122); Man_Body_Front(141,206,1.38,1.47,0); Man_Head_Front(137,212,1.38,1.39,3); Man_Arm(116,256,0.91,1.37,122); //Wooden Sign Sign(300,291,1.00,1.00,0); //frame stroke(0); noFill(); strokeWeight(7); rect(0,0,400,300); popMatrix(); }; var frame21 = function(x,stage) { //x and y calls pushMatrix(); translate(x,50); //background fill(191, 191, 255); rect(0,0,400,300); noStroke(); fill(5, 102, 0); arc(200,300,400,20,-180,0); //frame stroke(0); noFill(); strokeWeight(7); rect(0,0,400,300); //Man in the Green Jacket (climbing out) Man_Arm(174,240,0.91,1.37,95); Man_Leg(120,308,1.3,1.3,4); Man_Head(156,234,1.38,1.39,30); Man_Body(157,230,1.38,1.47,29); Man_Arm(140,277,1.3,1.3,159); //Wooden Sign Sign(300,291,1.00,1.00,0); popMatrix(); }; var frame22 = function(x,stage) { //x and y calls pushMatrix(); translate(x,50); //background fill(191, 191, 255); rect(0,0,400,300); noStroke(); fill(5, 102, 0); arc(200,300,400,20,-180,0); //frame stroke(0); noFill(); strokeWeight(7); rect(0,0,400,300); //Man in the Green Jacket (standing outside) Man_Arm(174,240,0.91,1.37,95); Man_Leg(164,325,1.3,1.3,1); Man_Leg(171,325,1.3,1.3,1); Man_Head(156,231,1.38,1.39,-8); Man_Body(157,230,1.38,1.47,-5); Man_Arm(181,240,1.3,1.3,65); //Wooden Sign Sign(300,291,1.00,1.00,0); popMatrix(); }; var frame23 = function(x,stage) { //x and y calls pushMatrix(); translate(x,50); //Man in the Green Jacket (looking at the screen w/ smile) Man_Arm(174,240,0.91,1.37,95); Man_Leg(164,325,1.3,1.3,1); Man_Leg(171,325,1.3,1.3,1); Man_Head_Front(158,232,1.38,1.39,-8,true); Man_Body(157,230,1.38,1.47,-5); Man_Arm(181,240,1.3,1.3,65); //text fill(0); textSize(20); text("And that was how the Man in the Green Jacket\nfound the Secret to his Success!",200,60); popMatrix(); }; /* Array to store all the frames for access during animation / var frames = [frame0,frame1,frame2,frame3,frame4,frame5,frame6,frame7,frame8,frame9,frame10,frame11,frame12,frame13,frame14,frame15,frame16,frame17,frame18,frame19,frame20,frame21,frame22,frame23]; /* Scene constructor and instance "scene" of Scene / var Scene = function() { //scene variable (defaule logo) this.scene = "logo"; }; var scene = new Scene(); /* ѕнєяℓσ¢к нσℓмєѕ logo animation and transition variables / var inTrans = false, transTo = ""; var Logo = function(nxt) { //next scene paramater defined variable this.nxt = nxt; //x of sleft and sright this.x = -800; this.x2 = 1400; //array of characters this.t = ['ѕ','н','є','я','ℓ','σ','¢','к',' ','н','σ','ℓ','м','є','ѕ']; //movement of the characters this.y = []; this.tx = []; this.distance = []; //start and end of the characters this.start = 180; this.end = 440; this.begin = 970; //pushing values into this.tx, y, and distance for(var i = this.start; i < this.end; i += (this.end-this.start)/this.t.length) { this.tx.push(i); this.y.push(this.begin); this.distance.push(2); this.begin += 200; } //rendering of sLeft side this.sLeft = function(x,y,s) { pushMatrix(); translate(x,y); scale(s); noStroke(); stroke(0, 0, 0); fill(0, 0, 0); beginShape(); vertex(221,-220); bezierVertex(21,-74,65,-125,-50,-43); bezierVertex(-91,-11,-56,-14,-19,-20); bezierVertex(50,-28,45,-22,14,7); bezierVertex(-78,91,-73,76,-242,220); bezierVertex(-137,116,-150,22,-150,-87); bezierVertex(-160,-179,-90,-140,39,-154); bezierVertex(137,-169,128,-167,220,-219); endShape(); noStroke(); for(var i = 0.80; i < 1.01; i += 0.02) { pushMatrix(); translate(1,-3); scale(i); fill(128, 43, 9, 40); beginShape(); vertex(221,-220); bezierVertex(21,-74,65,-125,-50,-43); bezierVertex(-91,-11,-56,-14,-19,-20); bezierVertex(50,-28,45,-22,14,7); bezierVertex(-78,91,-73,76,-242,220); bezierVertex(-137,116,-150,22,-150,-87); bezierVertex(-160,-179,-90,-140,39,-154); bezierVertex(137,-169,128,-167,220,-219); endShape(); popMatrix(); } popMatrix(); }; //rendering of sRight side this.sRight = function(x,y,s) { pushMatrix(); translate(x,y); scale(s); noStroke(); stroke(0, 0, 0); fill(0, 0, 0); beginShape(); vertex(243,-220); bezierVertex(214,-187,180,-160,94,-108); bezierVertex(-133,12,11,-48,46,-39); bezierVertex(79,-33,53,7,7,46); bezierVertex(-54,97,-25,71,-226,223); bezierVertex(-54,122,-82,152,103,145); bezierVertex(186,144,152,53,155,-34); bezierVertex(157,-119,137,-103,240,-216); endShape(); noStroke(); for(var i = 0.76; i < 0.98; i += 0.02) { pushMatrix(); translate(8,-2); scale(i); fill(128, 43, 9, 40); beginShape(); vertex(243,-220); bezierVertex(214,-187,180,-160,94,-108); bezierVertex(-133,12,11,-48,46,-39); bezierVertex(79,-33,53,7,7,46); bezierVertex(-54,97,-25,71,-226,223); bezierVertex(-54,122,-82,152,103,145); bezierVertex(186,144,152,53,155,-34); bezierVertex(157,-119,137,-103,240,-216); endShape(); popMatrix(); } popMatrix(); }; //animation rendering this.draw = function() { //background background(0, 0, 0); //increment (or decrement) variables for smooth animation this.d = abs(this.x-312); this.x += 0.15this.d; this.d2 = abs(312-this.x2); this.x2 -= 0.15this.d2; //render sLeft and sRight for logo this.sLeft(this.x,189,0.8); this.sRight(this.x2,189,0.8); //move the characters if(this.d < 3) { for(var i = 0; i < this.t.length; i++) { textSize(11); this.distance[i] = this.y[i]-620; this.y[i] -= 0.1this.distance[i]; fill(255); text(this.t[i],this.tx[i],this.y[i]-250); } } //transition out of the logo if(this.distance[this.distance.length-2] < 0.01) { inTrans = true; transTo = "menu"; } }; }; var logo = new Logo("menu"); /** Comic object to play frames / var Comic = function() { //array to hold frames x values this.strip = []; //starter x this.x = 0; //animation time this.time = 0; //decides stage of animation (if applicable) this.animate = 0; //total time of two cycle animation this.aMax = 70; //starter index for rendering this.newIndex = -1; this.moveFrame = false; //push values into strip for all frames for(var i = 0; i < 24; i++) { this.strip.push(i500+100); } //move function this.move = function(i) { //move x using smooth animation the correct distance this.x -= 0.1(this.strip[i]+this.x+400); //alert draw when the move is over if(0.1(this.strip[i]+this.x+400) < 0.1) { this.moveFrame = false; } }; //draw and animation this.draw = function() { //background (white) background(255); //comic strip lines for(var i = -5; i < width+10; i += 20) { strokeWeight(2); stroke(200, 150); line(0,i,width+1,i); line(i,0,i,height+1); } //x and y calls pushMatrix(); translate(this.x,0); //decide animation stage for the frame if(this.animate < this.aMax/2) { this.frameStage = 0; } else { this.frameStage = 1; } //only draw 3 comic strips at a time to slow down lag for(var i = this.newIndex; i < this.newIndex+2; i++) { if(frames[i] !== undefined) { frames[i](this.strip[i],this.frameStage); } } //decide when to move on to the next frame if(this.time > 200 && this.newIndex < 22) { this.moveFrame = true; this.newIndex++; this.time = 0; } //make the move when this.moveFrame is true if(this.moveFrame) { this.move(this.newIndex); } //increase time and individual comic strip animation this.time++; this.animate++; //reset individual comic strip animation if(this.animate > this.aMax) { this.animate = 0; } }; }; var comic = new Comic(); /** Scene transitions and instance "transene" of Transition / var Transition = function() { //transition time and oppacity this.time = 0; this.op = 0; //run function this.run = function() { //draw a white rectangle with 0 oppacity noStroke(); fill(255, 255, 255, this.op); rect(0, 0, width 2, height * 2); //if transition is true run the transition if (inTrans) { //step one increase oppacity if (this.time > 0 && this.time < 15) { this.op += 18; } //instant scene transition if (this.time === 15) { scene.to(transTo); } //decrease oppacity if (this.time > 15) { this.op -= 18; } //reset time and release transition control if (this.time > 30) { this.time = 0; inTrans = false; this.op = 0; } //increase time this.time++; } }; }; var transene = new Transition(); /** Button object and instance "play" of Button / var Button = function(x,y,s,nxt) { //paramater defined variables x, y, s, and nxt this.x = x; this.y = y; this.s = s; this.nxt = nxt; //draw function this.draw = function() { //if mouse is inside the circle if(dist(mouseX,mouseY,this.x,this.y) < this.s/2) { //cursor to hand type hoverButton = true; if(mouseIsPressed) { //transition to the next scene inTrans = true; transTo = this.nxt; } //draw the button pushMatrix(); translate(0,3); stroke(150, 200); strokeWeight(3); fill(172, 255, 168); ellipse(this.x,this.y,this.s,this.s); //play triangle with shadow (mouse not pressed) strokeWeight(23); strokeJoin(ROUND); if(!mouseIsPressed) { stroke(0, 100); triangle(this.x-8,this.y+-18,this.x+15,this.y+3,this.x-8,this.y+19); } else { pushMatrix(); translate(0,3); } stroke(255); fill(255); triangle(this.x-8,this.y+-18,this.x+15,this.y+0,this.x-8,this.y+16); if(mouseIsPressed) { popMatrix(); } popMatrix(); } else { //when the mouse is not over the button cursor(ARROW); fill(0, 130); ellipse(this.x,this.y+6,this.s,this.s); stroke(150, 200); strokeWeight(3); fill(172, 255, 168); ellipse(this.x,this.y,this.s,this.s); strokeWeight(23); strokeJoin(ROUND); stroke(0, 100); triangle(this.x-8,this.y+-18,this.x+15,this.y+3,this.x-8,this.y+19); stroke(255); fill(255); triangle(this.x-8,this.y+-18,this.x+15,this.y+0,this.x-8,this.y+16); } }; }; var play = new Button(300,268,96,"comic"); /* Scene prototypes/event handlers / Scene.prototype.render = function() { //switch and decide which scene to play switch(this.scene) { case "logo": //draw logo (sans serif text) textFont(createFont("sans serif")); logo.draw(); break; case "menu": //title page background textFont(createFont("cursive")); textAlign(CENTER,CENTER); background(250); for(var i = -5; i < width+10; i += 20) { strokeWeight(2); stroke(200, 150); line(0,i,width+1,i); line(i,0,i,height+1); } //title page text shadow fill(0, 100); textSize(30); text("The",145,69); text("in",256,91); text("the",255,122); textSize(95); text("Man",135,96); textSize(53); pushMatrix(); scale(2,0.9); text("Green",218,86); textSize(45); text("Jacket",219,130); popMatrix(); //title page text fill(0); textSize(30); text("The",145,66); text("in",256,89); text("the",255,120); textSize(95); text("Man",135,92); textSize(53); pushMatrix(); scale(2,0.9); text("Green",218,82); textSize(45); text("Jacket",219,126); popMatrix(); play.draw(); //corner logo (bottom right) strokeWeight(1); logo.sRight(width-25,height-25,0.1); logo.sLeft(width-26,height-25,0.1); break; case "comic": //draw the comic (animation included) comic.draw(); break; } //run transition transene.run(); //decide correct button type cursor(hoverButton ? HAND : ARROW); //reset hoverButton to false after every frame hoverButton = false; }; Scene.prototype.to = function(nxt) { //change scene to parameter next instantly this.scene = nxt; }; /* Render and animate the program in the draw loop */ draw = function() { //render the scene scene.render(); };
Folds	19,60,61,89,90,123,124,153,154,190,191,239,242,269,270,303,304,331,334,419,422,490,493,532,535,566,567,598,599,640,641,682,683,718,719,754,755,790,791,832,833,870,871,908,909,946,947,988,989,1024,1025,1060,1061,1096,1097,1136,1137,1171,1172,1206,1207,1236,1237,1266,1267,1295,1296,1325,1326,1356,1357,1376,1382,1385,1390,1537,1541,1629,1633,1673,1677,1741,1745,1817,1818,1821,1824,1827
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgOrLicvZCQw
Votes	598
Spin-Offs	45
Type
Width	600
Height	400
User Flagged	false
Origin Scratchpad	{"id":"5118555340832768","title":"Contest: Be Creative - Processing JS","deleted":"false","official":"false"}
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	ѕнєяℓσ¢к нσℓмєѕ
Author Name	JohnHWatsonMD
Author ID	kaid_173937876131831563599968
Author Profile Access	COACH

Archive Data

Added	1 years ago, 1707881068239
Updated	8 months ago, 1744820741879
Source Deleted	unknown