{"id":72127,"date":"2022-09-17T20:14:23","date_gmt":"2022-09-18T00:14:23","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=72127"},"modified":"2022-09-17T20:14:23","modified_gmt":"2022-09-18T00:14:23","slug":"project-03-dynamic-drawing-8","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/17\/project-03-dynamic-drawing-8\/","title":{"rendered":"Project-03: Dynamic Drawing"},"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>Moving the cursor up and down can change the rotation direction of the white &ldquo;flower&rdquo;. Moving the cursor left and right can change the canvas color and the size of the circles. If the cursor is inside the circle, the corresponding circle will change color.<\/p>\n\n\n\n<p>Xinyi Du <\/p>\n<div><a class=\"p5_sketch_link\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/sketch-286.js\" data-width=\"600\" data-height=\"450\">sketch<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/plugins\/p5-embedder\/p5_iframe.html\" class=\"p5_exampleFrame\" width=\"600\" height=\"450\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/Xinyi Du \n\/\/15104 Section B\n\nvar w = 20;\nvar x1 = 150;\nvar y1 = 150;\nvar w1 = 220; \nvar x2 = 400;\nvar y2 = 300;\nvar w2 = 260;\nvar x3 = 500;\nvar y3 = 75;\nvar w3 = 130;\nvar r = 30;\nvar g = 144;\nvar b = 255;\nvar lineY = 1000;\nvar angle = 10;\nvar dia = 15;\n\nfunction setup() {\n    createCanvas(600, 450);\n}\n \nfunction draw() {\n    background(r, g, b);\n    noStroke();\n    \/\/left circle\n    r1 = 100;\n    g1 = 149;\n    b1 = 237;\n    fill(r1, g1, b1);\n    ellipse(x1, y1, w1, w1);\n    \/\/ bottom circle\n    r2 = 100+20;\n    g2 = 149+20;\n    b2 = 237+10;\n    fill(r2, g2, b2);\n    ellipse(x2, y2, w2, w2);\n    \/\/right circle\n    r3 = 100-20;\n    g3 = 149-20;\n    b3 = 237-10;\n    fill(r3, g3, b3);\n    ellipse(x3, y3, w3, w3);\n\n    \/\/ change mouse X to change the size fhe circles as well as the color of the canvas\n    if (mouseX &lt; width\/2) {\n        w1 = constrain(w1-5, 150, 400); \/\/decrease left circle size\n        w2 = constrain(w2+5, 200, 450); \/\/ increase bottom circle size\n        w3 = constrain(w3-5, 80, 280); \/\/decrease right circle size\n        r = constrain(r + 0.5, 30, 60);\n        g = constrain(g + 0.5, 144, 174);\n        b = constrain(b + 0.5, 255, 275); \/\/ make canvas color lighter and limit the rgb range\n    }\n\n    if (mouseX &gt; width\/2){\n        w1 = constrain(w1+5, 150, 400); \/\/increase left circle size\n        w2 = constrain(w2-5, 200, 450); \/\/decrease bottom circle size\n        w3 = constrain(w3+5, 80, 280); \/\/increase right circle size\n        r = constrain(r - 0.5, 5, 30);\n        g = constrain(g - 0.5, 114, 144);\n        b = constrain(b - 0.5, 225, 255); \/\/ make canvas color darker and limit the rgb range\n    }\n\n    \/\/ if mouse is inside the circle, change color\n    if (dist(mouseX, mouseY, x1, y1)&lt;w1\/2){ \n        r1 = 195;\n        g1 = 177;\n        b1 = 225;\n        fill(r1, g1, b1);\n    \/\/left circle\n        ellipse(x1, y1, w1, w1);\n        }\n    if (dist(mouseX, mouseY, x2, y2)&lt;w2\/2){\n        r2 = 189;\n        g2 = 181;\n        b2 = 213;\n        fill(r2, g2, b2);\n    \/\/ bottom circle\n        ellipse(x2, y2, w2, w2);\n        }\n    if (dist(mouseX, mouseY, x3, y3)&lt;w3\/2){\n        r3 = 204;\n        g3 = 204;\n        b3 = 255;\n    \/\/right circle\n        fill(r3, g3, b3);\n        ellipse(x3, y3, w3, w3);\n        }\n\n    \/\/ draw white lines and circles\n    stroke(255);\n    noFill();\n    strokeWeight(1.2);\n    ellipse(mouseX, mouseY, w+10, w+10);\n\n    translate(mouseX, mouseY); \/\/ translate the origin from (0,0) to (mouseX, mouseY)\n    line(0, 0, 0, lineY); \/\/one line and three circles on the line\n    ellipse(0, 60, dia); ellipse(0, 130, dia+20);ellipse(0, 200, dia+40);\n    rotate(radians(angle)); \/\/ rotate the line and repeat the process\n    line(0, 0, 0, lineY);\n    ellipse(0, 40, dia); ellipse(0, 100, dia+10);\n    rotate(radians(angle)); \/\/ rotate the line and repeat the process\n    line(0, 0, 0, lineY); \n    ellipse(0, 60, dia); ellipse(0, 130, dia+20);ellipse(0, 200, dia+40);\n    rotate(radians(angle));\n    line(0, 0, 0, lineY);\n    ellipse(0, 40, dia); ellipse(0, 100, dia+10);\n    rotate(radians(angle));\n    line(0, 0, 0, lineY);\n    ellipse(0, 60, dia); ellipse(0, 130, dia+20);ellipse(0, 200, dia+40);\n    rotate(radians(angle));\n    line(0, 0, 0, lineY);\n    ellipse(0, 40, dia); ellipse(0, 100, dia+10);\n    rotate(radians(angle));\n    line(0, 0, 0, lineY);\n    ellipse(0, 60, dia); ellipse(0, 130, dia+20);ellipse(0, 200, dia+40);\n    rotate(radians(angle));\n    line(0, 0, 0, lineY);\n    ellipse(0, 40, dia); ellipse(0, 100, dia+10);\n    rotate(radians(angle));\n    line(0, 0, 0, lineY);\n    ellipse(0, 60, dia); ellipse(0, 130, dia+20);ellipse(0, 200, dia+40);\n    rotate(radians(angle));\n    line(0, 0, 0, lineY);\n    ellipse(0, 40, dia); ellipse(0, 100, dia+10);\n    rotate(radians(angle));\n    line(0, 0, 0, lineY);\n    ellipse(0, 60, dia); ellipse(0, 130, dia+20);ellipse(0, 200, dia+40);\n    rotate(radians(angle));\n    line(0, 0, 0, lineY);\n    ellipse(0, 40, dia); ellipse(0, 100, dia+10);\n    rotate(radians(angle));\n    line(0, 0, 0, lineY);\n    ellipse(0, 60, dia); ellipse(0, 130, dia+20);ellipse(0, 200, dia+40);\n    rotate(radians(angle));\n    line(0, 0, 0, lineY);\n    ellipse(0, 40, dia); ellipse(0, 100, dia+10);\n    rotate(radians(angle));\n    line(0, 0, 0, lineY);\n    ellipse(0, 60, dia); ellipse(0, 130, dia+20);ellipse(0, 200, dia+40);\n    rotate(radians(angle));\n    line(0, 0, 0, lineY);\n    ellipse(0, 40, dia); ellipse(0, 100, dia+10);\n    rotate(radians(angle));\n    line(0, 0, 0, lineY);\n    ellipse(0, 60, dia); ellipse(0, 130, dia+20);ellipse(0, 200, dia+40);\n    rotate(radians(angle));\n    line(0, 0, 0, lineY);\n    ellipse(0, 40, dia); ellipse(0, 100, dia+10);\n    rotate(radians(angle));\n    line(0, 0, 0, lineY);\n    ellipse(0, 60, dia); ellipse(0, 130, dia+20);ellipse(0, 200, dia+40);\n\n    \/\/ change mouseY to change the rotating direction and rotation angles\n    \/\/ if mouseY is at the bottom half of the canvas, increase the rotation angle\n    if (mouseY &lt; height\/2) { \n        angle = constrain(angle + 0.5, -10, 20);\n    }\n    \/\/ if mouseY is at the top half of the canvas, decrease the rotation angle\n    if (mouseY &gt; height\/2){\n         angle = constrain(angle - 0.5, -10, 20); \n    }\n}\n\n\n\n<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>Moving the cursor up and down can change the rotation direction of the white &ldquo;flower&rdquo;. Moving the cursor left and right can change the canvas color and the size of the circles. If the cursor is inside the circle, the corresponding circle will change color. Xinyi Du sketch \/\/Xinyi Du \/\/15104 Section B var w &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/17\/project-03-dynamic-drawing-8\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project-03: Dynamic Drawing&#8221;<\/span><\/a><\/p>\n","protected":false},"author":716,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[100,56],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/72127"}],"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\/716"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=72127"}],"version-history":[{"count":3,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/72127\/revisions"}],"predecessor-version":[{"id":72696,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/72127\/revisions\/72696"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=72127"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=72127"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=72127"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}