Viewing Program

Program Data

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

Title	= 3D Marble Machine instrument [animated] =
ID	4522719984041984
Created	5 years ago, 1591024640252
Updated	5 years ago, 1591377795168
Code	/* Info for Judges: { I've been programming a few years, and I have learned around 65% of Intro to JS (but I think I know more than that) I would prefer to be placed in either the Advanced or Intermediate bracket. } Program Info: You may have seen the Marble Machine video by Wintergatan... Its creator, Martin Molin, decided to remaster it, and has been working on it for years now. You can follow the process on youtube here{ [ https://www.youtube.com/watch?v=C8qyVURtSZc&list=PLLLYkE3G1HED6rW-bkliHbMroHYFf4ukv ] } Here are 2 songs played on it{ See the earlier version performing: [ https://www.youtube.com/watch?v=IvUU8joBb1Q ] And a test with the uncompleted MMX: [ https://www.youtube.com/watch?v=tVbh_FEiF2E ] } This is Wintergatan's Marble Machine X, or MMX. An impressive-looking mass of plywood gears and welded steel rods, it works with a crank that spins gears and then pins on a programming plate drop marbles onto hi-hats, vibraphone panels, and bass strings. It can play almost any song, at any tempo. In this illustration I went for a simultaneous 3D and vintage blueprint sketch effect, with a neat old film effect. IF YOU WANT TO or if it's slow or glitchy, click to stop the animation (I didn't imagize anything, and it's not really optimized). / //credits / ENORMOUS THANKS to SIM G, without whose rotated rect loop I would've drawn EACH GEAR TOOTH and SCREW INDIVIDUALLY: [ https://www.khanacademy.org/computer-programming/gear-thingy/6423027320193024 ] Based on Martin's design here: [ https://cdn.shopify.com/s/files/1/0473/6097/products/122st_Martin_sign_tunt_papper_14g_IMG_7470_KOPIA_590x.jpg?v=1575302368 ] / var rotating = true;//again, click to stop the animation noFill(); var planetarygear = function(x,y,r,s1,s2){ pushMatrix(); translate(x,y); scale(s1,s2); rotate(r); //smaller gear on the very inside pushMatrix(); rotate(-r2); ellipse(0,0,23,23); for(var i = 0; i < 360; i+=40){//loop from sim g pushMatrix(); rotate(i); rect(11,-2,4,5); popMatrix(); } //screws for(var i = 0; i < 360; i+=72){//loop from sim g pushMatrix(); rotate(i); ellipse(8,-2,3,3); popMatrix(); } popMatrix(); ellipse(0,0,206,206); ellipse(0,0,194,194); ellipse(0,0,170,170); ellipse(0,0,165,165); //inside teeth for(var i = 0; i < 360; i+=9){//loop from sim g pushMatrix(); rotate(i); rect(78,-6,4,6); popMatrix(); } //outside teeth for(var i = 0; i < 360; i+=7){//loop from sim g pushMatrix(); rotate(i); rect(102,-6,4,6); popMatrix(); } //linelike etchings for(var i = 0; i < 360; i+=8){//loop from sim g pushMatrix(); rotate(i); rect(97,-6,4,1); popMatrix(); } //indents for(var i = 0; i < 360; i+=24){//loop from sim g pushMatrix(); rotate(i); rect(88,-7,4,20,10); popMatrix(); } var smallerplanetarygears = function(x,y,r,s1,s2){ pushMatrix(); translate(x,y); scale(s1,s2); rotate(r); ellipse(0,0,60,60); ellipse(0,0,55,55); ellipse(0,0,17,17); //teeth for(var i = 0; i < 360; i+=24){//loop from sim g pushMatrix(); rotate(i); rect(30,-2,4,5); popMatrix(); } //axles for(var i = 0; i < 360; i+=120){//loop from sim g pushMatrix(); rotate(i); rect(8,-2,18,5); popMatrix(); } //screws for(var i = 0; i < 360; i+=72){//loop from sim g pushMatrix(); rotate(i); ellipse(5,-2,2,2); popMatrix(); } popMatrix(); }; //little planets smallerplanetarygears(15,45,r,1,1); smallerplanetarygears(33,-35,r,1,1); smallerplanetarygears(-48,-5,r,1,1); popMatrix(); }; var secondplanetarygear = function(x,y,r,s1,s2){ pushMatrix(); translate(x,y); scale(s1,s2); rotate(r); ellipse(0,0,206,206); ellipse(0,0,194,194); ellipse(0,0,170,170); //outside teeth for(var i = 0; i < 360; i+=7){//loop from sim g pushMatrix(); rotate(i); rect(102,-6,4,6); popMatrix(); } popMatrix(); }; var programmingwheel = function(x,y,r,s1,s2){ pushMatrix(); translate(x,y); scale(s1,s2); rotate(r); //programming plate pins for(var i = 0; i < 360; i+=26){//loop from sim g pushMatrix(); rotate(i); rect(102,6,-4,5); popMatrix(); } strokeWeight(0.5); ellipse(0,0,215,215); popMatrix(); }; var secondgear = function(x,y,r,s1,s2){ pushMatrix(); translate(x,y); scale(s1,s2); rotate(r); ellipse(0,0,170,170); ellipse(0,0,162,162); ellipse(0,0,157,157); ellipse(0,0,150,150); ellipse(0,0,8,8); ellipse(0,0,20,20); ellipse(0,0,25,25); ellipse(0,0,40,40); //teeth for(var i = 0; i < 360; i+=8){//loop from sim g pushMatrix(); rotate(i); rect(85,0,4,6); popMatrix(); } //spokes for(var i = 0; i < 360; i+=72){//loop from sim g pushMatrix(); rotate(i); rect(19,-2.5,55,5); popMatrix(); } //screws for(var i = 0; i < 360; i+=72){//loop from sim g pushMatrix(); rotate(i); ellipse(16,0,3,3); popMatrix(); } for(var i = 0; i < 360; i+=52){//loop from sim g pushMatrix(); rotate(i); ellipse(7,0,2,2); popMatrix(); } popMatrix(); }; var crank = function(x,y,r,s1,s2){ pushMatrix(); translate(x,y); scale(s1,s2); rotate(r); strokeWeight(0.7); ellipse(0,0,59,59); ellipse(0,0,55,55); ellipse(0,0,5,5); strokeWeight(0.5); //spokes for(var i = 0; i < 360; i+=123){//loop from sim g pushMatrix(); rotate(i); rect(3,-2,23,3); popMatrix(); } popMatrix(); }; var littlegear1 = function(x,y,r,s1,s2){ pushMatrix(); translate(x,y); scale(s1,s2); rotate(r); strokeWeight(1.2); ellipse(0,0,55,55); ellipse(0,0,45,45); //spokes for(var i = 0; i < 360; i+=123){//loop from sim g pushMatrix(); rotate(i); rect(4,-4,18,6); popMatrix(); } strokeWeight(1.0); ellipse(0,0,10,10); popMatrix(); }; var littlegear2 = function(x,y,r,s1,s2){ pushMatrix(); translate(x,y); scale(s1,s2); rotate(r); strokeWeight(0.4); ellipse(0,0,35,35); ellipse(0,0,35,35); //screws for(var i = 0; i < 360; i+=123){//loop from sim g pushMatrix(); rotate(i); ellipse(10,-4,3,3); popMatrix(); } strokeWeight(1.0); ellipse(0,0,10,10); popMatrix(); }; var littlegear3 = function(x,y,r,s1,s2){ pushMatrix(); translate(x,y); scale(s1,s2); rotate(r); strokeWeight(0.8); ellipse(0,0,15,15); //screws for(var i = 0; i < 360; i+=51){//loop from sim g pushMatrix(); rotate(i); rect(8,-2,3,5); popMatrix(); } strokeWeight(1.0); ellipse(0,0,10,10); popMatrix(); }; var r = 0; var machineSetup = function(){ //little gears on the table { crank(330,315,-r12,0.90,1); littlegear1(315,320,-r12,0.90,1); littlegear2(306,322,-r12,0.90,1); littlegear2(300,325,-r12,0.90,1); littlegear2(295,326,-r12,0.90,1); line(260,332,292,324); line(263,337,292,329); littlegear3(258,336,-r12,0.90,1); ellipse(256,336,7,7); ellipse(256,336,1,1); } //steel table frame (working top to bottom): { //first layer, first grid strokeWeight(0.5); line(125,316/L/,225,302/R/);//back left line(350,316/R/,225,302/L/);//back right strokeWeight(1.4); line(125,316/L/,264,340/R/);//front left line(350,316/R/,264,340/L/);//front right //first layer, first grid strokeWeight(0.5); line(125,325/L/,225,309/R/);//back left line(350,325/R/,225,309/L/);//back right strokeWeight(1.2); line(138,328/L/,251,351/R/);//front left line(340,329/R/,272,351/L/);//front right //second layer, second grid strokeWeight(0.5); line(130,373/L/,225,353/R/);//back left line(347,373/R/,225,353/L/);//back right strokeWeight(1.2); line(130,373/L/,252,404/R/);//front left line(338,377/R/,272,404/L/);//front right //second layer, second grid strokeWeight(0.5); line(130,382/L/,225,360/R/);//back left line(347,382/R/,225,360/L/);//back right strokeWeight(1.2); line(130,382/L/,252,418/R/);//front left line(337,388/R/,272,419/L/);//front right line(332,375/R/,272,398/L/);//front right } //legs { //back strokeWeight(0.7); line(227,303,221,486);//mid line(236,303,228,483);//right line(221,303,217,483);//left line(216,483,221,486);//bottom left line(227,483,221,487);//bottom right //front left strokeWeight(1.2); line(125,317,133,514);//left line(138,328,143,520);//mid line(145,330,148,517);//right line(143,520,134,514);//bottom left line(144,520,148,517);//bottom right //mid strokeWeight(1.4); line(272,351,270,556);//right line(251,351,254,557);//left line(264,341,264,559);//mid line(270,557,264,562);//bottom right line(254,558,264,562);//bottom left //front right strokeWeight(1.2); line(350,316,339,513);//left line(340,328,331,519);//mid line(333,331,326,517);//right line(331,520,326,517);//bottom left line(331,520,339,513);//bottom left } //vibraphone { strokeCap(SQUARE); strokeWeight(5); line(256,254,267,258); strokeWeight(0.6); line(232,244,293,267); line(300,261,293,267); line(300,261,305,254); line(310,252,305,254); strokeWeight(1.4); line(226,250,265,256); line(230,240,294,264); line(238,240,297,262); strokeWeight(1.3); line(245,240,299,260); line(252,240,301,258); strokeWeight(1.1); line(259,240,302,256); line(266,240,304,254); strokeWeight(0.8); line(273,240,306,252); line(280,240,310,251); } //cymbals, drums { pushMatrix(); scale(0.8); translate(81,60); rotate(12); //large drum strokeWeight(0.9); arc(410,174,65,18,-117,122); arc(409,187,65,18,-12,180); line(379,188,379,183); line(441,188,441,176); line(437,191,437,178); rotate(11); //large cymbal strokeWeight(0.7); ellipse(388,85,50,16); arc(388,87,17,11,225,311); arc(388,94,5,27,240,311); strokeWeight(1.4); line(379,93,382,100); line(394,93,392,99); strokeWeight(1.0); //mid drum ellipse(390,104,25,10); arc(389,117,28,11,-94,125); arc(388,116,28,11,0,125); strokeWeight(2); line(402,117,402,106); line(397,120,397,108); line(385,121,385,109); line(378,109,378,106); strokeWeight(0.9); line(384,100,384,110); line(397,101,397,110); strokeWeight(1.2); //smol drum ellipse(410,101,16,8); ellipse(410,101,16,8); line(417,104,417,108); line(411,105,411,110); arc(410,106,16,8,0,146); //smol cymbal strokeWeight(0.7); ellipse(418,91,16,8); ellipse(418,89,7,3); arc(418,99,5,27,240,311); strokeWeight(1.4); line(420,85,425,83); line(427,85,425,83); line(423,82,415,83); popMatrix(); } //mass of kinetic fingers and rods { //lowest row of fingers strokeCap(ROUND); strokeWeight(1.5); line(253,167,255,194); line(258,167,260,194); line(264,167,265,194); strokeWeight(1.1); line(269,167,270,193); line(274,167,275,193); line(279,167,280,193); line(284,168,285,192); line(289,168,290,192); strokeWeight(1.0); line(294,168,295,191); line(299,168,300,191); line(304,168,306,191); strokeWeight(0.8); line(308,168,309,182); //row above that strokeCap(ROUND); strokeWeight(1.5); line(254,147,256,174); line(259,147,261,174); line(264,147,266,174); strokeWeight(1.1); line(269,147,271,174); line(274,147,275,174); line(279,147,280,174); line(284,148,285,174); line(289,148,290,174); strokeWeight(1.0); line(294,148,295,173); line(299,148,300,173); line(304,148,306,174); strokeWeight(0.8); line(308,148,309,164); //thin top line strokeWeight(0.8); line(202,76,268,90); line(170,87,178,97); line(173,87,182,97); line(177,88,186,97); line(180,88,190,97); line(183,88,194,97); line(188,89,198,97); line(191,89,202,97); line(195,89,206,97); line(200,90,206,94); line(203,90,206,92); line(170,87,165,94); line(172,89,168,94); line(173,93,171,95); strokeWeight(0.6); line(205,79,214,97); line(211,81,219,97); line(216,82,224,98); line(221,83,228,98); line(226,84,233,99); line(231,85,237,99); line(235,86,242,100); line(239,87,246,100); line(243,88,251,100); line(247,88,256,100); line(251,89,262,101); line(256,90,268,102); line(261,91,275,103); line(267,92,280,103); //knobs strokeWeight(1.0); fill(0, 70, 155); ellipse(260,111,5,5); ellipse(265,112,5,5); ellipse(270,112,5,5); ellipse(275,113,5,5); ellipse(280,114,5,5); ellipse(285,114,5,5); ellipse(290,115,5,5); ellipse(295,116,4.5,4.5); ellipse(300,116,4.5,4.5); ellipse(305,117,4,4); ellipse(310,118,4,4); ellipse(315,118,4,4); noFill(); arc(255,130,4,4,-90,90); arc(260,130,4,4,-90,90); arc(265,130,4,4,-90,90); arc(270,131,4,4,-90,90); arc(275,131,4,4,-90,90); arc(280,131,4,4,-90,90); arc(285,132,4,4,-90,90); arc(290,132,4,4,-90,90); arc(295,133,4,4,-90,90); arc(300,133,4,4,-90,90); arc(305,134,4,4,-90,90); arc(310,135,4,4,-90,90); arc(255,107,10,10,-90,0); arc(260,108,10,10,-90,0); arc(265,108,10,10,-90,0); arc(270,109,10,10,-90,0); arc(275,110,10,10,-90,0); arc(280,110,10,10,-90,0); arc(285,111,9,9,-90,0); arc(290,112,9,9,-90,0); arc(295,113,9,9,-90,-16); arc(300,113,8,8,-90,0); arc(305,114,8,8,-90,0); arc(310,114,8,8,-90,0); arc(255,115,10,10,0,90); arc(260,115,10,10,0,90); arc(265,116,10,10,0,90); arc(270,116,10,10,0,90); arc(275,116,10,10,0,90); arc(280,117,10,10,0,90); arc(285,117,10,10,0,90); arc(290,118,10,10,0,90); arc(295,118,10,10,0,90); arc(300,118,10,10,0,90); arc(305,119,10,10,0,90); arc(310,119,10,10,0,90); //thin top line` line(256,121,255,129); line(261,121,260,129); line(266,122,265,130); line(271,122,270,130); line(276,122,275,130); line(281,123,280,131); line(286,123,285,131); line(291,123,290,131); line(296,124,295,132); line(301,124,300,132); line(306,125,305,132); line(311,125,310,133); //big projecting knobs strokeWeight(0.6); line(340,99,319,117); line(341,102,324,115); line(342,106,319,119); line(343,110,328,116); line(343,113,319,119); ellipse(345,113,5,5); ellipse(345,109,5,5); ellipse(345,105,5,5); ellipse(344,101,5,5); ellipse(342,97,5,5); //defining countours strokeWeight(2); line(171,103,204,99); strokeWeight(1.5); ellipse(242,145,6,6); line(244,150,248,159); line(208,96,200,79); line(239,140,224,112); rotate(3); rect(208,91,20,6,1); strokeWeight(1); ellipse(213,94,1,1); ellipse(223,94,1,1); rotate(-3); line(242,140,226,110); ellipse(252,108,6.5,7); line(252,123,252,113); ellipse(252,128,5,5); line(252,132,244,145); line(226,108,247,109); line(226,105,247,106); line(256,103,207,99); arc(258,138,19,19,115,245); arc(263,138,19,19,115,245); arc(268,138,19,19,115,245); arc(273,138,18,18,115,245); arc(278,139,18,18,115,245); arc(283,139,18,18,115,245); arc(288,139,18,18,115,245); arc(293,140,18,18,115,245); arc(298,140,17,17,115,245); arc(303,141,17,17,115,245); arc(308,141,17,17,115,245); arc(313,141,17,17,115,245); arc(317,141,17,17,115,245); line(312,147,313,163); //tubing line(134,64,134,97); line(137,64,138,97); line(140,69,141,84); arc(149,69,35,13,42,118); arc(151,75,35,12,-19,128); arc(179,73,35,12,155,345); arc(179,77,30,9,227,345); arc(194,73,7,6,306,471); strokeWeight(1.1); arc(196,74,9,9,276,505); noFill(); } //marble stair { var rung = function(x,y){ pushMatrix(); translate(x,y); rotate(-3); strokeWeight(1.1); rect(0,0,20,3,5); strokeWeight(0.5); ellipse(1,-1,3,3); ellipse(5,-1,3,3); ellipse(10,-1,3,3); ellipse(15,-1,3,3); ellipse(20,-1,3,3); ellipse(1,5,3,3); ellipse(5,5,3,3); ellipse(10,5,3,3); ellipse(15,5,3,3); ellipse(20,5,3,3); ellipse(23,0,3,3); ellipse(23,4,3,3); ellipse(-2,0,3,3); ellipse(-2,4,3,3); ellipse(28,1,4,3); ellipse(30,4,2,2); strokeWeight(0.7); rect(24,2,3,5,3); popMatrix(); }; rung(102,144); rung(102,137); rung(102,130); rung(102,123); rung(102,116); rung(102,109); rung(102,102); rung(102,95); rung(102,88); rung(102,81); rung(102,74); rung(102,67); rung(102,60); } //treadle peddle { strokeWeight(2); line(195,400,251,430); line(272,440,295,455); line(306,483,301,464); line(321,494,311,490); strokeWeight(1); ellipse(307,487,8,8); ellipse(299,459,10,10); line(310,400,301,455); line(312,382,318,348); line(318,496,309,491); line(318,496,321,495); } //supports { noFill(); strokeWeight(0.9); line(187,327,164,300); line(281,301,274,286); strokeWeight(0.6); line(287,300,281,286); ellipse(286,306,10,10); } }; var mouseClicked = function(){ if (rotating === false){ rotating = true; } else if (rotating === true){ rotating = false; } }; var timer = 0; var draw = function(){ pushMatrix(); translate(17,10); noFill(); if (rotating === true){ r += 0.5;//makes things turn } //colors of bg, stroke background(0, 70, 135); stroke(242, 242, 234); machineSetup(); //some things for the filter when it animates timer += 1; if (timer >= 200){ timer = 0; } if(rotating === true){ if(timer <= 2){ filter(BLUR); } } //timer for reference and a little bit of punch //fill(255); fill(255,7); text(timer,20,20); noFill(); //gear cluster around the programming wheel pushMatrix(); strokeWeight(0.8); secondplanetarygear(260,200,r,0.7,0.85); strokeWeight(0.5); { programmingwheel(257,200,r,0.62,0.74); programmingwheel(246,200,r,0.63,0.75); programmingwheel(235,200,r,0.65,0.77); programmingwheel(222,200,r,0.66,0.78); programmingwheel(208,200,r,0.68,0.80); programmingwheel(194,200,r,0.70,0.82); programmingwheel(177,200,r,0.72,0.84); programmingwheel(153,200,r,0.76,0.88); }//programming wheel rings strokeWeight(1.2); planetarygear(150,200,r,0.85,1); secondgear(175,315,r,0.85,1); //more filter things if(rotating === true){ if(timer <= 105 && timer >= 100){ filter(BLUR); } } popMatrix(); //text { fill(247, 247, 237); textAlign(CENTER); textFont(createFont("monospace")); textSize(12); text("Nov. 10, 2018",104,25); text("#000,000",385,25); textSize(12); text("MARBLE MACHINE X",250,25); textSize(9); text("WINTERGATAN",250,35); textSize(8); text("Filed Oct. 21, 2014",250,52); textSize(8); text("75",155,52); text("15",90,97); text("25",100,375); text("37",115,405); text("47",190,425); text("17",205,435); text("25",287,475); text("19",296,495); textSize(11); text("75",73,290); textSize(12); text("77",318,435); textFont(createFont("monospace, Italic")); textSize(11); text("E",353,414); text("D",357,353); text("C",366,329); text("B'",366,236); text("B''",388,243); text("A",291,81); textFont(createFont("Zapfino")); textSize(17); text("I Believe",50,562); textFont(createFont("times new roman, Italic")); textSize(6); text("DIRECTOR",339,562); textSize(8); text("M. MOLIN",336,569); textFont(createFont("monospace")); textSize(7); text("PRINT No. \|__",138,542); textSize(8); text("PRINTED BY",133,552); textFont(createFont("times new roman, Bold")); textSize(12); text("DIRESTA",135,563); } //vignette pushMatrix(); noFill(); strokeWeight(50); stroke(0,30); rect(-25,-25,515,625,80); rect(-35,-32,535,640,60); strokeWeight(1); popMatrix(); noStroke(); if(rotating === true){ fill(0,random(-15,30)); ellipse(random(0,500),random(0,600),random(5,15),random(5,15)); ellipse(random(0,500),random(0,600),random(5,15),random(15,25)); ellipse(random(0,500),random(0,600),random(0,4),1000); fill(0,random(-15,8)); ellipse(random(-500,1000),random(-600,1200),random(0,500),random(0,500)); fill(0,random(-10,5)); rect(-17,-10,500,600); fill(0, -10 + sin(frameCount1)20); rect(-17,-10,500,600); }//vintage effect //finally, a teeny bit of stains on the paper { fill(0,15); ellipse(309,-47,17,200); ellipse(328,-46,10,121); ellipse(402,415,15,15); ellipse(407,420,10,10); fill(0,20); ellipse(190,31,10,7); ellipse(202,46,5,7); ellipse(328,38,5,5); ellipse(8,38,5,5); ellipse(40,446,5,5); ellipse(40,246,10,5); popMatrix(); } };
Folds	2,7,12,16,18,25,36,44,49,143,144,163,164,180,181,223,225,245,246,264,265,283,284,301,305,736,738,745,787,796,810,863,877,888,891,905
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgMXwvKyECAw
Votes	220
Spin-Offs	1
Type	PJS
Width	500
Height	600
User Flagged	false
Origin Scratchpad	{"id":"4542789552062464","title":"Contest: Music","deleted":"false","official":"false"}
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	= Ꚃ 𝚎 ə ɱ υ ട =
Author Name	AvatarsBeyondUltimate
Author ID	kaid_241820857726192144106949
Author Profile Access	COACH

Archive Data

Added	10 months ago, 1739362896980
Updated	10 months ago, 1740174021700
Source Deleted	unknown