{"id":72205,"date":"2022-09-17T23:50:02","date_gmt":"2022-09-18T03:50:02","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=72205"},"modified":"2022-09-17T23:54:40","modified_gmt":"2022-09-18T03:54:40","slug":"project-3-dynamic-drawing-3","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/17\/project-3-dynamic-drawing-3\/","title":{"rendered":"Project 3: 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><div><a class=\"p5_sketch_link\" data-width=\"600\" data-height=\"450\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/sketch-297.js\">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\">\/\/ Ana Furtado \n\/\/ Section E\n\/\/ Project 3 -- Dynamic Drawing\n\nvar angle = 0;\n\nfunction setup() {\n    createCanvas(600, 450);\n}\n\nfunction draw() {\n    background(max(mouseX, mouseY)); \/\/ gets lighter and darker \n    fill(255); \/\/white center rectangle\n    strokeWeight(mouseX); \/\/ gets bigger as moves to the right\n    rotate(radians(angle)); \n    rectMode(CENTER);\n    rect(300, 225, 200, 150); \/\/center white rectangle\n    angle += (min(mouseX, mouseY)); \/\/\/spins rectangles according to mouse\n    fill(255);\n    \/\/outer rectangles grow bigger and smaller and overlap\n    rect(100, 75, 200, mouseY); \/\/ outer rect L1\n    rect(100, 375, 200, -mouseY); \/\/outer rect L2\n    rect(500, 75, 200, mouseY); \/\/outer rect R1\n    rect(500, 375, 200, -mouseY); \/\/outer rect R2\n\n}\n\n<\/code><\/pre><\/div>\n\n\n<p>I by thinking about what could change by moving mouseX and mouseY. The most difficult part was getting the rotating around the origin to work.<\/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\/f2022\/wp-content\/uploads\/2022\/09\/IMG_2894-1.jpg\" alt=\"\" class=\"wp-image-72211\" width=\"194\" height=\"194\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/IMG_2894-1.jpg 640w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/IMG_2894-1-300x300.jpg 300w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/IMG_2894-1-150x150.jpg 150w\" sizes=\"(max-width: 194px) 85vw, 194px\"><\/figure><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>sketch \/\/ Ana Furtado \/\/ Section E \/\/ Project 3 &#8212; Dynamic Drawing var angle = 0; function setup() { createCanvas(600, 450); } function draw() { background(max(mouseX, mouseY)); \/\/ gets lighter and darker fill(255); \/\/white center rectangle strokeWeight(mouseX); \/\/ gets bigger as moves to the right rotate(radians(angle)); rectMode(CENTER); rect(300, 225, 200, 150); \/\/center white rectangle &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/17\/project-3-dynamic-drawing-3\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 3: Dynamic Drawing&#8221;<\/span><\/a><\/p>\n","protected":false},"author":749,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[100,121],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/72205"}],"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\/749"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=72205"}],"version-history":[{"count":2,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/72205\/revisions"}],"predecessor-version":[{"id":72216,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/72205\/revisions\/72216"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=72205"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=72205"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=72205"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}