{"id":65881,"date":"2021-09-16T19:30:42","date_gmt":"2021-09-16T23:30:42","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=65881"},"modified":"2021-09-16T19:30:42","modified_gmt":"2021-09-16T23:30:42","slug":"dynamic-drawing","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/09\/16\/dynamic-drawing\/","title":{"rendered":"Dynamic Drawing"},"content":{"rendered":"\n

file<\/a><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/Georgia Miller\n\/\/15-104 Section D\n\/\/mouse controls change from moving along x axis\nfunction setup() {\n createCanvas(450, 600);\n background(220);\n text(\"p5.js vers 0.9.0 test.\", 10, 15);\n}\n\nfunction draw() {\nbackground(0);\ntranslate(225,mouseX); \/\/center \/\/mouseX changes position\nvar sqrWidth = 50;\nif(mouseX<225){ \/\/clockwise rotation\nrectMode(CENTER);\nrotate(radians(frameCount)); \/\/typically 10 frameRate\n}\nif(mouseX>225){ \/\/counterclockwise rotation\nrectMode(CENTER);\nrotate(radians(-frameCount)); \/\/typically 10 frameRate\n}\nsrqWidth = sqrWidth + 10 * mouseX; \/\/for size change\nif (mouseX<225) {\/\/Color change to greys on left\n fill(255);\n rect(0,0,mouseX\/2+120,mouseX\/2+120); \/\/mouse for size change\n fill(220);\n rect(0,0, mouseX\/2+100,mouseX\/2+100);\n fill(185);\n rect(0,0,mouseX\/2+80,mouseX\/2+80);\n fill(150);\n rect(0,0,mouseX\/2+60,mouseX\/2+60);\n fill(115);\n rect(0,0,mouseX\/2+40,mouseX\/2+40);\n fill(80);\n rect(0,0,mouseX\/2+20,mouseX\/2+20);\n fill(45);\n rect(0,0,mouseX\/2,mouseX\/2);\n}\nif (mouseX > 225){ \/\/colorchange to rainbow on right\n fill(255,0,255);\n rect(0,0,mouseX\/4+120,mouseX\/4+120);\n fill(255,0,0);\n rect(0,0, mouseX\/4+100,mouseX\/4+100);\n fill(255,150,10);\n rect(0,0,mouseX\/4+80,mouseX\/4+80);\n fill(255,255,0);\n rect(0,0,mouseX\/4+60,mouseX\/4+60);\n fill(0,255,0);\n rect(0,0,mouseX\/4+40,mouseX\/4+40);\n fill(10,215,255);\n rect(0,0,mouseX\/4+20,mouseX\/4+20);\n fill(0,0,255);\n rect(0,0,mouseX\/4,mouseX\/4);\n} \n\n}\n<\/code><\/pre><\/p>\n\n\n\n<p>I had an idea coming in and got really stuck so I decided after a while to change my idea. I struggled trying to work around my translation for a while especially when considering up and down motions. It was weird to see all my mistakes before I put my background in because everything kept looping over each other because of my frameRate, which created this cool circle around my rotating square.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"558\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/IMG_5438-1024x558.jpg\" alt=\"\" class=\"wp-image-65883\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/IMG_5438-1024x558.jpg 1024w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/IMG_5438-300x163.jpg 300w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/IMG_5438-768x418.jpg 768w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/IMG_5438-1536x836.jpg 1536w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/IMG_5438-2048x1115.jpg 2048w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/IMG_5438-1200x653.jpg 1200w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\"><\/figure><figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"840\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/IMG_5439-1024x840.jpg\" alt=\"\" class=\"wp-image-65884\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/IMG_5439-1024x840.jpg 1024w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/IMG_5439-300x246.jpg 300w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/IMG_5439-768x630.jpg 768w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/IMG_5439-1536x1260.jpg 1536w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/IMG_5439-2048x1680.jpg 2048w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/IMG_5439-1200x985.jpg 1200w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\"><\/figure><figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"768\" height=\"1024\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/IMG_5440-768x1024.jpg\" alt=\"\" class=\"wp-image-65885\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/IMG_5440-768x1024.jpg 768w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/IMG_5440-225x300.jpg 225w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/IMG_5440-1152x1536.jpg 1152w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/IMG_5440-1536x2048.jpg 1536w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/IMG_5440-1200x1600.jpg 1200w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/IMG_5440-scaled.jpg 1920w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\"><\/figure><p><\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>file \/\/Georgia Miller \/\/15-104 Section D \/\/mouse controls change from moving along x axis function setup() { createCanvas(450, 600); background(220); text(“p5.js vers 0.9.0 test.”, 10, 15); } function draw() { background(0); translate(225,mouseX); \/\/center \/\/mouseX changes position var sqrWidth = 50; if(mouseX<225){ \/\/clockwise rotation rectMode(CENTER); rotate(radians(frameCount)); \/\/typically 10 frameRate } if(mouseX>225){ \/\/counterclockwise rotation rectMode(CENTER); rotate(radians(-frameCount)); \/\/typically … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/09\/16\/dynamic-drawing\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “Dynamic Drawing”<\/span><\/a><\/p>\n","protected":false},"author":660,"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\/f2021\/wp-json\/wp\/v2\/posts\/65881"}],"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\/660"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=65881"}],"version-history":[{"count":2,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/65881\/revisions"}],"predecessor-version":[{"id":65887,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/65881\/revisions\/65887"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=65881"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=65881"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=65881"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}