sketch<\/a><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/ GRAHAM MURTHA\n\/\/ Section A\n\nlet opacity = 100;\n\nvar dir = 1\nvar fill = 50\nvar angle = 0\n\n\nfunction setup() {\n createCanvas(600, 450);\n background(0);\n text(\"p5.js vers 0.9.0 test.\", 10, 15);\n\n}\n\n\n\nfunction draw() {\nlet x = mouseX;\nlet y = mouseY;\nlet ix = width - mouseX; \/\/ Inverted X\nlet iy = height - mouseY; \/\/ Inverted Y\nbackground(0,0,50) \/\/ dark blue\n\n\/\/ellipse SET 1\n fill(255,0,255, opacity); \/\/purple\n ellipse(x, height\/2, y\/2, y\/2);\n\n fill(255,255,0, opacity); \/\/yellow\n ellipse(ix, height\/2, iy\/2, iy\/2);\n \n \n translate(width\/2,height\/2) \/\/moving origin of rotating orbs to center\n push() ;\n\n\n\/\/ellipse SET 2\n rotate(radians(angle)+45)\n fill(255,0,255, opacity); \/\/purple\n ellipse(x, height\/2, y\/2, y\/2);\n fill(255,255,0, opacity); \/\/yellow\n ellipse(ix, height\/2, iy\/2, iy\/2);\n pop();\n angle -=.2\n \n\n\/\/ellipse SET 3\n rotate(radians(angle)+90)\n fill(255,0,255, -opacity); \/\/purple\n ellipse(x\/2, height\/4, y\/4, y\/4);\n fill(255,255,0, opacity); \/\/yellow\n ellipse(ix\/2, height\/4, iy\/4, iy\/4);\n pop();\n angle +=.2\n\n\n\/\/ellipse SET 4\n rotate(radians(angle)+135)\n fill(255,0,255, opacity); \/\/purple\n ellipse(x\/2, height\/4, y\/2, y\/2);\n fill(255,255,0, opacity); \/\/yellow\n ellipse(ix\/2, height\/4, iy\/2, iy\/2);\n pop();\n angle -=.2\n\n \n\/\/ellipse SET 5\n rotate(radians(angle)+180)\n fill(255,0,255, opacity); \/\/purple\n ellipse(x\/2, height\/4, y\/4, y\/4);\n fill(255,255,0, opacity); \/\/yellow\n ellipse(ix\/2, height\/4, iy\/4, iy\/4);\n pop();\n angle +=.2\n\n\/\/ellipse SET 6\n rotate(radians(angle)+225)\n\n fill(255,0,255, opacity); \/\/purple\n ellipse(x\/2, height\/4, y\/2, y\/2);\n\n fill(255,255,0, opacity); \/\/yellow\n ellipse(ix\/2, height\/4, iy\/2, iy\/2);\n\n pop();\n angle -=.2\n\n\n\/\/ellipse SET 6\n rotate(radians(angle)+225)\n fill(255,0,255, opacity); \/\/purple\n ellipse(x\/2, height\/4, y\/4, y\/4);\n fill(255,255,0, opacity); \/\/yellow\n ellipse(ix\/2, height\/4, iy\/4, iy\/4);\n pop();\n angle +=.2\n\n\n \/\/ellipse SET 7\n rotate(radians(angle)+360)\n fill(255,0,255, opacity); \/\/purple\n ellipse(x\/2, height\/4, y\/2, y\/2);\n fill(255,255,0, opacity); \/\/yellow\n ellipse(ix\/2, height\/4, iy\/2, iy\/2);\n pop();\n angle -=.2\n}\n\n\n\n \n\/\/change in the opacity of the circles\nfunction mouseMoved() {\n opacity = map(mouseX, 0, 300, 600, 50, 255, 50) \n opacity = map(mouseY, 0, 225, 450, 50, 255, 50) \n}\n\n\/\/As the mouse moves further right and further downwards, the opacity of ALL of the spheres will change\n\n \n<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>Graham Murtha, Section A This is a dance routine of some complimentary color orbs. sketch \/\/ GRAHAM MURTHA \/\/ Section A let opacity = 100; var dir = 1 var fill = 50 var angle = 0 function setup() { createCanvas(600, 450); background(0); text(“p5.js vers 0.9.0 test.”, 10, 15); } function draw() { let x … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/19\/project-3-dynamic-drawing-6\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “Project 3- Dynamic Drawing”<\/span><\/a><\/p>\n","protected":false},"author":748,"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\/72495"}],"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\/748"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=72495"}],"version-history":[{"count":1,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/72495\/revisions"}],"predecessor-version":[{"id":72496,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/72495\/revisions\/72496"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=72495"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=72495"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=72495"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}