{"id":74440,"date":"2022-10-15T15:53:01","date_gmt":"2022-10-15T19:53:01","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=74440"},"modified":"2022-10-15T15:58:10","modified_gmt":"2022-10-15T19:58:10","slug":"project-7-composition-with-curves","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/10\/15\/project-7-composition-with-curves\/","title":{"rendered":"Project 7 &#8211; 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><p>Using multiple layers of atomic spirals, I created a composition that emulates either the acquisition &amp; rotation of electrons around a nucleus or planets around a Sun &ndash; whichever interpretation is up to the viewer.  In order to emphasize the idea of &lsquo;cosmic creation&rsquo;, I added randomly generated stars that twinkle from last weeks project and a lower opacity epispiral in the background to give an subtle explosion type effect.<\/p>\n\n\n\n<p>Features:<br>&ndash; mouseX controls a (rotation of the circulating bodies)<br>&ndash; mouseY controls n (scale of epispiral + no. of points)<\/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-119.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\">\/\/ Name: Tsz Wing Clover Chau\n\/\/ Section: E \n\/\/ email: ctchau@andrew.cmu.edu\n\/\/ Project-07\n\nvar a = 0;\nvar atomStart = 360\nlet stars = [];\nvar nStars = 60;\nvar noiseParam = 0;\nvar noiseStep = 0.08;\nvar count = 0;\nvar twinkleRate = 10;\n\n\n\nfunction setup() {\n    createCanvas(480, 480);\n    background(0);\n    for (var i = 0; i&lt;nStars; i++){\n        stars.push([random(0, width), random(0, height), noise(noiseParam)]);\n        noiseParam += noiseStep;\n    }\n}\n\nfunction draw() {\n    background(0);\n\n    for (var i = 0; i&lt;nStars; i++){\n        curStar = stars[i];\n        push();\n        noStroke();\n        fill(100);\n        circle(curStar[0], curStar[1], curStar[2]*5);\n        if (count % twinkleRate == 0){\n            twinkle(curStar)\n        }\n        \n        pop();\n    }\n\n\n\n    var h = constrain(mouseY, 0, height);\n    var w = constrain(mouseX, 0, width);\n\n\n    \/\/atomic spiral\n    noFill();\n    stroke(255);\n    \n    a = map(h, 0, height, 0, 16);\n\n    \n    beginShape();\n    for (var i = 60*a; i &lt;= 360*a; i++){\n        var theta = radians(i);\n        var r = theta\/(theta-a)*65;\n        var x = r * cos(theta) + width\/2;\n        var y = r * sin(theta) + height\/2;\n        vertex(x, y);\n\n        \n        if (i == 360*a){\n            push();\n            fill(190);\n            circle(x, y, width\/70);\n            pop();\n\n        } \n    }\n    endShape();\n\n\n    \/\/ SUN \/ NUCLEUS\n    a2 = map(h, 0, height, 0, 10);\n    beginShape();\n    for (var i = -360*a2; i &lt;= 0; i++){\n        var theta = radians(i);\n        var r = theta\/(theta-a2)*50;\n        var x = r * cos(theta) + width\/2;\n        var y = r * sin(theta) + height\/2;\n        vertex(x, y);\n\n        if (i == -360*a2){\n            push();\n            fill(255);\n            stroke(2);\n            circle(x, y, width\/20);\n            pop();\n        }\n    }\n    endShape();\n\n\n    b = map(h, height\/3, height, 0, 16);\n    beginShape();\n    for (var i = 60*b; i &lt;= 360*b; i++){\n        var theta = radians(i);\n        var r = theta\/(theta-b)*100;\n        var x = r * cos(theta) + width\/2;\n        var y = r * sin(theta) + height\/2;\n        vertex(x, y);\n        \n        if (i == 360*b){\n            push();\n            fill(190);\n            circle(x, y, width\/50);\n            pop();\n\n            circle(x, y, width\/20);\n        } \n    }\n    endShape();\n\n\n\n    if (mouseY &gt;=  height\/2){\n        c = map(h, height\/2, height, 0, 16);\n        beginShape();\n        for (var i = 90*c; i &lt;= 360*b; i++){\n            var theta = radians(i);\n            var r = theta\/(theta-c)*150;\n            var x = r * cos(theta) + width\/2;\n            var y = r * sin(theta) + height\/2;\n            vertex(x, y);\n\n            \n            if (i == 360*c){\n                push();\n                fill(190);\n                circle(x, y, width\/50);\n                pop();\n            } \n        }\n        endShape();\n    }\n    \n    \n\n    \/\/poinsot's spirals\n    var n = map(w, 0, width, 0, 8);\n    push();\n    stroke(150, 150, 150, 150);\n\n    beginShape();\n    for (var i = -360; i &lt;= 360*b; i++){\n        var theta = radians(i);\n        var r = pow(n, 3)*abs(1\/cos(n*theta));\n        var x = r * cos(theta) + width\/2;\n        var y = r * sin(theta) + height\/2;\n        vertex(x, y);\n    }    \n    endShape();\n    pop();\n\n    count++;\n\n}\n\n\nfunction twinkle(star){\n    \/\/constraining star size\n    if (star[2] &gt;= 1){\n        star[2] -= random(0.8, 0.8);\n    } else {\n        star[2] += random(-0.4, 0.4);\n    }\n    star[2] = abs(star[2]);\n}<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>Using multiple layers of atomic spirals, I created a composition that emulates either the acquisition &amp; rotation of electrons around a nucleus or planets around a Sun &ndash; whichever interpretation is up to the viewer. In order to emphasize the idea of &lsquo;cosmic creation&rsquo;, I added randomly generated stars that twinkle from last weeks project &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/10\/15\/project-7-composition-with-curves\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 7 &#8211; Composition With Curves&#8221;<\/span><\/a><\/p>\n","protected":false},"author":708,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[108,121],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/74440"}],"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\/708"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=74440"}],"version-history":[{"count":3,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/74440\/revisions"}],"predecessor-version":[{"id":75042,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/74440\/revisions\/75042"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=74440"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=74440"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=74440"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}