{"id":74705,"date":"2022-10-20T15:45:52","date_gmt":"2022-10-20T19:45:52","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=74705"},"modified":"2022-10-20T15:47:32","modified_gmt":"2022-10-20T19:47:32","slug":"project-7-curves-4","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/10\/20\/project-7-curves-4\/","title":{"rendered":"Project 7 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 project: the left and right mouse movements change the number of curves and the up and down spins the objects. Clicking the mouse changes the type of circle on the outside of the rose curve.<\/p>\n\n\n\n<div><a class=\"p5_sketch_link\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/10\/sketch-145.js\" data-width=\"400\" data-height=\"600\">sketch<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/plugins\/p5-embedder\/p5_iframe.html\" class=\"p5_exampleFrame\" width=\"400\" height=\"600\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/Michael Li\n\/\/Section C \n\n\/\/set variables for points\nvar points = 100;\n\/\/set variable for state machine\nvar type = 0\n\n\nfunction setup() {\n    createCanvas(400, 400);\n    frameRate(25)\n}\n\n\nfunction draw() {\n    background(50);\n    \/\/add text\n    text(\"Click to change shape\", 20, 30)\n    \/\/move to the center of the canvas\n    translate(width\/2,  height\/2)\n    \n    \/\/to change the shapes between spiral and flower\n    if (type == 0){\n    spiral() \/\/spiral function\n    } else if(type == 1){\n        \/\/repeat the function for flower\n        for(var i = 0; i &lt;5; i++){\n            \/\/different state\n            drawEpitrochoid(i) \n        }\n    } \n    \/\/draw center flower\n    drawRoseCurve();\n\n\n}\n\nfunction drawRoseCurve() {\n    \/\/ RoseCurve\n    \/\/constrain the mouse within the canvas\n    var conMX = (constrain(mouseX, 0, width))\n    var conMY = (constrain(mouseY, 0, width))\n    \/\/map the height of the rosecurve\n    var h = map(conMY, 0, width, width*1\/5, width*2\/5)\n\n    var x;\n    var y;\n    \/\/map the color to the mouse movement\n    var mapColorX = map(mouseX, 0, width, 100, 255)\n    var mapColorY = map(mouseY, 0, width, 100, 255)\n    \/\/the color of the rosecurve changes depending on the outer elements\n    if(type == 0){\n        \/\/blue and orange\n        var c = color(mapColorX, mapColorX\/2+mapColorY\/2, mapColorY)\n    } else if (type == 1){\n        \/\/green and purple\n        var c = color(mapColorX\/2+mapColorY\/2, mapColorY, mapColorX)\n    }\n    var r; \n    \/\/have the variable n only store odd numbers for better rose curve\n    var n = printOdd(int(map(conMX, 0, width, 3, 20)))\n    \n    noFill()\n    strokeWeight(1)\n    stroke(255)\n    circle(0, 0, h*2)\n    fill(c)\n    stroke(c);\n    \/\/draw rose curve\n    beginShape();\n        for (var i = 0; i &lt; points; i++) {\n            var theta = map(i, 0, points, 0, PI);\n        \n            r = h*cos(theta*n)\n            x = r*cos(theta+conMY)\n            y = r*sin(theta+conMY)\n            curveVertex(x, y);\n\n        }\n    endShape(CLOSE)\n}\n\n\/\/draw spiral\nfunction spiral(){\n    \/\/constrain mouse within the canvas\n    var conMY = (constrain(mouseY, 0, width))\n    \/\/map value to mouseY\n    var a = map(conMY, 0, width, width*1\/5, width*2\/5)\n    \n    var x;\n    var y;\n    var r;\n\n    noFill()\n    push()\n    beginShape()\n    \/\/map number of points to mouse Y\n    \/\/spiral grows as mouseY moves\n    var mapYPoints = map(mouseY, 0, height, 25, 100)\n        \/\/draw spiral\n        for (var u = 0; u &lt; mapYPoints; u++) {\n            \/\/theta depend on mouse Y\n            \/\/spiral spins\n            var theta = map(u, 0, mapYPoints\/10, 0, TWO_PI);\n            \/\/circle size depend on mouseY\n            var mapSize = map(u, 0, mapYPoints, 40, 10)\n            r = ((theta)**(1\/2))*a\/4\n            x = r*cos(theta+10)\n            y = r*sin(theta+10)\n\n            curveVertex(x, y)\n            stroke(255-u*4)\n            fill(255-u*4)\n            \/\/draw circles on the spiral\n            circle (x, y, mapSize\/2)\n            stroke(200)\n            noFill()\n        }\n    endShape()\n}\n\/\/draww epitrochoid\nfunction drawEpitrochoid(rot){\n    push()\n    \/\/constrain mouseX and mouseY\n    var conMX = (constrain(mouseX, 0, width))\n    var conMY = (constrain(mouseY, 0, width))\n    var a = map(conMY, 0, width, width*1\/5, width*2\/5)\n    var b = constrain(a \/ int(conMX \/ 30), 0, 20)\nprint(a)\n    var x;\n    var y;\n\n    \/\/rotates the shape each loop\n    rotate(rot+conMY\/10)\n    noFill()\n    stroke(200)\n    push()\n    beginShape()\n    \/\/fill the shape with lower opacity to create layering effect\n    fill(200, 200, 200, 50)\n    var mapYPoints = map(mouseY, 0, height, 0, 25)\n    \/\/draw epitrochoid\n        for (var u = 0; u &lt; 100; u++) {\n            var theta = map(u, 0, 100, 0, TWO_PI);\n\n            x = rot\/2*(a+b)*cos(theta)-b*cos(((a+b)\/b)*theta);\n            y = rot\/2*(a+b)*sin(theta)-b*sin(((a+b)\/b)*theta);\n            curveVertex(x, y)\n\n            \n        }\n    endShape(CLOSE)\n    pop()\n}\n\/\/only store odd numbers in a variable\nfunction printOdd(x){\n\n    if(x%2 == 0){\n        return x-1\n    } else{\n        return x\n    }\n}\n\/\/swtich the type when mouse pressed\n\nfunction mousePressed() {\n    type += 1\n    if(type &gt; 1){\n        type = 0\n    }\n}<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>This is my project: the left and right mouse movements change the number of curves and the up and down spins the objects. Clicking the mouse changes the type of circle on the outside of the rose curve. sketch \/\/Michael Li \/\/Section C \/\/set variables for points var points = 100; \/\/set variable for state &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/10\/20\/project-7-curves-4\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 7 Curves&#8221;<\/span><\/a><\/p>\n","protected":false},"author":739,"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\/f2022\/wp-json\/wp\/v2\/posts\/74705"}],"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\/739"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=74705"}],"version-history":[{"count":3,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/74705\/revisions"}],"predecessor-version":[{"id":74709,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/74705\/revisions\/74709"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=74705"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=74705"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=74705"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}