{"id":67926,"date":"2021-10-17T20:34:30","date_gmt":"2021-10-18T00:34:30","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=67926"},"modified":"2021-10-17T20:53:02","modified_gmt":"2021-10-18T00:53:02","slug":"67926","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/17\/67926\/","title":{"rendered":"Curves Interactive Drawing – P07"},"content":{"rendered":"\n

sketch<\/a><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/ gnmarino@andrew.cmu.edu\n\/\/ Gia Marino\n\/\/ section D\n\nvar red; \/\/ variable for red in fill for gradient\nvar blue; \/\/ variable for blue in fill for gradient\n\nfunction setup() {\ncreateCanvas(400, 400);\nbackground(200);\n\n}\nfunction draw() {\n\n \/\/ maps variables red and blue so mouseX at 0 makes fill blue\n \/\/ and at edge of the canvas mouseX makes color red\n \/\/ creates a blue to red gradient \n red = map(mouseX, 0, width, 0, 255);\n blue = map(mouseX, width, 0, 0, 255);\n\n \/\/ fills shapes and makes a red to blue gradient\n fill(red, 0, blue);\n\n \/\/ nested loop draws astroids going to the right and skips every other row\n for (var y1 = 0; y1 <= width; y1 += 4*size) {\n drawAstroid(0, y1);\n\n for(var x1 = 0; x1 <= width + size; x1 += 3) {\n drawAstroid(x1, y1);\n\n }\n }\n\n \/\/ nested loop draws astroids going to the left and skips every other row\n for (var y2 = 2 * size; y2 <= width; y2 += 4*size) {\n drawAstroid(width, y2);\n\n for(var x2 = width; x2 >= 0 - size; x2-=5) {\n drawAstroid(x2, y2);\n }\n }\n}\n\nfunction drawAstroid(x, y) {\n\n \/\/ push needed so translate doesn't effect rest of code\n push();\n translate(x, y);\n\n beginShape();\n\n \/\/ loop and astriod x and y implements math for astroid curve\n for(var k = 0; k<360; k++){\n \/\/ allows for mouseY to change size of astroid between 20 up to 80 pixels \n size = map(mouseY, 0, height, 20, 80);\n Astroidx = size * Math.pow(cos(radians(k)),3);\n Astroidy = size * Math.pow(sin(radians(k)),3);\n vertex(Astroidx,Astroidy);\n}\n endShape(CLOSE);\n\n pop();\n}<\/code><\/pre><\/p>\n\n\n\n<p>For this week I had a really difficult time figuring out what curves would work for my ideas. I originally wanted to try a whirl with a logarithmic spiral but it was too difficult to implement the math. I then found the astroid shape and thought it was cool so I figured out how to implement it into code and then I made it move with mouse X and mouse Y tried to find a pattern or drawing that would look cool. I eventually found a pattern by doing this and decided my idea. I then decided my parameters would be changing the size of the astroid which therefore changes how many rows you see, and the color.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"806\" height=\"804\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-17-at-8.49.50-PM.png\" alt=\"\" class=\"wp-image-67935\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-17-at-8.49.50-PM.png 806w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-17-at-8.49.50-PM-300x300.png 300w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-17-at-8.49.50-PM-150x150.png 150w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-17-at-8.49.50-PM-768x766.png 768w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\"><figcaption>My project when you move your mouse to left middle<\/figcaption><\/figure><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"808\" height=\"802\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-17-at-8.49.39-PM.png\" alt=\"\" class=\"wp-image-67936\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-17-at-8.49.39-PM.png 808w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-17-at-8.49.39-PM-300x298.png 300w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-17-at-8.49.39-PM-150x150.png 150w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-17-at-8.49.39-PM-768x762.png 768w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\"><figcaption>My project when you move your mouse down past the canvas and 3\/4 to the right<\/figcaption><\/figure><p><\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>sketch \/\/ gnmarino@andrew.cmu.edu \/\/ Gia Marino \/\/ section D var red; \/\/ variable for red in fill for gradient var blue; \/\/ variable for blue in fill for gradient function setup() { createCanvas(400, 400); background(200); } function draw() { \/\/ maps variables red and blue so mouseX at 0 makes fill blue \/\/ and at … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/17\/67926\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “Curves Interactive Drawing – P07”<\/span><\/a><\/p>\n","protected":false},"author":658,"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\/67926"}],"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\/658"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=67926"}],"version-history":[{"count":2,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67926\/revisions"}],"predecessor-version":[{"id":67937,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67926\/revisions\/67937"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=67926"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=67926"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=67926"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}