{"id":71956,"date":"2022-09-16T21:42:57","date_gmt":"2022-09-17T01:42:57","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=71956"},"modified":"2022-09-16T21:43:34","modified_gmt":"2022-09-17T01:43:34","slug":"project-03-dynamic-drawing-2","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/16\/project-03-dynamic-drawing-2\/","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><p>I went poking around the p5js reference library and found a really intriguing example in the randomGaussian() object so I decided to run with that and see what I could do with that. mouseX controls the properties of the yellow burst, and mouseY the blue. Click to randomize the burst lines, and click and drag to shade the background along greyscale.<\/p>\n\n\n<div class=\"wp-block-file\"><a class=\"p5_sketch_link\" data-width=\"600\" data-height=\"450\" id=\"wp-block-file--media-f345c7de-0e54-4bbf-adcb-4b81222c8eba\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/sketch-269.js\">sketch<\/a><a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/sketch-269.js\" class=\"wp-block-file__button\" download aria-describedby=\"wp-block-file--media-f345c7de-0e54-4bbf-adcb-4b81222c8eba\">Download<\/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\">\/\/ Bridget Doherty, bpdohert, 104 Section C\n \n\/\/ Click to randomize burst density\n\/\/ mouse X position changes yellow burst\n\/\/ mouse Y position changes blue burst\n\/\/ Clicking & dragging changes background color along greyscale\n\n\/\/ Base code for bursts from p5js reference >> randomGaussian() object\n\nlet distribution = new Array(360);\nvar Burst1 = 200;\nvar Burst2 = 200;\nlet bkgColor = 0;\n\nfunction setup() {\n  createCanvas(600, 450);\n  for (let i = 0; i &lt; distribution.length; i++) {\n    distribution[i] = floor(randomGaussian(0, Burst1));\n  }\n  for (let i2 = 0; i2 &lt; distribution.length; i2++) {\n    distribution[i2] = floor(randomGaussian(0, Burst2));\n  }\n}\n\nfunction draw() {\n  background(bkgColor);\n  translate(width \/ 2, height \/ 2);\n  for (let i = 0; i &lt; distribution.length; i++) {\n    rotate(TWO_PI \/ distribution.length);\n    strokeWeight(1.5);\n    stroke(color(243, 197, 101));\n    let dist = abs(distribution[i]);\n    line(0+mouseX, 0, dist, 0);\n  }\n  for (let i2 = 0; i2 &lt; distribution.length; i2++) {\n    rotate(TWO_PI \/ distribution.length);\n    stroke(color(158, 182, 187));\n    let dist = abs(distribution[i2]);\n    line(0, 0+mouseY, dist, 0);\n  }\n}\n\nfunction mousePressed(){\n  let Burst1 = mouseX;\n  let Burst2 = mouseY;\n  print (Burst1 +\", \" + Burst2);\n  for (let i = 0; i &lt; distribution.length; i++) {\n    distribution[i] = floor(randomGaussian(0, Burst1));\n  }\n  for (let i2 = 0; i2 &lt; distribution.length; i2++) {\n    distribution[i2] = floor(randomGaussian(0, Burst2));\n  }\n}\n\nfunction mouseDragged() {\n  bkgColor = bkgColor - 0.7;\n  if (bkgColor&lt;=0) {\n    bkgColor = 255;\n  }\n}\n<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>I went poking around the p5js reference library and found a really intriguing example in the randomGaussian() object so I decided to run with that and see what I could do with that. mouseX controls the properties of the yellow burst, and mouseY the blue. Click to randomize the burst lines, and click and drag &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/16\/project-03-dynamic-drawing-2\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 03-Dynamic Drawing&#8221;<\/span><\/a><\/p>\n","protected":false},"author":715,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[125,61],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/71956"}],"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\/715"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=71956"}],"version-history":[{"count":2,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/71956\/revisions"}],"predecessor-version":[{"id":71959,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/71956\/revisions\/71959"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=71956"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=71956"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=71956"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}