{"id":67611,"date":"2021-10-16T13:57:33","date_gmt":"2021-10-16T17:57:33","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=67611"},"modified":"2021-10-16T14:03:13","modified_gmt":"2021-10-16T18:03:13","slug":"project-07-curves","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/16\/project-07-curves\/","title":{"rendered":"Project 07: Curves"},"content":{"rendered":"<!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD HTML 4.0 Transitional\/\/EN\" \"http:\/\/www.w3.org\/TR\/REC-html40\/loose.dtd\">\n<html><body><div class=\"wp-block-file\"><a class=\"p5_sketch_link\" data-height=\"480\" data-width=\"480\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/sketch-84.js\">sketch<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/plugins\/p5-embedder\/p5_iframe.html\" class=\"p5_exampleFrame\" width=\"480\" height=\"480\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/Anthony Pan\n\/\/Section C\n\n\/\/Cardioid Curve Interaction\n\/\/polar coordinate equation r = a*(1-cos(theta))\n\/\/parametric equation\n    \/\/x = a * cos(t) * (1 - cos(t))\n    \/\/y = a * sin(t) * (1 - cos(t))\n\/\/mouseX change colors\n\/\/mouseY changes how many are drawn\n\n\n\nfunction setup() {\n    createCanvas(480, 480);\n    background(220, 100, 150);\n}\n\nfunction draw() {\n    \/\/var x1 = 0\n    \/\/var y1 = 0\n\n    push();\n    \/\/drawRect(x1,y1); \/\/draw another shape\n    translate(width\/2, height\/2);\n    drawCardioidCurve();\n}\n\n\nfunction drawCardioidCurve() {\n    var x;\n    var y;\n\n    var a = 80;\n    var h = mouseX; \/\/mouseX interaction\n    var h1 = map(mouseY, 0, 480, 0, 256); \/\/mouseY interaction\n\n    fill((h1 * 0.7)%256, 0, h1);\n    beginShape();\n    for(var i = 0; i &lt; 101; i++) {\n        var theta = map(i, 0, 101, 0, TWO_PI);\n\n        x = (h + a) * cos(theta) * (1 - cos(theta));\n        y = (h + a) * sin(theta) * (1 - cos(theta));\n        vertex(x, y);\n    }\n    endShape(CLOSE);\n}\n<\/code><\/pre><\/div>\n\n\n\n<p>For this project, I wanted to create a curve that would be drawn multiple times as the user moved mouseX. I chose to create a heart using the cardioid function and chose purple\/pink as my color for the heart. I wanted it to feel like you were drawing hearts repeatedly that would change color and dimensions based on the mouseX and Y positions. <\/p>\n\n\n\n<p>For the process, I did something very similar to the technical assignment this week, utilizing an equation to draw the different points on the curve rather than the noise function. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"992\" height=\"982\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-16-at-1.56.16-PM.png\" alt=\"\" class=\"wp-image-67616\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-16-at-1.56.16-PM.png 992w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-16-at-1.56.16-PM-300x297.png 300w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-16-at-1.56.16-PM-768x760.png 768w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\"><\/figure><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"982\" height=\"976\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-16-at-1.55.59-PM.png\" alt=\"\" class=\"wp-image-67617\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-16-at-1.55.59-PM.png 982w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-16-at-1.55.59-PM-300x298.png 300w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-16-at-1.55.59-PM-150x150.png 150w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-16-at-1.55.59-PM-768x763.png 768w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\"><\/figure><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>sketch \/\/Anthony Pan \/\/Section C \/\/Cardioid Curve Interaction \/\/polar coordinate equation r = a*(1-cos(theta)) \/\/parametric equation \/\/x = a * cos(t) * (1 &#8211; cos(t)) \/\/y = a * sin(t) * (1 &#8211; cos(t)) \/\/mouseX change colors \/\/mouseY changes how many are drawn function setup() { createCanvas(480, 480); background(220, 100, 150); } function draw() { &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/16\/project-07-curves\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 07: Curves&#8221;<\/span><\/a><\/p>\n","protected":false},"author":635,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[108,57],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67611"}],"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\/635"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=67611"}],"version-history":[{"count":4,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67611\/revisions"}],"predecessor-version":[{"id":67631,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67611\/revisions\/67631"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=67611"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=67611"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=67611"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}