{"id":67723,"date":"2021-10-16T18:33:03","date_gmt":"2021-10-16T22:33:03","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=67723"},"modified":"2021-10-16T18:33:03","modified_gmt":"2021-10-16T22:33:03","slug":"project-07-composition-with-curves-3","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/16\/project-07-composition-with-curves-3\/","title":{"rendered":"Project 07: Composition with 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-width=\"480\" data-height=\"480\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/sketch-100.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\">\/\/Christy Zo\n\/\/Section C\n\nvar nPoints = 400;\nfunction setup() {\n    createCanvas(480, 480);\n}\n\nfunction draw() {\n    background(220);\n    push();\n    translate(width \/ 2, height \/ 2);\n    drawEpitrochoidCurve();\n    pop();\n    push();\n    translate(width \/ 2, height \/ 2);\n    drawEpicycloidCurve();\n    pop();\n    push();\n    translate(width \/ 2, height \/ 2);\n    rotate(radians(90)); \/\/rotating Epicycloid to create a radial pattern\n    drawEpicycloidCurve();\n    pop();\n    push();\n    translate(width \/ 2, height \/ 2);\n    rotate(radians(45));\n    drawEpicycloidCurve();\n    pop();\n    push();\n    translate(width \/ 2, height \/ 2);\n    rotate(radians(135));\n    drawEpicycloidCurve();\n    pop();\n\n\n}\n\nfunction drawEpicycloidCurve() {\n    \/\/ Epicycloid:\n    \/\/ http:\/\/mathworld.wolfram.com\/Epicycloid.html\n    \n    var x;\n    var y;\n    \n    var a = constrain(mouseY,0, height);\n    var b = constrain(mouseX, 0, width);\n    \/\/var h = constrain(mouseY \/ 8.0, 0, b);\n    \/\/var ph = mouseX \/ 50.0;\n    noFill();\n    stroke(0);\n    beginShape();\n    for (var i = 0; i &lt; nPoints; i++) {\n        var t = map(i, 0, nPoints, 0, TWO_PI);\n        \n        x = 4 * b * cos (t)* cos (t)* cos (t);\n        y = a * sin (t) *sin (t)* sin (t);\n        \n      vertex(x, y);\n    }\n    endShape(CLOSE);\n\n}\n\nfunction drawEpitrochoidCurve() {\n    \/\/ Epicycloid:\n    \/\/ http:\/\/mathworld.wolfram.com\/Epitrochoid.html\n    \n    var x;\n    var y;\n    \n    var a = mouseX;\n    var b = a \/ 2.0;\n    var h = constrain(mouseY \/ 8.0, 0, b);\n    var ph = mouseX \/ 120.0;\n    \n    fill(mouseX, mouseY, mouseX);\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(ph + t * (a + b) \/ b);\n        y = (a + b) * sin(t) - h * sin(ph + t * (a + b) \/ b);\n        vertex(x, y);\n    }\n    endShape(CLOSE);\n    \n}\n<\/code><\/pre><\/div>\n\n\n\n<p>In this project, I wanted to create something that not only shows horizontal and vertical change, but something that goes diagonally too. I was inspired by how stars twinkle and their strokes\/beams of light reduce and increase as it sparkles.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img loading=\"lazy\" src=\"https:\/\/www.pinclipart.com\/picdir\/middle\/26-267769_free-drawings-of-stars-download-free-clip-art.png\" alt=\"Free Drawings Of Stars Download Free Clip Art Free - Christmas Star  Coloring Page - Png Download - Full Size Clipart (#267769) - PinClipart\" width=\"440\" height=\"505\"><figcaption>sample image of star<\/figcaption><\/figure><p>snippets of code:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/image-2.png\" alt=\"\" class=\"wp-image-67725\" width=\"281\" height=\"281\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/image-2.png 960w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/image-2-300x300.png 300w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/image-2-150x150.png 150w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/image-2-768x770.png 768w\" sizes=\"(max-width: 281px) 85vw, 281px\"><\/figure><figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/image-4.png\" alt=\"\" class=\"wp-image-67727\" width=\"282\" height=\"281\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/image-4.png 964w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/image-4-300x300.png 300w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/image-4-150x150.png 150w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/image-4-768x765.png 768w\" sizes=\"(max-width: 282px) 85vw, 282px\"><\/figure><figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/image-5.png\" alt=\"\" class=\"wp-image-67729\" width=\"281\" height=\"281\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/image-5.png 960w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/image-5-300x300.png 300w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/image-5-150x150.png 150w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/image-5-768x770.png 768w\" sizes=\"(max-width: 281px) 85vw, 281px\"><\/figure><figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/image-6.png\" alt=\"\" class=\"wp-image-67730\" width=\"280\" height=\"280\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/image-6.png 962w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/image-6-300x300.png 300w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/image-6-150x150.png 150w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/image-6-768x770.png 768w\" sizes=\"(max-width: 280px) 85vw, 280px\"><\/figure><p>As the cranioid in the center increases in size, the color changes from black-green-pink-white in a gradual scale. <\/p>\n\n\n\n<p><\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>sketch \/\/Christy Zo \/\/Section C var nPoints = 400; function setup() { createCanvas(480, 480); } function draw() { background(220); push(); translate(width \/ 2, height \/ 2); drawEpitrochoidCurve(); pop(); push(); translate(width \/ 2, height \/ 2); drawEpicycloidCurve(); pop(); push(); translate(width \/ 2, height \/ 2); rotate(radians(90)); \/\/rotating Epicycloid to create a radial pattern drawEpicycloidCurve(); pop(); push(); &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/16\/project-07-composition-with-curves-3\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 07: Composition with Curves&#8221;<\/span><\/a><\/p>\n","protected":false},"author":682,"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\/67723"}],"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\/682"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=67723"}],"version-history":[{"count":1,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67723\/revisions"}],"predecessor-version":[{"id":67732,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67723\/revisions\/67732"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=67723"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=67723"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=67723"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}