{"id":72459,"date":"2022-09-19T09:42:22","date_gmt":"2022-09-19T13:42:22","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=72459"},"modified":"2022-09-23T09:52:00","modified_gmt":"2022-09-23T13:52:00","slug":"project-3-dynamic-drawing-5","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/19\/project-3-dynamic-drawing-5\/","title":{"rendered":"Project 3 &#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><p>For this dynamic drawing, drag your mouse across the screen. The more left you drag the mouse, the color diagrams will expand inwards. Dragging your mouse downwards will expand the circles vertically, creating an overlap of both colors and alpha values. This will mean when you drag your mouse to the bottom right corner, there will be a large pink-white shape taking up most of the screen.<\/p>\n\n\n\n<div class=\"wp-block-file\"><a class=\"p5_sketch_link\" data-width=\"400\" data-height=\"400\" id=\"wp-block-file--media-14d3cd4f-03d0-4011-a86e-541ca7a98561\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/sketch-327.js\">csavitzv_03<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/plugins\/p5-embedder\/p5_iframe.html\" class=\"p5_exampleFrame\" width=\"400\" height=\"400\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/Cole Savitz-Vogel\n\/\/csavitzv\n\/\/Section A\n\n\n    function setup() {\n     createCanvas(600, 600);\n     pixelDensity(2);\n     rectMode(RADIUS);\n     var morph = (dist(mouseX, mouseX, width \/ 2, 0))\n     var span = (dist(mouseY, mouseY, height \/ 2, 0))\n}\n\n    function draw() {\n     background(0);\n     strokeWeight(3);\n     stroke(255, 255, 255, 25);\n     strokeJoin(ROUND);\n     noSmooth();\n     if (mouseIsPressed){\n     push();\n     blendMode(ADD);\n     fill(150, 20, 110, 50);\n     ellipse(300 + (morph, span, 100, 300), 75, (5 * mouseX), mouseY);\n     ellipse(300 - (morph, span, 100, 300), 100, (5 * mouseX), mouseY);\n     fill(150, 20, 30, 50);\n     ellipse(300 + (morph, span, 150, 300), 125, (5 * mouseX), mouseY);\n     ellipse(300 - (morph, span, 150, 300), 150, (5 * mouseX), mouseY);\n     fill(100, 50, 10, 50);\n     ellipse(300 + (morph, span, 200, 300), 175, (5 * mouseX), mouseY);\n     ellipse(300 - (morph, span, 200, 300), 200, (5 * mouseX), mouseY);\n     fill(100, 100, 0, 50);\n     ellipse(300 + (morph, span, 250, 300), 225, (5 * mouseX), mouseY);\n     ellipse(300 - (morph, span, 250, 300), 250, (5 * mouseX), mouseY);\n     fill(50, 150, 50, 50);\n     ellipse(300 + (morph, span, 300, 300), 275, (5 * mouseX), mouseY);\n     ellipse(300 - (morph, span, 300, 300), 300, (5 * mouseX), mouseY);\n     fill(20, 100, 150, 50);\n     ellipse(300 + (morph, span, 250, 300), 325, (5 * mouseX), mouseY);\n     ellipse(300 - (morph, span, 250, 300), 350, (5 * mouseX), mouseY);\n     fill(70, 50, 150, 50);\n     ellipse(300 + (morph, span, 200, 300), 375, (5 * mouseX), mouseY);\n     ellipse(300 - (morph, span, 200, 300), 400, (5 * mouseX), mouseY);\n     fill(110, 20, 150, 50);\n     ellipse(300 + (morph, span, 150, 300), 425, (5 * mouseX), mouseY);\n     ellipse(300 - (morph, span, 150, 300), 450, (5 * mouseX), mouseY);\n     fill(150, 20, 110, 50);\n     ellipse(300 + (morph, span, 100, 300), 475, (5 * mouseX), mouseY);\n     ellipse(300 - (morph, span, 100, 300), 500, (5 * mouseX), mouseY);\n     pop();\n  }\n}<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>For this dynamic drawing, drag your mouse across the screen. The more left you drag the mouse, the color diagrams will expand inwards. Dragging your mouse downwards will expand the circles vertically, creating an overlap of both colors and alpha values. This will mean when you drag your mouse to the bottom right corner, there &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/19\/project-3-dynamic-drawing-5\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 3 &#8211; Dynamic Drawing&#8221;<\/span><\/a><\/p>\n","protected":false},"author":757,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[100,55],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/72459"}],"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\/757"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=72459"}],"version-history":[{"count":8,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/72459\/revisions"}],"predecessor-version":[{"id":72599,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/72459\/revisions\/72599"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=72459"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=72459"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=72459"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}