{"id":71969,"date":"2022-09-16T23:27:26","date_gmt":"2022-09-17T03:27:26","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=71969"},"modified":"2022-09-16T23:31:14","modified_gmt":"2022-09-17T03:31:14","slug":"project-03-dynamic-drawing-section-d","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/16\/project-03-dynamic-drawing-section-d\/","title":{"rendered":"Project-03-Dynamic-Drawing Section D"},"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 enjoyed the freeform in this project which was more open-ended. I had lots of fun playing tricks on the eye in addition to the mouse interaction. Move your mouse left and right and see what happens!!<\/p>\n\n\n\n<div><a class=\"p5_sketch_link\" data-height=\"450\" data-width=\"600\" id=\"wp-block-file--media-31e71071-8315-4809-aab0-cb02ecd01a09\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/sketch-270.js\">dynamic drawing 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\">var angle = 0;\nvar x;\nvar y;\nvar w = 80;\nvar h = 80;\nvar xe;\nfunction setup() {\n    createCanvas(600, 450);\n    background(220);\n    frameRate(15); \n    \n}\n\nfunction draw() {\n    background(204);\n    var x = width\/2;\n    var y = height\/2;\n    var xe = width\/2;\n    var ye = height\/2;\n    \n\n    angle = angle + 1; \n    if (mouseX &lt;= width\/2) {  \/\/ when mouse moves to left\n        background(255); \/\/ black background\n        \/\/ make square bigger\n        w = w + 8;\n        h = h + 8;\n\n        \/\/ bigger white rectangle\n        push();\n        translate(x,y);   \n        rotate(-angle);\n        rectMode(CENTER);\n        fill (0);\n        rect(0, 0, w*20, h*20);\n        pop();\n        \/\/bigger white circle\n        fill(255);\n        ellipse(xe, ye, w*17); \n        \/\/ big black rectangle \n        push();\n        translate(x,y);   \n        rotate(angle);\n        rectMode(CENTER);\n        fill (0);\n        rect(0, 0, w*10, h*10);\n        pop();\n        \/\/ big white circle\n        fill(255);\n        ellipse(xe, ye, w*8);  \n        \/\/ black rectangle\n        push();   \/\/ this keeps whatever code that is inside push and pop \"self contained\" without affecting other code\/ \"undo\"\n        translate (x,y);\n        rotate(-angle); \n        rectMode(CENTER);\n        fill(0);\n        rect(0, 0, w*4, h*4);\n        \/\/ draw black ellipse in center of square\n        pop(); \n        fill(255);\n        ellipse (xe, ye, w*3);  \n         \/\/ square inside of ellipse that rotates the opposite direction \n        push();\n        translate(x,y);  \n        rotate(angle);\n        rectMode(CENTER);\n        fill(0);\n        rect(0, 0, w, h);\n        pop();\n        \/\/ small white circle that approaches center\n        push();\n        translate(300, 225);\n        rotate(radians(angle)); \n        ellipse(xe -100, ye - 100, 50);\n        pop();\n        angle = angle + 8; \/\/ used to be 50\n\n        \n    } else if (mouseX &gt;= width\/2) {  \/\/ when mouse moves to right\n        background(0); \/\/ white background\n        \/\/ make square bigger\n        w = w - 8; \n        h = h - 8;\n         \/\/ bigger black rectangle\n        push();\n        translate(x,y);   \n        rotate(angle);\n        rectMode(CENTER);\n        fill (255);\n        rect(0, 0, w*20, h*20);\n        pop();\n        \/\/ bigger black circle\n        fill(0);\n        ellipse(xe, ye, w*17); \n        \/\/ big white rectangle\n        push();\n        translate(x,y);   \n        rotate(-angle);\n        rectMode(CENTER);\n        fill (255);\n        rect(0, 0, w*10, h*10);\n        pop();\n        \/\/ really big black circle\n        fill(0);\n        ellipse(xe, ye, w*8);  \n        \/\/ big white rectangle\n        push();\n        translate (x,y);  \n        rotate(angle); \n        rectMode(CENTER);\n        fill(255);\n        rect(0, 0, w*4, h*4);\n        pop();\n        \/\/ smaller black circle \n        fill(0);\n        ellipse (xe, ye, w*3); \n        \/\/ white rectangle that rotates in opposite direction\n        fill(255);        \n        translate(x,y);  \n        rotate(-angle);\n        rectMode(CENTER);\n        fill(255);\n        rect(0, 0, w, h);\n        \/\/ small black circle with white outline that approaches center\n        push();\n        translate(300, 225);\n        rotate(radians(angle)); \n        stroke(255);\n        fill(0);\n        ellipse(xe -100, ye - 100, 50);\n        pop();\n        angle = angle - 8;\n\n    }\n}\n    \n\n<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>I enjoyed the freeform in this project which was more open-ended. I had lots of fun playing tricks on the eye in addition to the mouse interaction. Move your mouse left and right and see what happens!! dynamic drawing sketch var angle = 0; var x; var y; var w = 80; var h = &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/16\/project-03-dynamic-drawing-section-d\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project-03-Dynamic-Drawing Section D&#8221;<\/span><\/a><\/p>\n","protected":false},"author":776,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[100,58,1],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/71969"}],"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\/776"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=71969"}],"version-history":[{"count":2,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/71969\/revisions"}],"predecessor-version":[{"id":71974,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/71969\/revisions\/71974"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=71969"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=71969"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=71969"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}