Viewing Program

Program Data

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

Title	Dear Evan Hansen
ID	5595528774500352
Created	4 years ago, 1620475770482
Updated	4 years ago, 1628595594591
Code	// Musical Theatre Series - Installment #4 // View all installments here: https://www.khanacademy.org/cs/musicalTheatreIndex/4956189022437376?width=600 /** * AquA217 presents * "Dear Evan Hansen" I was listening to a Words Fail slime tutorial cough cough on YouTube, and was struck with an inspiration to make a Dear Evan Hansen graphic. So...here it is! Pretty proud of it, I think it's one of my best graphics. Enjoy! Sincerely, me xD --- Subscribe for more cool stuff: https://www.khanacademy.org/computer-programming/sub-to-aqua217/5410349576650752 / / Evan Hansen figure based on https://ih1.redbubble.net/image.538897661.4818/poster,504x498,f8f8f8-pad,600x600,f8f8f8.u3.jpg Background based loosely on https://mir-s3-cdn-cf.behance.net/projects/404/9d94f094879595.5e89ff7a87825.jpg / // IMAGE REFERENCES / Extra Program Info: Evan Hansen graphic worked on for a total of three hours. Background worked on for total of one and a half hours. Total time for project: four and a half hours. I decided not use any tools for this particular graphic, all code is mine and hand-typed :) / //EXTRA PROGRAM INFO enableContextMenu(); cursor('none'); var fonts = ['Avenir', 'Avenir Next', 'Trebuchet MS', 'Helevtica', 'Times New Roman', 'Palatino', 'Comic Sans MS']; //For randomized fonts //Gradient texture for triangles background(119, 158, 199); stroke(218,232,250); strokeWeight(1); for(var i = 0; i < 150; i++){ fill(226, 234, 245,6); ellipse(random(0,400), random(0,400),100,100); } filter(BLUR,25); var grad = get(); //Triangles in the backdrop background(0); fill(255); triangle(300,400,160,400,350,10); triangle(280,400,126,400,40,120); var tri = get(); grad.mask(tri); // Mask triangles //Evan Hansen function evan (x,y,s){ pushMatrix(); translate(x,y); scale(s); //Evan //{ pushMatrix(); scale(0.91); translate(16,4); noStroke(); /PANTS*/ pushMatrix(); scale(1.1); translate(-16,-4); fill(185,135,100); beginShape(); vertex(145,374); vertex(146,384); vertex(146,388); vertex(149,400); vertex(272,400); vertex(275,392); vertex(275,386); vertex(275,379); vertex(275,368); endShape(CLOSE); popMatrix(); //Pant detail stroke(174,128,92); strokeWeight(1.5); line(191,412,194,419); line(194,419,214,429); line(214,429,231,440); line(250,439,273,427); line(273,427,274,423); line(274,423,272,409); line(203,438,194,431); line(194,431,176,426); strokeWeight(2); line(151,411,160,440); stroke(103,70,40); line(216,410,218,425); line(218,425,217,436); //Shadow for(var i = 0; i < 50; i+=2){ strokeWeight(i1); stroke(0,2); line(260,410,160,410); } /SHIRT/ noStroke(); //Main shirt body fill(218,235,246); //Creases in the bottom quad(220,400,260,415,265,411,270,400); ellipse(240,400,70,20); ellipse(280,396,15,20); ellipse(200,400,100,15); ellipse(270,400,30,10); ellipse(150,400,30,16); beginShape(); vertex(161,139); vertex(158,141); vertex(142,147); vertex(138,148); vertex(129,154); vertex(121,158); vertex(118,163); vertex(115,166); vertex(108,177); vertex(106,186); vertex(104,197); vertex(102,211); vertex(101,221); vertex(98,232); vertex(137,240); vertex(150,277); vertex(154,289); vertex(151,299); vertex(149,325); vertex(142,327); vertex(141,335); vertex(137,346); vertex(135,352); vertex(133,361); vertex(133,369); vertex(130,373); vertex(128,383); vertex(127,394); vertex(125,402); vertex(285,401); vertex(285,386); vertex(285,381); vertex(284,375); vertex(283,368); vertex(283,362); vertex(282,354); vertex(281,349); vertex(281,341); vertex(278,332); vertex(271,292); vertex(270,286); vertex(270,279); vertex(271,272); vertex(272,266); vertex(273,257); vertex(274,250); vertex(275,247); vertex(276,241); vertex(276,236); vertex(275,232); vertex(277,236); vertex(315,219); vertex(318,213); vertex(317,206); vertex(314,199); vertex(311,188); vertex(307,181); vertex(303,173); vertex(303,165); vertex(299,158); vertex(295,156); vertex(289,148); vertex(284,145); vertex(268,140); vertex(239,133); vertex(210,137); vertex(210,144); vertex(213,160); endShape(CLOSE); //end of sleeves fill(75,75,99); //left beginShape(); vertex(98,233); vertex(98,239); vertex(100,242); vertex(109,244); vertex(123,246); vertex(136,249); vertex(139,246); vertex(138,240); endShape(CLOSE); beginShape(); vertex(277,236); vertex(281,245); vertex(325,227); vertex(323,225); vertex(323,225); vertex(323,221); vertex(320,213); endShape(CLOSE); //STRIPES //Detail on shirt strokeWeight(1.75); stroke(181,196,206); line(147,329,146,335); line(146,335,143,348); line(143,348,141,353); line(141,353,141,360); line(141,360,135,373); line(137,378,135,381); line(135,381,134,388); line(123,401,133,396); line(133,396,133,391); stroke(1); stroke(181,196,206,90); line(148,365,146,374); line(146,374,146,385); line(146,385,152,407); line(173,356,173,362); line(173,362,172,370); line(172,370,171,379); line(171,379,175,391); line(175,391,181,402); line(147,329,146,335); line(294,166,294,192); line(294,192,286,227); line(303,190,303,205); line(303,205,297,221); line(155,192,156,205); line(156,205,165,235); line(218,193,220,198); line(220,198,214,218); line(116,182,129,204); line(113,203,122,221); line(122,221,133,228); line(202,181,203,199); stroke(228, 239, 247,225); line(204,218,206,234); line(206,234,202,288); line(226,203,229,224); line(229,224,227,251); line(227,251,230,292); //Darker stripes stroke(92,108,120,255); strokeWeight(2.75); line(155,164,171,156); line(112,171,132,179); line(150,187,171,182); line(171,182,180,183); line(180,183,201,176); line(206,174,219,173); line(219,173,222,177); line(222,177,225,173); line(225,173,256,177); line(229,148,249,148); line(271,151,277,152); line(277,152,280,152); line(280,152,282,152); line(281,178,300,165); line(282,201,308,190); line(277,225,290,224); line(290,224,314,213); line(106,199,128,206); line(128,206,133,209); line(101,224,135,231); line(150,218,218,200); line(218,200,225,200); line(225,200,245,200); line(245,200,265,208); line(155,243,223,231); line(223,231,225,229); line(225,229,248,232); line(248,232,257,233); line(257,233,263,237); line(154,268,220,260); line(220,260,235,259); line(235,259,266,263); line(152,294,200,293); line(200,293,220,289); line(220,289,241,288); line(241,288,269,291); line(203,321,210,320); line(137,345,148,350); line(148,350,168,352); line(201,349,212,349); line(257,345,278,345); line(131,372,141,378); line(141,378,159,376); line(159,376,218,376); line(218,376,231,375); line(231,375,254,374); line(254,374,267,374); line(267,374,281,369); line(135,403,275,400); line(275,400,283,396); //Lighter stripes strokeWeight(1.5); stroke(137,155,179,255); line(119,161,129,161); line(129,161,133,163); line(106,187,123,190); line(123,190,133,195); line(102,212,108,212); line(108,212,127,216); line(127,216,132,218); line(132,218,134,219); line(153,173,157,177); line(157,177,163,170); line(163,170,195,165); line(208,162,218,161); line(219,161,227,159); line(227,159,235,161); line(235,161,250,162); line(275,166,282,167); line(291,151,288,157); line(288,157,284,159); line(279,198,284,188); line(284,188,304,177); line(277,216,312,201); line(149,203,208,189); line(208,189,231,186); line(231,186,261,192); line(152,230,222,215); line(222,215,237,215); line(237,215,263,221); line(153,256,201,248); line(201,248,224,244); line(224,244,238,243); line(238,243,263,249); line(152,283,220,276); line(220,276,231,273); line(231,273,268,277); line(171,308,203,306); line(203,306,226,303); line(226,303,256,304); line(142,334,146,337); line(146,337,159,336); line(134,361,141,363); line(141,363,220,363); line(236,361,256,359); line(256,359,265,359); line(265,359,270,358); line(270,358,280,356); line(127,386,134,391); line(134,391,188,391); line(188,391,197,390); line(197,390,234,388); line(234,388,257,385); line(257,385,264,387); line(264,387,270,384); line(270,384,276,384); line(276,384,284,380); line(236,136,240,139); line(240,139,245,140); line(162,145,159,146); line(131,152,133,155); //Shadow for(var i = 0; i < 50; i++){ strokeWeight(i1.5); stroke(0,1); line(205,340,150,340); strokeWeight(0.3i); stroke(0,2); line(217,345,148,330); } noStroke(); //Button fill(40,44,48); ellipse(209.5,184,4,4); /BACKPACK/ //backpack strap left fill(56,52,52,255); beginShape(); vertex(159,141); vertex(157,156); vertex(153,172); vertex(150,186); vertex(149,199); vertex(149,213); vertex(152,225); vertex(155,237); vertex(154,273); vertex(154,279); vertex(146,298); vertex(130,337); vertex(134,351); vertex(134,359); vertex(133,368); vertex(128,370); vertex(128,363); vertex(127,356); vertex(124,344); vertex(122,339); vertex(124,325); vertex(140,295); vertex(144,281); vertex(148,278); vertex(144,266); vertex(140,247); vertex(137,228); vertex(134,213); vertex(134,195); vertex(134,171); vertex(134,162); vertex(139,148); vertex(143,149); endShape(CLOSE); //backpack strap right beginShape(); vertex(243,133); vertex(266,205); vertex(263,231); vertex(266,258); vertex(271,287); vertex(285,381); vertex(285,400); vertex(293,400); vertex(295,393); vertex(293,380); vertex(290,355); vertex(286,323); vertex(274,284); vertex(271,274); vertex(272,265); vertex(273,257); vertex(273,242); vertex(277,215); vertex(278,202); vertex(278,177); vertex(275,164); vertex(271,151); vertex(270,144); vertex(265,140); endShape(CLOSE); ellipse(289,400,10,15); //Detail stroke(42,41,41); strokeWeight(2); line(148,147,141,174); line(140,174,146,250); line(146,250,150,272); line(255,137,261,149); line(261,149,268,167); line(268,167,271,190); line(271,190,271,241); noStroke(); /ARMS/ fill(254,217,203,255); //Left arm beginShape(); vertex(99,242); vertex(100,249); vertex(99,256); vertex(99,262); vertex(99,273); vertex(99,279); vertex(98,288); vertex(98,294); vertex(98,297); vertex(101,301); vertex(109,310); vertex(116,316); vertex(125,320); vertex(138,327); vertex(149,328); vertex(154,330); vertex(160,334); vertex(163,340); vertex(165,349); vertex(167,350); vertex(182,359); vertex(185,358); vertex(185,357); vertex(193,355); vertex(195,353); vertex(199,352); vertex(200,349); vertex(205,347); vertex(206,342); vertex(205,339); vertex(205,337); vertex(207,335); vertex(208,332); vertex(205,325); vertex(201,320); vertex(196,313); vertex(191,310); vertex(185,309); vertex(179,308); vertex(173,310); vertex(161,304); vertex(151,300); vertex(142,296); vertex(128,281); vertex(128,280); vertex(134,260); vertex(136,248); endShape(CLOSE); //Right upper-arm beginShape(); vertex(281,246); vertex(286,259); vertex(290,269); vertex(285,272); vertex(274,281); vertex(290,283); vertex(298,286); vertex(304,295); vertex(305,300); vertex(315,287); vertex(317,284); vertex(317,284); vertex(317,269); vertex(317,261); vertex(317,253); vertex(318,230); endShape(CLOSE); //Right thumb beginShape(); vertex(225,324); vertex(223,324); vertex(221,324); vertex(219,327); vertex(215,328); vertex(212,328); vertex(209,326); vertex(209,325); vertex(210,321); vertex(210,321); vertex(212,317); vertex(216,315); vertex(220,312); vertex(223,311); vertex(226,310); vertex(229,308); vertex(230,309); endShape(CLOSE); //Hand right beginShape(); vertex(245,356); vertex(238,359); vertex(235,364); vertex(228,365); vertex(222,364); vertex(222,362); vertex(219,358); vertex(215,353); vertex(215,353); vertex(215,351); vertex(214,349); vertex(212,347); vertex(208,345); vertex(208,342); vertex(206,339); vertex(207,337); vertex(211,335); vertex(216,332); vertex(222,329); vertex(224,326); vertex(229,327); vertex(250,340); endShape(CLOSE); //Cast fill(255); beginShape(); vertex(245,357); vertex(257,346); vertex(281,323); vertex(306,302); vertex(306,299); vertex(305,296); vertex(304,292); vertex(302,290); vertex(299,287); vertex(296,284); vertex(292,282); vertex(287,280); vertex(280,281); vertex(275,280); vertex(256,304); vertex(248,310); vertex(243,311); vertex(241,312); vertex(240,310); vertex(235,308); vertex(231,309); vertex(228,309); vertex(230,312); vertex(227,314); vertex(225,319); vertex(223,324); vertex(222,327); vertex(227,328); vertex(232,330); vertex(236,337); vertex(241,343); endShape(CLOSE); //Finger creases? Idk what it's called but the gaps and lines between the fingers and arms stroke(241,199,187,255); line(110,278,120,279); line(120,279,127,281); line(290,268,292,265); line(292,265,295,264); line(295,263,299,264); line(225,337,223,339); line(223,339,211,345); line(233,347,218,354); line(237,355,223,361); line(191,321,195,330); line(195,330,199,333); line(199,333,204,336); line(199,348,194,346); line(194,346,191,344); line(191,344,188,338); line(192,352,182,349); line(182,349,178,345); line(178,345,176,341); line(183,356,172,350); line(169,342,173,351); noStroke(); /COLLAR/ //white part (idk what it's called) fill(255,249,242); beginShape(); vertex(190,148); vertex(187,151); vertex(187,153); vertex(197,164); vertex(198,166); vertex(204,185); vertex(204,168); vertex(209,164); vertex(212,163); vertex(220,155); vertex(227,147); vertex(227,140); vertex(224,140); endShape(CLOSE); //left fill(69,74,95); beginShape(); vertex(174,121); vertex(175,130); vertex(171,133); vertex(171,135); vertex(181,143); vertex(189,148); vertex(187,152); vertex(187,155); vertex(184,158); vertex(178,158); vertex(174,159); vertex(171,157); vertex(171,154); vertex(170,154); vertex(166,151); vertex(164,151); vertex(164,149); vertex(162,145); vertex(161,139); vertex(163,138); vertex(164,135); vertex(164,128); vertex(168,124); vertex(176,121); endShape(CLOSE); //right beginShape(); vertex(224,119); vertex(224,126); vertex(225,129); vertex(226,134); vertex(225,140); vertex(228,140); vertex(230,140); vertex(230,142); vertex(232,145); vertex(233,146); vertex(233,143); vertex(233,142); vertex(234,139); vertex(236,136); vertex(236,134); vertex(236,131); endShape(CLOSE); /NECK/ //neck main fill(253,217,206); beginShape(); vertex(174,116); vertex(174,129); vertex(171,134); vertex(175,139); vertex(181,143); vertex(191,148); vertex(208,161); vertex(224,142); vertex(225,136); vertex(226,133); vertex(225,128); vertex(225,125); vertex(224,120); vertex(223,120); vertex(222,101); endShape(CLOSE); //neck shadow fill(241,203,190); beginShape(); vertex(169,92); vertex(170,104); vertex(175,117); vertex(175,125); vertex(175,130); vertex(171,135); vertex(182,138); vertex(187,141); vertex(195,148); vertex(199,151); vertex(202,152); vertex(205,152); vertex(207,146); vertex(210,138); vertex(214,134); vertex(216,127); vertex(216,124); vertex(216,114); vertex(217,99); endShape(CLOSE); /HEAD/ //ear left fill(252,218,203); beginShape(); vertex(169,91); vertex(167,87); vertex(165,83); vertex(164,80); vertex(162,78); vertex(157,78); vertex(156,80); vertex(157,85); vertex(157,88); vertex(158,90); vertex(159,92); vertex(162,96); vertex(166,102); vertex(169,103); endShape(CLOSE); //left ear shadow fill(241,203,190); beginShape(); vertex(164,80); vertex(162,82); vertex(163,87); vertex(165,90); vertex(169,92); vertex(168,89); endShape(CLOSE); //main head + right ear fill(255,217,203); ellipse(194,60,58,57); beginShape(); vertex(190,116); vertex(198,117); vertex(199,117); vertex(202,116); vertex(204,117); vertex(208,117); vertex(210,115); vertex(216,111); vertex(219,105); vertex(221,100); vertex(223,100); vertex(224,101); vertex(228,97); vertex(229,93); vertex(229,87); vertex(230,83); vertex(231,81); vertex(231,73); vertex(231,70); vertex(230,70); vertex(169,64); vertex(167,87); vertex(171,97); vertex(176,106); vertex(184,113); endShape(CLOSE); /HAIR/ fill(153,113,97); beginShape(); vertex(168,88); vertex(168,67); vertex(171,63); vertex(171,62); vertex(171,56); vertex(169,56); vertex(169,53); vertex(169,50); vertex(173,46); vertex(175,44); vertex(176,43); vertex(177,42); vertex(177,40); vertex(185,37); vertex(186,39); vertex(189,37); vertex(194,37); vertex(199,37); vertex(203,38); vertex(207,41); vertex(210,41); vertex(213,43); vertex(217,45); vertex(218,52); vertex(220,61); vertex(221,66); vertex(223,72); vertex(224,78); vertex(230,69); vertex(228,69); vertex(227,49); vertex(225,48); vertex(224,34); vertex(224,33); vertex(221,30); vertex(219,29); vertex(218,27); vertex(211,24); vertex(209,22); vertex(207,19); vertex(203,17); vertex(199,17); vertex(194,16); vertex(191,18); vertex(189,18); vertex(187,18); vertex(184,22); vertex(177,27); vertex(170,30); vertex(164,40); vertex(158,46); vertex(154,55); vertex(154,65); vertex(157,79); vertex(161,78); vertex(165,80); endShape(CLOSE); popMatrix(); //} popMatrix(); } //Speech Bubble Function function bubble(x,y,s1,s2){ pushMatrix(); translate(x,y); scale(s1,s2); rect(25,25,85,50,10); triangle(88,74.5,100,74.5,100,90); popMatrix(); } //Background for (var i = 0; i < 401; i++) { noStroke(); fill(lerpColor(color(218,232,250),color(189, 204, 222,255), i / 400)); rect(0, i, 400, -100); } //Clouds for(var i = 0; i < 150; i++){ fill(255,10); ellipse(random(0,400), random(0,120),50,25); } filter(BLUR,3); //Stars for(var i = 0; i < 50; i++){ fill(255); strokeWeight(0.125i); stroke(255,20); ellipse(random(0,400), random(0,300),2,2); } filter(BLUR); //Faint lines in the bottom of the background strokeWeight(1); for(var i = 0; i < 400; i++){ stroke(255,25); line(i,400, i,random(206,400)); } noStroke(); //Randomly generated "you will be found" text for(var i = 0; i < 25; i++){ textFont(createFont(fonts[floor(random(0,6))])); textSize(random(2,30)); fill(255,random(10,50)); text("#youwillbefound",random(-100,500),random(-100,500)); } //Triangles in the background image(grad,0,0); //Speech bubbles near the top pushMatrix(); translate(0,15); fill(255,100); bubble(20,20); fill(134,151,182,255); bubble(90,55,0.5); //The sequence of dots for(var i = 0; i < 45; i+=10){ fill(255); ellipse(i + 25,35,5,5); ellipse(i + 25,45,5,5); ellipse(i + 25,55,5,5); } popMatrix(); //The screen with lines noFill(); stroke(255); rect(256,30,100,150,2.5); line(268,45,310,45); line(268,55,330,55); line(268,65,290,65); line(268,75,330,75); line(268,85,300,85); line(268,95,310,95); line(268,105,290,105); //The "message"-looking things fill(70,73,96); noStroke(); rect(328,100,62,15,1); rect(330,149,60,5,1); rect(330,172,60,10,1); fill(255); rect(290,120,62,10,1); rect(290,134,62,10,1); rect(290,158,62,10,1); //More speech bubbles (near the bottom) bubble(355,290,-0.6,0.6); //Dots on bubble fill(174, 177, 212); for(var i = 0; i < 30; i+=12){ ellipse(i + 302,320,7,7); } //Random rect noFill(); stroke(234, 236, 237,150); strokeWeight(1); rect(305,300,65,42.5); noStroke(); fill(73,75,99); bubble(320,310, 0.5); //Dashed bubble noFill(); stroke(255,200); pushMatrix(); scale(1.15); translate(5,-40); line(25,325,35,325); line(40,325,50,325); arc(56,334,10,15,-90,0); arc(20,334,10,15,180,270); arc(56,338,10,15,0,90); arc(20,338,10,15,90,180); line(25,345,35,345); line(49,351,40,346); line(54,352.5,52,346); popMatrix(); //Text textFont(createFont('Avenir')); textSize(20); fill(255,100); text("A MILLION WORLDS APART",-60,130); text("ALL IS NEW",270,20); textSize(12.5); text("OUT OF THE SHADOWS",297,205); fill(255,60); textFont(createFont('Palatino')); textSize(11); textAlign(RIGHT, CENTER); text("we start with stars\nin our eyes",390,275); // big mood. i love this musical textSize(8); text("have you ever felt like nobody was there?",170,105); //guess what? you are not alone. textAlign(LEFT, CENTER); text("When you're falling in a forest\nand there's nobody around\ndo you ever really crash,\nor even make a sound?",15,240); // this line is so relatable sometimes, but we should always remember that somebody will hear us. you are never alone textFont(createFont('comic sans ms')); textSize(13); textLeading(13); text('sincerely,\nme',5,15); // deh is awesome - sincerely, me textFont(createFont("Avenir")); textSize(15); text("there's a place where we don't have to feel unknown",0,392.5); fill(255,200); text("WAVING THROUGH A WINDOW",10,50); text("WORDS FAIL",305,250); textSize(10); text("YOU ARE NOT ALONE",285,375); //Highlight on Evan for(var i = 0; i < 60; i+=2){ strokeWeight(i4); stroke(255,3); line(200,400,200,50); } evan(); //Evan //Shadow lift for text for(var i = 0; i < 50; i+=2){ strokeWeight(i*4); stroke(0,3); line(100,355,300,355); } textAlign(CENTER, CENTER); textSize(25); fill(255); text(' Y O U W I L L B E F O U N D',200,355); //1000+ lines in 4 1/2 hours! Pretty good ngl
Folds	19,23,25,33,45,48,63,917,920,927,930,934,937,940,945,950,956,959,964,971,986,991,1023,1025,1091,1095,1100,1104
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgL2HqaP4CQw
Votes	205
Spin-Offs	9
Type	PJS
Width	400
Height	400
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	alyanna
Author Name	acer217
Author ID	kaid_794864070338193862176253
Author Profile Access	COACH

Archive Data

Added	1 years ago, 1734572401076
Updated	10 months ago, 1739397467304
Source Deleted	unknown