{"id":67884,"date":"2021-10-17T14:52:10","date_gmt":"2021-10-17T18:52:10","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=67884"},"modified":"2021-10-17T14:52:10","modified_gmt":"2021-10-17T18:52:10","slug":"project-7-composition-with-curves-4","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/17\/project-7-composition-with-curves-4\/","title":{"rendered":"Project 7: Composition with Curves"},"content":{"rendered":"\n

sketch<\/a><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/Elise Chapman\n\/\/ejchapma\n\/\/ejchapma@andrew.cmu.edu\n\/\/Section D\n\nvar nPoints = 100; \/\/number of points along the curve\nvar noiseParam=5;\nvar noiseStep=0.1;\nvar petalNum=1; \/\/number of petals on curve\nvar x; \/\/for points along curve\nvar y; \/\/for points along curve\n\nfunction setup() {\n createCanvas(480,480);\n frameRate(10);\n}\n\nfunction draw() {\n background(0);\n \/\/draws the epitrochoid curve\n \/\/Cartesian Parametric Form [x=f(t), y=g(t)]\n push();\n translate(width\/2, height\/2);\n var a = 90;\n var b = a\/petalNum;\n var h = constrain(mouseY \/ 8.0, 0, b);\n var ph = mouseX \/ 50.0;\n fill(mouseY,0,mouseX);\n noStroke();\n beginShape();\n for (var i = 0; i<nPoints+1; i++) {\n var t = map(i, 0, nPoints, 0, TWO_PI); \/\/theta mapped through radians\n \/\/Cartesian Parametric Form [x=f(t), y=g(t)]\n x = (a + b) * cos(t) - h * cos(ph + t * (a + b) \/ b);\n y = (a + b) * sin(t) - h * sin(ph + t * (a + b) \/ b);\n var nX = noise(noiseParam); \/\/noise for x values\n var nY = noise(noiseParam); \/\/noise for y values\n nX=map(mouseX,0,width,0,30);\n nY=map(mouseY,0,height,0,30);\n vertex(x+random(-nX,nX),y+random(-nY,nY));\n }\n endShape(CLOSE)\n pop();\n}\n\n\/\/click to increase number of petals on the curve\nfunction mousePressed() {\n petalNum+=1;\n if (petalNum==6) {\n petalNum=1;\n }\n}\n\n<\/code><\/pre><\/p>\n\n\n\n<\/p>\n\n\n\nTo begin, I liked the movement that was created by Tom’s example epitrochoid curve, so I went to the link he provided on Mathworld and read about the curve. I understood that I could make the petals interactive by adding a click into the program and changing the value of b in the curve equation. So at this point, my program allowed from 1 to 5 petals depending where in the click cycle the user is. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"960\" height=\"958\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-17-at-1.58.09-PM.png\" alt=\"\" class=\"wp-image-67886\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-17-at-1.58.09-PM.png 960w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-17-at-1.58.09-PM-300x300.png 300w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-17-at-1.58.09-PM-150x150.png 150w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-17-at-1.58.09-PM-768x766.png 768w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\"><figcaption>An example of a 3 petal curve<\/figcaption><\/figure>Then, I thought back to one of the previous labs, where we would draw circles with variable red and blue fill values, which I really enjoyed aesthetically. So, I made the blue value variable dependent upon the mouseX value and the red value variable upon the mouse Y value. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"960\" height=\"958\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-17-at-2.03.12-PM.png\" alt=\"\" class=\"wp-image-67889\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-17-at-2.03.12-PM.png 960w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-17-at-2.03.12-PM-300x300.png 300w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-17-at-2.03.12-PM-150x150.png 150w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-17-at-2.03.12-PM-768x766.png 768w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\"><figcaption>High mouseX, low mouse Y<\/figcaption><\/figure><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"960\" height=\"958\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-17-at-2.03.16-PM.png\" alt=\"\" class=\"wp-image-67890\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-17-at-2.03.16-PM.png 960w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-17-at-2.03.16-PM-300x300.png 300w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-17-at-2.03.16-PM-150x150.png 150w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-17-at-2.03.16-PM-768x766.png 768w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\"><figcaption>High mouseY, low mouseX<\/figcaption><\/figure>Finally, I really enjoyed the jittery star from the class example from our lecture on Randomness and Noise, so I decided I wanted to add noise. Because the curve is drawn with a series of points, I added noise randomness to each of the points, affecting both the x scale and the Y scale. Overall, I enjoy how the final project came out. I think it would be a cool addition to the header of a website, especially if I’m able to make the background transparent. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"960\" height=\"958\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-17-at-2.48.08-PM.png\" alt=\"\" class=\"wp-image-67891\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-17-at-2.48.08-PM.png 960w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-17-at-2.48.08-PM-300x300.png 300w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-17-at-2.48.08-PM-150x150.png 150w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-17-at-2.48.08-PM-768x766.png 768w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\"><figcaption>An example with all three elements (petal variation, color, and noise) added in<\/figcaption><\/figure><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"To begin, I liked the movement that was created by Tom’s example epitrochoid curve, so I went to the link he provided on Mathworld and read about the curve. I understood that I could make the petals interactive by adding a click into the program and changing the value of b in the curve equation. … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/17\/project-7-composition-with-curves-4\/\" class=\"more-link\">Continue reading “Project 7: Composition with Curves”<\/span><\/a><\/p>\n","protected":false},"author":644,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[108,58],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67884"}],"collection":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/users\/644"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=67884"}],"version-history":[{"count":1,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67884\/revisions"}],"predecessor-version":[{"id":67892,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67884\/revisions\/67892"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=67884"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=67884"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=67884"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}