{"id":74688,"date":"2022-10-16T22:48:58","date_gmt":"2022-10-17T02:48:58","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=74688"},"modified":"2022-10-16T22:52:00","modified_gmt":"2022-10-17T02:52:00","slug":"project-07-composition-with-curves-4","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/10\/16\/project-07-composition-with-curves-4\/","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\" id=\"wp-block-file--media-b9641fcd-7ca8-4168-aa43-a8bfe2d74b3b\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/10\/sketch-144.js\">sketch<\/a><a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/10\/sketch-144.js\" class=\"wp-block-file__button\" download=\"\" aria-describedby=\"wp-block-file--media-b9641fcd-7ca8-4168-aa43-a8bfe2d74b3b\">Download<\/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\">\/\/Alicia Kim\n\/\/yoonbink@andrew.cmu.edu\n\/\/Section B\n\nvar nPoints = 100;\nvar r;\n\nfunction setup() {\n    createCanvas(480, 480);\n    background(220);\n    \n    r=0;\n\n    \n}\n\nfunction draw() {\n\n\/\/ gradient background (adapted from my project 6)\n    for(var j=0; j&lt;height; j+=1) {\n        stroke(lerpColor(color(127,255,212) ,color(255,253,208),j\/height));\n        line(0,j,width,j);\n    }\n\n    noStroke();\n\n    push();\n    translate (width\/2, height\/2); \n\n    noFill();\n    if (r&lt;=15){\n        r+=0.17;\n    }\n    else{r=0}\n    drawHeart2(r);\n    drawDevil();\n    pop();\n\n    drawHeart1();\n}\n\nfunction drawDevil() {\n    \/\/ https:\/\/mathworld.wolfram.com\/DevilsCurve.html\n    \/\/ adapted from drawCranoid example from Wk 7 Deliverable example\n\n    \n    var x;\n    var y;\n\n    \n    \n    fill(250,250,210);\n    beginShape();\n    for (var i = 0; i &lt; nPoints; i++) {\n        \n      \n        var a = constrain((mouseX \/ width), -16.0, 16.0);\n        var b = constrain((mouseY \/ height), -16.0, 16.0);\n        var t = map(i, 0, nPoints, 0, TWO_PI);\n    \n\n        x = 100*cos(t)*sqrt((sq(a)*sq(sin(t))-(sq(b)*sq(cos(t)))\/(sq(sin(t))-sq(cos(t)))));\n        y = 100*sin(t)*sqrt((sq(a)*sq(sin(t))-(sq(b)*sq(cos(t)))\/(sq(sin(t))-sq(cos(t)))));\n        vertex(x, y);\n    }\n    endShape();\n}\n\n\/\/cursor  heart\nfunction drawHeart1(){\n\n    var x2;\n    var y2;\n\n    fill(250);\n    beginShape();\n    for (var j = 0; j &lt; nPoints; j++) {\n     \n        var t2 = map(j, 0, nPoints, 0, TWO_PI);\n        \n\n        x2 = mouseX+2*16*pow(sin(t2),3);\n        y2 = 2*(13*cos(t2)-5*cos(2*t2)-2*cos(3*t2)-cos(4*t2));\n        y2= mouseY-y2 \n        vertex(x2, y2);\n    }\n    endShape();\n}\n\n\/\/background heart\nfunction drawHeart2(r){\n\n    var x3;\n    var y3;\n    \/\/ var r;\n    fill(173,216,230);\n    beginShape();\n    \/\/ r=10;\n    \/\/ r+=1;\n    \n    for (var j = 0; j &lt; nPoints; j++) {\n        \n        var t2 = map(j, 0, nPoints, 0, TWO_PI);\n        \n\n        x3 = r*16*pow(sin(t2),3);\n        y3 = -r*(13*cos(t2)-5*cos(2*t2)-2*cos(3*t2)-cos(4*t2));\n      \n        vertex(x3, y3);\n    }\n    endShape();\n}<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>sketchDownload \/\/Alicia Kim \/\/yoonbink@andrew.cmu.edu \/\/Section B var nPoints = 100; var r; function setup() { createCanvas(480, 480); background(220); r=0; } function draw() { \/\/ gradient background (adapted from my project 6) for(var j=0; j&lt;height; j+=1) { stroke(lerpColor(color(127,255,212) ,color(255,253,208),j\/height)); line(0,j,width,j); } noStroke(); push(); translate (width\/2, height\/2); noFill(); if (r&lt;=15){ r+=0.17; } else{r=0} drawHeart2(r); drawDevil(); pop(); drawHeart1(); &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/10\/16\/project-07-composition-with-curves-4\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project-07: Composition with Curves&#8221;<\/span><\/a><\/p>\n","protected":false},"author":726,"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\/f2022\/wp-json\/wp\/v2\/posts\/74688"}],"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\/726"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=74688"}],"version-history":[{"count":2,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/74688\/revisions"}],"predecessor-version":[{"id":74691,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/74688\/revisions\/74691"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=74688"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=74688"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=74688"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}