{"id":72195,"date":"2022-09-17T23:40:20","date_gmt":"2022-09-18T03:40:20","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=72195"},"modified":"2022-09-17T23:40:20","modified_gmt":"2022-09-18T03:40:20","slug":"project-03-dynamic-drawing-9","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/17\/project-03-dynamic-drawing-9\/","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><div class=\"wp-block-file\"><a class=\"p5_sketch_link\" data-width=\"600\" data-height=\"600\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/sketch-295.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=\"600\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">var d= 100;\/\/diameter of each circle\n\nfunction setup() {\n    createCanvas(600, 450);\n}\n\nfunction draw() {\n    background(10);\n    noStroke();\n    \n    d=min(mouseX,width);\/\/d changes when the mouse moves\n    fill(\"red\");\n    circle(width\/4, height\/4, d);\/\/top left red circle\n    fill(\"green\");\n    circle((width\/4)*3, (height\/4)*3, d);\/\/bottom right green circle\n  \n    d=width-d;\/\/ d changes oppositely \n    fill(\"blue\");\n    circle(width\/4, (height\/4)*3, d);\/\/bottom left blue circle\n    fill(\"orange\");\n    circle((width\/4)*3, height\/4, d);\/\/top right orange circle\n    \n}<\/code><\/pre><\/div>\n\n\n\n<p>When I was designing the graph, I was thinking about the idea of contrasting colors (red and green, blue and orange) and circles popping out.<\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>sketch var d= 100;\/\/diameter of each circle function setup() { createCanvas(600, 450); } function draw() { background(10); noStroke(); d=min(mouseX,width);\/\/d changes when the mouse moves fill(&#8220;red&#8221;); circle(width\/4, height\/4, d);\/\/top left red circle fill(&#8220;green&#8221;); circle((width\/4)*3, (height\/4)*3, d);\/\/bottom right green circle d=width-d;\/\/ d changes oppositely fill(&#8220;blue&#8221;); circle(width\/4, (height\/4)*3, d);\/\/bottom left blue circle fill(&#8220;orange&#8221;); circle((width\/4)*3, height\/4, d);\/\/top right orange &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/17\/project-03-dynamic-drawing-9\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project-03: Dynamic Drawing&#8221;<\/span><\/a><\/p>\n","protected":false},"author":709,"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\/72195"}],"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\/709"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=72195"}],"version-history":[{"count":3,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/72195\/revisions"}],"predecessor-version":[{"id":72203,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/72195\/revisions\/72203"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=72195"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=72195"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=72195"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}