{"id":67657,"date":"2021-10-16T16:59:27","date_gmt":"2021-10-16T20:59:27","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=67657"},"modified":"2021-10-16T16:59:27","modified_gmt":"2021-10-16T20:59:27","slug":"project-07-composition-with-curves-2","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/16\/project-07-composition-with-curves-2\/","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-86.js\">sketch<\/a><a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/sketch-86.js\" class=\"wp-block-file__button\" download>Download<\/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\">\/\/ This program displays a grid of Epitrochoid curves with increasing nPoints and cusps.\n\/\/ The canvas sets up with a 5x5 grid; \n\/\/ When the mouse is pressed, more curves are drawn.\n\/\/ Pressing the spacebar deletes one row and column. \n\nvar c;\t\t\t\t\/\/ color \nvar density = 5;\t\/\/ number of curves in each row and column\nvar nPoints;\t\t\/\/ number of points used to draw each curve\nvar cusp;\t\t\t\/\/ number of cusps on each curve\nvar mode = 0\t\t\/\/ default mode uses Epitrochoid formula, other mode uses an edited Epitrochoid-like formula\n\nfunction setup() {\n    createCanvas(480, 480);\n}\n\nfunction draw() {\n\tbackground(200, 200, 255);\n\t\/\/ draw a grid of curves based on density value:\n\tfor (var k=0; k&lt;density; k++) {\n\t\tcusp = k+1;\t\t\t\t\t\t\t\/\/ number of cusps increases from left to right\n\t\tfor (var j=0; j&lt;density; j++) {\n\t\t\tpush();\n\t\t\ttranslate(k*width\/density+240\/density, \t\/\/ keeps grid centered regardless of density changes\n\t\t\t\t\t  j*height\/density+240\/density);\t\n\t\t\tnPoints = (j+1)*density\t\t\t\/\/ number of nPoints increases from top to bottom\n\t\t\n        \t\/\/color based on grid and mouse location:\n\t\t\tlet r = map(j, 0, density, 0, 255);\n\t\t\tlet g = map(k, 0, density, 0, 255);\n\t\t\tlet b = map(mouseX, 0, width, 0, 255);\n\t\t\tc = color(r, g, b);\n\t\t\t\n\t\t\t\/\/ check which mode we are in and draw curves:\n\t\t\tif (mode == 0) {drawEpitrochoidCurve(nPoints, cusp, c)}\n\t\t\telse {drawEpitrochoidyCurve(nPoints, cusp, c)}\n\t\t\tpop();\n\t\t}\n\t}\n\t\/\/ labeling for easier understanding of the grid pattern:\n\ttextFont('monospace');\n\ttext('click mouse for more curves,\tpress spacebar for fewer curves', 20, height-12);\n\ttext('press \"w\" for weird curves,\tpress \"r\" for default curves', 20, height-3);\n\ttext('n u m b e r\t\to f\t\tc u s p s   ----- &gt;', 5, 10);\n\ttext('n P o i n t s', 5, 30, 1, 150);\n\tpush(); \n\trotate(radians(90));\n\ttext('----- &gt;', 140, -5);\n\tpop();\n\t\n\n}\n\n\/\/ code adapted from sample in project description:\nfunction drawEpitrochoidCurve(nPoints, cusp, color) {\n    \/\/ Epitrochoid:\n\t\/\/https:\/\/mathworld.wolfram.com\/Epitrochoid.html\n\t\n    var x;\n    var y;\n\n\tvar a = 15;\n    var b = a \/ cusp;\n    var h = map(mouseY\/8, 0, height, 0, a*5);\n    var ph = -mouseX \/ 40;\n    \n    fill(color);\n\n\t\/\/ shape of curve:\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 adapted from sample in project description and edited further:\n\/\/ these curves do not interact with mouseY:\nfunction drawEpitrochoidyCurve(nPoints, cusp, color) {\n    \/\/ Epitrochoidy: not quite an Epitrochoid, but follows a very similar formula\n\t\n    var x;\n    var y;\n\n\tvar a = 15;\n    var b = a \/ cusp;\n    var ph = -mouseX \/ 40;\n    \n    fill(color);\n\n\t\/\/ shape of curve:\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) * cos(ph + t * (a + b) \/ b);\n        y = (a + b) * sin(t) * sin(ph + t * (a + b) \/ b);\n        vertex(x, y);\n    }\n    endShape(CLOSE);\n}\n\n\/\/ add one more row and column each time the mouse is pressed:\nfunction mousePressed() {\n\tdensity +=1;\n}\n\n\/\/delete a row and column when the SPACEBAR is pressed:\nfunction keyPressed() {\n\tif (keyCode == 32) { \n\t\tif (density == 0) {density = density }\t\t\/\/ dont let density variable go below 0\n\t\telse {density -= 1 }\n\t}\n\tif (keyCode == 87) { \n\t\tif (mode == 0) {mode = 1}\t\t\/\/ pressing 'w' switches to 'weird' mode\n\t}\n\tif (keyCode == 82) { \n\t\tif (mode == 1) {mode = 0}\t\t\/\/ pressing 'r' switches back to default 'regular' mode\n\t}\n}<\/code><\/pre><\/div>\n\n\n\n<p>After deciding to use the Epitrochoid curve formula, I realized that the sample in our project description is a very similar curve. Using the sample formula, I adapted the code until I liked what was being drawn on the canvas. Then I made a grid of curves and built them using various nPoint values and cusp values. As you can see in the drawing, as the curves are drawn from left to right, there are more cusps; and as they are drawn from top to bottom, there are more nPoints. Similarly to the sample code, my project uses mouseX and mouseY to interact with the angle and width of the curves. Additionally, the mouseX and mouseX variables are used to determine the fill color of each curve. When the mouse is clicked, the grid gets denser; when the spacebar is pressed, the density decreases.  After playing around with the formula, I decided that I also wanted to include a mode for <meta charset=\"utf-8\">Epitrochoid-like curves that are not technically following the <meta charset=\"utf-8\">Epitrochoid formula. If you press &lsquo;w&rsquo;, the &lsquo;weird&rsquo; mode turns on and the curves look strange and interesting. Pressing the &lsquo;r&rsquo; key puts the program back into the default &lsquo;regular&rsquo; mode. Below are a few screen shots that document some of my proccess: <\/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\/Screen-Shot-2021-10-16-at-3.27.04-PM.png\" alt=\"\" class=\"wp-image-67660\" width=\"193\" height=\"193\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-16-at-3.27.04-PM.png 444w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-16-at-3.27.04-PM-300x300.png 300w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-16-at-3.27.04-PM-150x150.png 150w\" sizes=\"(max-width: 193px) 85vw, 193px\"><\/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\/Screen-Shot-2021-10-16-at-3.28.02-PM.png\" alt=\"\" class=\"wp-image-67664\" width=\"192\" height=\"193\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-16-at-3.28.02-PM.png 477w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-16-at-3.28.02-PM-300x300.png 300w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-16-at-3.28.02-PM-150x150.png 150w\" sizes=\"(max-width: 192px) 85vw, 192px\"><\/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\/Screen-Shot-2021-10-16-at-3.29.11-PM.png\" alt=\"\" class=\"wp-image-67661\" width=\"192\" height=\"194\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-16-at-3.29.11-PM.png 475w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-16-at-3.29.11-PM-297x300.png 297w\" sizes=\"(max-width: 192px) 85vw, 192px\"><\/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\/Screen-Shot-2021-10-16-at-3.28.24-PM.png\" alt=\"\" class=\"wp-image-67663\" width=\"193\" height=\"193\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-16-at-3.28.24-PM.png 476w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-16-at-3.28.24-PM-300x300.png 300w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-16-at-3.28.24-PM-150x150.png 150w\" sizes=\"(max-width: 193px) 85vw, 193px\"><\/figure><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>sketchDownload \/\/ This program displays a grid of Epitrochoid curves with increasing nPoints and cusps. \/\/ The canvas sets up with a 5&#215;5 grid; \/\/ When the mouse is pressed, more curves are drawn. \/\/ Pressing the spacebar deletes one row and column. var c; \/\/ color var density = 5; \/\/ number of curves &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/16\/project-07-composition-with-curves-2\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 07: Composition with Curves&#8221;<\/span><\/a><\/p>\n","protected":false},"author":673,"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\/67657"}],"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\/673"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=67657"}],"version-history":[{"count":3,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67657\/revisions"}],"predecessor-version":[{"id":67678,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67657\/revisions\/67678"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=67657"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=67657"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=67657"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}