{"id":72279,"date":"2022-09-18T12:59:35","date_gmt":"2022-09-18T16:59:35","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=72279"},"modified":"2022-09-18T12:59:35","modified_gmt":"2022-09-18T16:59:35","slug":"project-03-dynamic-drawing-10","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/18\/project-03-dynamic-drawing-10\/","title":{"rendered":"Project 03 &#8211; 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><ul><li>move the mouse <strong>up<\/strong> and <strong>down<\/strong> to see changes in color<\/li><li>move the mouse <strong>left<\/strong> and <strong>right<\/strong> to change spacing between the squares<\/li><\/ul><div><a class=\"p5_sketch_link\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/sketch-303.js\" data-width=\"700\" data-height=\"500\">sketch<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/plugins\/p5-embedder\/p5_iframe.html\" class=\"p5_exampleFrame\" width=\"700\" height=\"500\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">let angle = 0;\nvar size = 100\n\nfunction setup() {\n    createCanvas(700, 500);\n    background(220);\n    text(\"p5.js vers 0.9.0 test.\", 10, 15);\n}\n\nfunction draw() {\n    background(50);\n\n    \/\/circle in the center\n    push();\n        translate(width\/2,height\/2);\n            rotate(angle);\n            fill(mouseX,43,172);\n            stroke('black');\n            strokeWeight(5);\n        rectMode(CENTER);\n            square(0,0,300);\n        pop();\n\n    \/\/inner ring of circles\n        for(let a=0; a&lt;radians(360); a+=radians(30)){\n            \n            push();\n            translate(width\/2,height\/2);\n            rotate(a);\n            translate(0,size);\n                rotate(angle);\n            rectMode(CENTER);\n            blendMode(MULTIPLY);\n            fill(mouseY,43,100);\n            square(0,0,200);\n            pop();\n        }\n\n    \/\/outer row of circles\n        for(let a=0; a&lt;radians(360); a+=radians(30)){\n            \n            push();\n            translate(width\/2,height\/2);\n            rotate(a);\n            translate(0,size+100);\n                rotate(angle);\n            rectMode(CENTER);\n            blendMode(MULTIPLY);\n            fill(mouseY,43,172);\n            square(0,0,200);\n            pop();\n        }\n\n        \/\/makes it so that the squares don't disappear when mouseX goes to 700\n        size = max(mouseX\/2, 100);\n\n\n\n    angle += radians(1);\n\n}\n<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>move the mouse up and down to see changes in color move the mouse left and right to change spacing between the squares sketch let angle = 0; var size = 100 function setup() { createCanvas(700, 500); background(220); text(&#8220;p5.js vers 0.9.0 test.&#8221;, 10, 15); } function draw() { background(50); \/\/circle in the center push(); translate(width\/2,height\/2); &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/18\/project-03-dynamic-drawing-10\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 03 &#8211; Dynamic Drawing&#8221;<\/span><\/a><\/p>\n","protected":false},"author":712,"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\/72279"}],"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\/712"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=72279"}],"version-history":[{"count":6,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/72279\/revisions"}],"predecessor-version":[{"id":72288,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/72279\/revisions\/72288"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=72279"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=72279"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=72279"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}