Viewing Program

Program Data

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

Title	The Mandalorian
ID	6494141289938944
Created	5 years ago, 1597090261668
Updated	5 years ago, 1600269973824
Code	/* I hope you guys like this, it was an amazing experience! A special thanks to William Wang (King) and NitOwl007 for giving input and COOLBRO43219 and Programming King for teaching me sin(); I really appreciate it :) Thank you guys! Also, after I sent out the graphic, silverleaf12 decided to create a new text. A BIG thanks to silverleaf12 for doing that for me and creating the text :) If you're interested in supporting me for upcoming programs please visit my sub page Sub Page: https://www.khanacademy.org/computer-programming/spacerangers-sub-page/5273602378252288 Explaining vertex functions. vertex { Vertex is by far one of my most favorite shapes. This is because it is a way to create a shape. How you make it is by starting with beginShape(); and then adding endShape(); it'll look like this beginShape(); endShape(); this allows you to have the building blocks to create whatever you desire to be made through vertex's. The vertex will look like this vertex(x, y); you choose what you want in the x position and the y position. You won't see anything because you literally just made a point in the middle of the program. This is why you need a second vertex to creat a line. But, what's interesting, you get to connect the x position of the next vertex with the vertex before it. Same goes with the y position. You can continue adding multiple vertex's and each will connect to the one right above it. Here's an example beginShape(); vertex(x, y); vertex(x, y); vertex(x, y); endShape(); You can also get more info by going to Documentation to see more regarding vertex's. } bezierVertex { To start explaining this you must fully understand what vertex does or else this will be quite confusing. In order to do bezierVertex you must do the same in order starting with vertex beginShape(); endShape(); then you add one random point using a vertex beginShape(); vertex(x, y); endShape(); Now you have the ability to do the bezierVertex. Now the bezierVertex looks like this. bezierVertex(cx1, cy1, cx2, cy2, x, y); Seems complicated right? well, notice the last two in the bezierVertex. They are both x, y. in fact, you can think beizerVertex as just a vertex but adding onto it. See the cx1,cy1,cx2,cy2 part of it is just adding to it. That part makes the round parts of it. so you can just begin by choosing where you want to start (the first vertex in the example below) and where you want to end (the bezierVertex's x,y) then you can use the cx1,cy1,cx2,cy2 to make the circle. I recommend practicing a lot with the circle part. It seems complicated but once you have a handle on it then it can become quite easy. Here's an example for the basic building beginShape(); vertex(x, y); bezierVertex(cx1, cy1, cx2, cy2, x, y); endShape(); of course you can add more vertex's and bezierVertex's. Hoped this helped :) } Inspired by an image but recreated by me Judge(s) don't forget to read! \| \| v To judge(s) { Being that this is a graphic, I was well aware that User Interface won't work. So, instead, I created variables to be easily adjusted to changed for the overal graphic. Hopefully this will count as some sort of User Interface since it allows the user to have some sort of ability to change or be part of the program. } / //ground color var frontColor = color (110, 49, 2); var backColor = color (148, 89, 2); //lerpcolor var topColor = color(250, 183, 50); var bottomColor = color(255, 210, 120); //yoda control var yodaSpeed = 1.5; var yodaDistance = 3; //Mandolarian control var capeSpeed = 2; { for (var x = 0; x < height; x++) { noStroke(); fill(lerpColor(topColor, bottomColor, x / 450)); rect(0, x-68, width, 400); }//lerpcolor fill(255, 237, 201, 50); for(var y = 0; y < 100; y++) { ellipse(250, random(0, 500), 600, 1); }//stripes stroke(255, 222, 156); for(var z = 0; z < 40; z++) { strokeWeight(random(1,6)); point(random(0, 400), random(0, 300)); }//dots noStroke();//sun graphic fill(255, 241, 184); ellipse(72, 70, 70, 70); }//background { fill(backColor); strokeWeight(1); //left back beginShape(); vertex(25, 310); vertex(28, 315); vertex(30, 310); vertex(29, 307); vertex(30, 303); vertex(33, 304); vertex(32, 309); vertex(34, 312); vertex(36, 308); bezierVertex(37, 300, 35, 300, 40, 275); bezierVertex(39, 280, 43, 272, 52, 275); bezierVertex(47, 277, 51, 272, 58, 278); vertex(58, 280); vertex(63, 281); vertex(63, 299); vertex(64, 300); vertex(65, 305); vertex(67, 300); vertex(66, 290); bezierVertex(67, 293, 72, 289, 75, 294); vertex(75, 300); vertex(76, 301); vertex(76, 310); vertex(80, 313); vertex(81, 315); vertex(90, 320); vertex(91, 315); vertex(92, 314); vertex(93, 320); vertex(100, 320); vertex(99, 310); vertex(100, 308); vertex(102, 304); vertex(105, 304); vertex(104, 313); vertex(106, 322); vertex(109, 322); vertex(110, 317); vertex(110, 310); vertex(114, 310); vertex(114, 307); vertex(118, 307); vertex(119, 309); vertex(118, 317); vertex(119, 329); vertex(123, 329); vertex(126, 338); vertex(126, 500); vertex(0, 500); endShape(); //center back beginShape(); vertex(126, 338); bezierVertex(165, 338, 157, 332, 220, 338); bezierVertex(303, 337, 228, 344, 332, 338); vertex(400, 338); vertex(400, 500); vertex(0, 500); endShape(); //right back beginShape(); vertex(312, 340); vertex(312, 327); vertex(315, 328); vertex(320, 327); vertex(320, 335); vertex(324, 336); vertex(324, 321); vertex(318, 312); vertex(314, 312); vertex(314, 308); vertex(316, 308); vertex(316, 304); vertex(318, 304); vertex(318, 308); vertex(322, 308); vertex(322, 302); vertex(324, 300); vertex(325, 297); vertex(326, 297); vertex(328, 299); vertex(328, 291); bezierVertex(335, 289, 351, 290, 348, 300); vertex(348, 305); vertex(350, 305); vertex(350, 312); bezierVertex(359, 315, 362, 319, 361, 324); vertex(365, 324); vertex(366, 310); vertex(365, 300); vertex(370, 300); vertex(370, 305); vertex(372, 305); vertex(372, 316); vertex(374, 328); vertex(376, 322); vertex(376, 316); vertex(380, 316); vertex(382, 329); vertex(400, 329); vertex(400, 500); endShape(); }//back land graphic { //left front fill(frontColor); noStroke(); beginShape(); vertex(0, 280); vertex(5, 281); vertex(10, 280); vertex(12, 282); vertex(11, 285); bezierVertex(11, 280, 18, 305, 13, 315); vertex(15, 320); vertex(20, 322); bezierVertex(20, 310, 20, 300, 22, 295); bezierVertex(25, 297, 25, 295, 27, 301); bezierVertex(25, 328, 25, 334, 30, 335); bezierVertex(35, 339, 35, 317, 35, 320); vertex(40, 318); bezierVertex(38, 336, 38, 325, 39, 334); bezierVertex(41, 338, 45, 342, 46, 331); bezierVertex(48, 314, 43, 325, 49, 305); bezierVertex(56, 304, 57, 305, 55, 307); bezierVertex(54, 318, 52, 305, 55, 326); bezierVertex(61, 335, 61, 305, 63, 343); bezierVertex(66, 345, 66, 355, 70, 343); bezierVertex(71, 322, 78, 331, 73, 328); vertex(79, 330); bezierVertex(82, 341, 77, 337, 83, 347); vertex(84, 350); vertex(85, 340); vertex(88, 338); vertex(88, 347); vertex(87, 355); vertex(1, 500); endShape(); //center front beginShape(); vertex(86, 355); bezierVertex(100, 354, 100, 350, 120, 355); bezierVertex(140, 356, 129, 350, 146, 357); bezierVertex(192, 356, 174, 350, 201, 355); bezierVertex(205, 356, 211, 350, 222, 355); bezierVertex(260, 356, 250, 350, 272, 356); bezierVertex(314, 362, 250, 360, 289, 360); bezierVertex(353, 353, 250, 358, 357, 360); vertex(400, 360); vertex(400, 500); vertex(0, 500); endShape(); //right front beginShape(); vertex(335, 360); vertex(340, 357); bezierVertex(343, 350, 343, 350, 343, 343); bezierVertex(345, 345, 345, 340, 348, 343); vertex(348, 330); bezierVertex(348, 330, 350, 325, 352, 330); vertex(352, 338); bezierVertex(354, 353, 354, 344, 355, 341); vertex(355, 335); vertex(357, 337); vertex(357, 345); vertex(358, 347); bezierVertex(362, 341, 370, 346, 371, 343); vertex(370, 340); bezierVertex(373, 323, 372, 329, 375, 332); bezierVertex(376, 344, 373, 329, 378, 345); bezierVertex(385, 344, 382, 329, 383, 309); bezierVertex(380, 297, 385, 273, 400, 297); vertex(400, 500); endShape(); }//front land graphic { //foot right M beginShape(); vertex(210, 355); vertex(205, 349); vertex(211, 330); vertex(200, 330); vertex(194, 355); endShape(); //foot left M beginShape(); vertex(189, 357); vertex(181, 349); vertex(186, 330); vertex(175, 330); vertex(170, 360); endShape(); //right leg beginShape(); vertex(210, 330); vertex(211, 329); vertex(213, 329); vertex(213, 326); vertex(212, 326); vertex(213, 323); bezierVertex(215, 305, 210, 305, 211, 280); vertex(195, 293); vertex(198, 304); vertex(199, 310); vertex(198, 322); vertex(198, 326); vertex(196, 327); vertex(198, 329); vertex(201, 331); endShape(); //left leg beginShape(); vertex(194, 293); vertex(191, 302); vertex(191, 300); vertex(189, 309); vertex(190, 309); vertex(188, 319); vertex(188, 327); vertex(187, 328); vertex(187, 332); vertex(174, 332); vertex(173, 327); vertex(171, 326); vertex(172, 321); vertex(174, 322); vertex(174, 322); vertex(175, 318); vertex(176, 316); vertex(175, 316); vertex(176, 313); vertex(176, 310); bezierVertex(177, 300, 179, 300, 179, 298); endShape(); //body beginShape(); vertex(211, 283); bezierVertex(213, 285, 215, 285, 216, 279); vertex(215, 278); vertex(215, 275); vertex(214, 275); vertex(214, 273); vertex(214, 270); vertex(213, 265); vertex(212, 263); vertex(211, 260); vertex(205, 255); vertex(173, 259); bezierVertex(185, 288, 180, 289, 177, 304); endShape(); //body upper/chest beginShape(); vertex(173, 260); vertex(174, 240); bezierVertex(171, 241, 177, 235, 178, 235); vertex(180, 227); vertex(181, 226); bezierVertex(189, 219, 191, 223, 193, 218); bezierVertex(200, 220, 200, 220, 204, 223); bezierVertex(203, 230, 204, 230, 206, 232); vertex(210, 235); vertex(211, 239); vertex(212, 241); vertex(212, 244); vertex(211, 244); vertex(212, 246); vertex(213, 246); vertex(213, 248); vertex(214, 250); vertex(213, 255); vertex(211, 257); vertex(210, 263); endShape(); //head beginShape(); vertex(200, 224); vertex(207, 230); bezierVertex(215, 220, 219, 213, 210, 207); bezierVertex(208, 207, 200, 200, 192, 216); vertex(207, 230); endShape(); //weapon bottom beginShape(); vertex(175, 266); vertex(170, 290); vertex(169, 292); vertex(169, 295); vertex(169, 295); vertex(167, 303); vertex(164, 307); vertex(161, 324); vertex(163, 324); vertex(166, 309); vertex(168, 311); vertex(165, 325); vertex(168, 324); vertex(171, 311); vertex(170, 305); vertex(172, 297); vertex(173, 296); vertex(174, 292); vertex(174, 290); vertex(179, 270); endShape(); //weapon top beginShape(); vertex(182, 227); vertex(183, 218); bezierVertex(184, 215, 182, 210, 185, 206); bezierVertex(188, 216, 186, 215, 190, 216); vertex(186, 224); endShape(); //M helmet stroke(255, 195, 74); line(205.5, 229, 212, 220); bezier(213, 220, 213, 219, 210, 218, 205, 214); }//mandalorian var cape = function(x, y) { translate(x, y); noStroke(); beginShape(); vertex(184, 245); vertex(174, 245); bezierVertex(169, 249, 155, 252, 150, 258); bezierVertex(145, 261, 145, 260, 134, 260); bezierVertex(122, 263, 111, 264, 108, 272); vertex(108, 280); vertex(109, 281); vertex(109, 285); vertex(108, 287); vertex(110, 289); vertex(112, 290); vertex(113, 292); bezierVertex(118, 287, 115, 287, 122, 284); vertex(120, 287); vertex(124, 289); vertex(125, 291); vertex(124, 293); vertex(127, 293); vertex(128, 296); vertex(130, 296); vertex(130, 298); vertex(128, 298); bezierVertex(136, 296, 142, 312, 137, 313); vertex(135, 313); vertex(135, 315); vertex(137, 315); vertex(137, 319); vertex(140, 319); vertex(141, 317); vertex(146, 321); vertex(147, 325); vertex(151, 324); vertex(155, 325); vertex(158, 322); bezierVertex(160, 320, 150, 300, 180, 267); endShape(); resetMatrix(); };//making the cape to be used while animating var yoda = function(x, y) { //yoda part 1 translate(x, y); beginShape(); noStroke(); vertex(237, 318); bezierVertex(248, 339, 285, 335, 290, 320); bezierVertex(293, 296, 281, 300, 270, 298); vertex(267, 315); vertex(244, 315); bezierVertex(240, 312, 232, 316, 240, 320); endShape(); //yoda part 2 beginShape(); vertex(268, 315); vertex(236, 315); vertex(239, 312); vertex(247, 312); vertex(250, 310); vertex(251, 310); vertex(251, 306); vertex(249, 303); vertex(253, 305); bezierVertex(252, 304, 259, 302, 260, 307); vertex(265, 305); vertex(264, 306); vertex(261, 309); bezierVertex(268, 324, 266, 301, 266, 314); endShape(); //yoda part 3 stroke(250, 196, 87); strokeWeight(1); noFill(); bezier(237, 316, 252, 319, 292, 318, 292, 316); line(270, 316, 287, 301); fill(frontColor); ellipse(268, 317, 8, 8); resetMatrix(); };//making yoda to be used while animating /* Credit to silverleaf12 for the texts */ //creating the texts in a function for easier change var words = function(x, y, sizeX, sizeY) { translate(x, y); scale(sizeX, sizeY); //the THE and M and the to lines noStroke(); fill(255, 255, 255); textSize(23); text("THE", 222, 27); rect(271, 24, 197, 3); rect(27, 24, 197, 3); pushMatrix(); translate(19, 0); noStroke(); beginShape(); vertex(8, 31); vertex(8, 105); vertex(19, 105); vertex(20, 57); vertex(28, 81); vertex(36, 57); vertex(36, 105); vertex(48, 105); vertex(48, 32); vertex(34, 32); vertex(28, 51); vertex(20, 31); endShape(); noStroke(); beginShape(); vertex(65, 31); vertex(79, 31); vertex(93, 105); vertex(81, 105); vertex(72, 57); vertex(61, 105); vertex(50, 105); endShape(); //the N pushMatrix(); translate(87, 0); beginShape(); vertex(8, 31); vertex(8, 105); vertex(19, 105); vertex(20, 68); vertex(37, 105); vertex(47, 105); vertex(47, 31); vertex(34, 31); vertex(34, 65); vertex(20, 31); endShape(); //the D { rect(52, 30, 15, 75); rect(52, 30, 25, 15); rect(52, 90, 25, 15); rect(78, 44, 15, 46); ellipse(80, 92, 26, 26); ellipse(80, 43, 26, 26); fill(frontColor); rect(67, 44, 11, 46); fill(255, 255, 255); rect(79, 41, 1, 1, -10); rect(79, 91, 1, 1, -10); } //the second A and the L { pushMatrix(); translate(43, 0); noStroke(); beginShape(); vertex(65, 31); vertex(79, 31); vertex(93, 105); vertex(81, 105); vertex(72, 57); vertex(61, 105); vertex(50, 105); endShape(); popMatrix(); rect(140, 32, 14, 73); rect(140, 91, 30, 14); } //thre O { pushMatrix(); translate(43, 0); rect(131, 44, 14, 48); rect(155, 40, 14, 54); rect(141, 91, 16, 14); rect(141, 32, 16, 14); ellipse(141, 42, 20, 20); ellipse(159, 42, 20, 20); ellipse(142, 93, 22, 24); ellipse(158, 93, 22, 24); endShape(); fill(frontColor); rect(145, 45, 10, 47); popMatrix(); } //the R and the I { fill(255, 255, 255); rect(216, 32, 15, 73); rect(216, 32, 30, 15); rect(241, 40, 13, 31); rect(233, 63, 13, 17); rect(260, 32, 14, 73); ellipse(248, 73, 12, 14); ellipse(248, 39, 12, 14); quad(244, 77, 233, 79, 243, 105, 255, 105); } //the second A { pushMatrix(); translate(227, 0); noStroke(); beginShape(); vertex(65, 31); vertex(79, 31); vertex(93, 105); vertex(81, 105); vertex(72, 57); vertex(61, 105); vertex(50, 105); endShape(); popMatrix(); } //the N { pushMatrix(); translate(314, 0); beginShape(); vertex(8, 31); vertex(8, 105); vertex(19, 105); vertex(20, 68); vertex(37, 105); vertex(47, 105); vertex(47, 31); vertex(34, 31); vertex(34, 65); vertex(20, 31); endShape(); popMatrix(); } resetMatrix(); }; words(52, 400, 0.6, 0.6); var test = get();//takes a picture of all above to use as a background while animating the program. draw = function() { image(test, 0, 0);//calling the background yoda(0, sin(frameCountyodaSpeed)yodaDistance);//animating Yoda. cape(sin(frameCountcapeSpeed)*1.5, 0);//animating the cape. };
Folds	14,35,38,66,75,82,101,123,126,237,238,312,315,466,470,513,515,556,564,762
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgNXFsczECww
Votes	187
Spin-Offs	3
Type	PJS
Width	400
Height	500
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Willis Anderson
Author Name	WA12321
Author ID	kaid_237663565377101144744119
Author Profile Access	PUBLIC

Archive Data

Added	10 months ago, 1739458593199
Updated	10 months ago, 1739458593199
Source Deleted	unknown