{"id":66071,"date":"2021-09-18T21:32:59","date_gmt":"2021-09-19T01:32:59","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=66071"},"modified":"2021-09-18T21:33:27","modified_gmt":"2021-09-19T01:33:27","slug":"project-3-dynamic-drawing-8","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/09\/18\/project-3-dynamic-drawing-8\/","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 class=\"wp-block-file\"><a class=\"p5_sketch_link\" data-width=\"600\" data-height=\"450\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/sketch-142.js\">sketch<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/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 x;\nvar y;\nvar strokeValue;\nvar mx;\nvar my;\nvar dragging \n\nfunction setup() {\n    createCanvas(600, 450);\n    background(0);\n    text(\"p5.js vers 0.9.0 test.\", 10, 15);\n}\n\nfunction draw() {\n    \/\/center point variables\n    let x = width\/2;\n    let y = height\/2;\n    \/\/stroke color variable\n    let strokeValue = 255;\n    \/\/map of black screen ellipse\n    let mx= map(mouseX, 0, width, 0, 600);\n    \/\/allows for ellipse to drag (which I just realized\n    \/\/is pointless for this code)\n    if(dragging == true) {\n        x=mouseX;\n        y=mouseY;\n    }\n    \/\/redraws ellipse with no background\n    if (mouseIsPressed) {\n    stroke(strokeValue);\n    noFill();\n    ellipse(x, y, (mouseX), (mouseY));\n    fill(0);\n    \/\/draws two ellipses on black screen, one is mapped\n    } else {\n        background(0)\n        stroke(mouseX,0,mouseY);\n        noFill();\n        ellipse(mouseX, mouseY, mouseX, mouseY);\n        ellipse(mx, y, mouseX, mouseY);\n        text('press :)', mouseX, mouseY);\n    }\n}\n\/\/changes background value to current value of mouseX,mouseY\nfunction mousePressed() {\n    background(mouseX,0,mouseY);\n    dragging = true;\n}\n\/\/changes dragging to false\nfunction mouseReleased() {\n    dragging = false;\n}\n\n\n<\/code><\/pre><\/div>\n\n\n\n<p><\/p>\n\n\n\n<p>Originally, I wanted to do something really cool with infinitely generating circles. That idea morphed into this fun, interactive circle drawing. You can click anywhere on the canvas to generate a new background color based on the location of your mouse, and draw cool circles!<\/p>\n\n\n\n<p><meta charset=\"utf-8\">I&rsquo;ll admit I struggled a lot with this project, but overall I am happy with what I came up with. I know it&rsquo;s maybe not as complex as what we&rsquo;re aiming for, however I learned a lot by creating it.<\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>Originally, I wanted to do something really cool with infinitely generating circles. That idea morphed into this fun, interactive circle drawing. You can click anywhere on the canvas to generate a new background color based on the location of your mouse, and draw cool circles! I&rsquo;ll admit I struggled a lot with this project, but &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/09\/18\/project-3-dynamic-drawing-8\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 3- Dynamic Drawing&#8221;<\/span><\/a><\/p>\n","protected":false},"author":665,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[100,57,1],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/66071"}],"collection":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/users\/665"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=66071"}],"version-history":[{"count":4,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/66071\/revisions"}],"predecessor-version":[{"id":66085,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/66071\/revisions\/66085"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=66071"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=66071"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=66071"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}