{"id":74678,"date":"2022-10-16T22:38:24","date_gmt":"2022-10-17T02:38:24","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=74678"},"modified":"2022-10-16T22:38:24","modified_gmt":"2022-10-17T02:38:24","slug":"project-07-curves-6","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/10\/16\/project-07-curves-6\/","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><p>This is my floral composition based on mathematical curves and reacts to the mouse&rsquo;s location on the canvas.<\/p>\n<div><a class=\"p5_sketch_link\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/10\/sketch-142.js\" data-width=\"480\" data-height=\"480\">sketch<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/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\">\/*\n    Joan Lee\n    Section D\n\n    This program draws an interactive floral composition with mathematical curves.\n*\/\n\nvar nPoints = 400;\n\nfunction setup() {\n    createCanvas(480, 480); \n}\n\n\nfunction draw() {\n    background(28,92,76);    \/\/dark green\n    \n    \/\/drawing flower curve\n    push();\n    translate(width\/2, height\/2);\n    drawCardioidCurve();\n    pop();\n\n    \/\/drawing leaves curve\n    push();\n    translate(width\/2, height\/2);\n    drawHypotrochoidCurve();\n    pop();\n\n}\n\n\/\/--------------------------------------------------\nfunction drawCardioidCurve() {\n    \/\/cardioid curve\n    push();\n    translate(x, y);\n    rotate(radians(90));\n    var x = constrain(mouseX, 0, width);\n    var y = constrain(mouseY, 0, height);\n    var a = map(x, 0, width, 0, 40);\n    var b = a\/2;\n   \n    \/\/mouse movement interaction\n    if (mouseY &gt; height\/2) {    \/\/color change\n        fill(244,52,4);     \/\/bright red\n    } else {\n        fill(252,156,132);  \/\/pink\n    }\n\n    \/\/cardioid curve parametric equations\n    beginShape();\n    noStroke();\n    for (var i = 0; i &lt; nPoints; i++) {\n        var t = map(i, 0, nPoints, 0, TWO_PI);\n\n        x = a * (6 * cos(t) - cos(6 * t));\n        y = a * (6 * sin(t) - sin(6 *t));\n        vertex(x, y);\n    }\n    endShape(CLOSE);\n    pop();\n    \n}\n\n\/\/--------------------------------------------------\nfunction drawHypotrochoidCurve() {\n    \/\/hypotrochoid curve\n    noFill();\n    strokeWeight(1);\n\n    \/\/mouse movement interaction\n\n    if (mouseX &lt; width\/2) {      \/\/color change\n        stroke(4,220,156);  \/\/ bright green\n    } else {\n        stroke(204,236,228);    \/\/pale green\n    }\n\n    var x = constrain(mouseX, 0, width);\n    var y = constrain(mouseY, 0, height);\n    var a = map(x, 0, width, 50, 150);\n    var b = map(y, 0, height, 1, 6);\n    var h = constrain(mouseY, 50, 90);\n    \n    \/\/hypotrochoid curve parametric equations\n    beginShape();\n    for (var i = 0; i &lt; nPoints; i++) {\n        var t = map(i, 0, nPoints, 0, TWO_PI);\n        \n        x = (a - b) * cos(t) + h * cos(t * ((a - b) \/ b));\n        y = (a - b) * sin(t) - h * sin(t * ((a - b) \/ b));\n        vertex(x, y);\n    }\n    endShape(CLOSE);\n    \n}\n<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>This is my floral composition based on mathematical curves and reacts to the mouse&rsquo;s location on the canvas. sketch \/* Joan Lee Section D This program draws an interactive floral composition with mathematical curves. *\/ var nPoints = 400; function setup() { createCanvas(480, 480); } function draw() { background(28,92,76); \/\/dark green \/\/drawing flower curve push(); &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/10\/16\/project-07-curves-6\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 07: Curves&#8221;<\/span><\/a><\/p>\n","protected":false},"author":698,"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\/f2022\/wp-json\/wp\/v2\/posts\/74678"}],"collection":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/users\/698"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=74678"}],"version-history":[{"count":3,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/74678\/revisions"}],"predecessor-version":[{"id":74681,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/74678\/revisions\/74681"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=74678"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=74678"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=74678"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}