{"id":67799,"date":"2021-10-16T22:16:20","date_gmt":"2021-10-17T02:16:20","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=67799"},"modified":"2021-10-16T22:16:20","modified_gmt":"2021-10-17T02:16:20","slug":"curves-2","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/16\/curves-2\/","title":{"rendered":"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>I really like the dichotomy in this project between calm and chaos.  I wanted a pretty simple curve(s) on a plain background that change from very simple and still to complex and chaotic. I set the colors to make it seem like a star or spreading entropy or something. I hope you enjoy!!<\/p>\n\n\n\n<div><a class=\"p5_sketch_link\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/sketch-108.js\" data-width=\"450\" data-height=\"600\">sketch<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/plugins\/p5-embedder\/p5_iframe.html\" class=\"p5_exampleFrame\" width=\"450\" height=\"600\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">var nPoints = 100;\n\nfunction setup() {\n    createCanvas(400, 400);\n    frameRate(10);\n}\n\n\nfunction draw() {\n    background(255);\n\n    \/\/ draw the frame\n    fill(0);\n    noStroke();\n    stroke(0);\n    noFill();\n\n    \/\/ draw the curve\n    push();\n    translate(width \/ 2, height \/ 2);\n    drawCurve();\n    pop();\n}\n\n\/\/--------------------------------------------------\nfunction drawCurve() {\n    \/\/ Hypotrochoid\n    \/\/ https:\/\/mathworld.wolfram.com\/Hypotrochoid.html\n\n    var x;\n    var y;\n\n    var a = constrain(map(mouseX, 0, width, 50, 150), 50, 150);\n    var b = a \/ constrain(map(mouseX, 10, width-10, 1, 8), 1, 8);\n    var h = b;\n    var ph = mouseX \/ 50.0;\n\n    var n = 12;\n\n    for (var j = 0; j &lt; n; j++) {\n        var c = map(j, 0, n, 0, 256);\n        stroke(256-c,114,c);\n        beginShape();\n        for (var i = 0; i &lt; nPoints; i++) {\n            var t = map(i, 0, nPoints, 0, TWO_PI);\n            var r = map(mouseY, 0, height, 0, 5)\n\n            x = (j\/n)*(a - b) * cos(t) + (j\/n)*h * cos(ph + t * (a - b) \/ b);\n            y = (j\/n)*(a - b) * sin(t) - (j\/n)*h * sin(ph + t * (a + b) \/ b);\n            vertex(x + random(-r,r), y + random(-r,r));\n        }\n        endShape(CLOSE);\n    }\n\n}\n<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>I really like the dichotomy in this project between calm and chaos. I wanted a pretty simple curve(s) on a plain background that change from very simple and still to complex and chaotic. I set the colors to make it seem like a star or spreading entropy or something. I hope you enjoy!! sketch var &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/16\/curves-2\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Curves&#8221;<\/span><\/a><\/p>\n","protected":false},"author":657,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[108,56],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67799"}],"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\/657"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=67799"}],"version-history":[{"count":3,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67799\/revisions"}],"predecessor-version":[{"id":67806,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67799\/revisions\/67806"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=67799"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=67799"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=67799"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}