sketch

<\/a><\/div>\n\n\n

sketch

<\/p>\n<\/a><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">var j=25\nvar l=15\nvar x=0\nvar y=0\nvar state=0\nfunction setup() {\n createCanvas(600,450);\n background(0);\n \n}\n\nfunction draw() {\n \/\/draw square according to the distance to the mosue\n \/*if(mouseX<width\/2){\n background(0);\n }else{\n background(255);\n }*\/\n background(0);\n\n \n noStroke();\n \n for (x=5;x<=width;x+=j){\n\n for(y=5;y<=width;y+=j){\n \/\/define variables for color changes\n var r =dist(mouseX,mouseY,x,y)\n var r2=dist(mouseX,mouseY,0,0)\n var r3=dist(mouseX,mouseY,width,height)\n var r4=dist(mouseX,mouseY,0,height)\n var r5=dist(mouseX,mouseY,width,0)\n var r6=dist(mouseX,mouseY,width\/2,height\/2)\n\n fill(r6,100-r,255-r+100)\n\n \/\/fill(r+10,150-r,255-r+200);\n\n \/\/color test 01\n \/*if(mouseX<width\/2 & mouseY<height\/2){\n fill(r2,r2+100,r2+200);\n }else if(mouseX<width\/2 & mouseY>height\/2){\n fill(r4,r4+100,r4+200);\n }else if(mouseX>width\/2 & mouseY<height\/2){\n fill(r5,r5+100,r5+200);\n }else if(mouseX>width\/2 & mouseY>height\/2){\n fill(r3,r3+100,r3+200);\n }*\/\n\n \/\/color test 02\n \/*if(mouseX<width\/2 & mouseY<height\/2){\n fill(r2,255-r,255-r+200);\n }else if(mouseX<width\/2 & mouseY>height\/2){\n fill(r4,255-r,255-r+200);\n }else if(mouseX>width\/2 & mouseY<height\/2){\n fill(r5,255-r,255-r+200);\n }else if(mouseX>width\/2 & mouseY>height\/2){\n fill(r3,255-r,255-r+200);\n }*\/\n\n \/\/color test 03\n \/*if(mouseX<width\/2 & mouseY<height\/2){\n fill(r+10,150-r,255-r+200);\n }else if(mouseX>width\/2 & mouseY>height\/2){\n fill(255-(r+10),255-(150-r),r-200);\n }else if(mouseX>width\/2 & mouseY<height\/2){\n fill(r,255-r-10,r);\n }else if(mouseX<width\/2 & mouseY>height\/2){\n fill(255-r,r+100,r+200);\n }*\/\n \n var l=(dist(mouseX,mouseY,x,y)\/20+7)\n \n if(state==0){\n rect(x,y,l,l);\n }else if(state==1){\n circle(x+l\/2,y+l\/2,l);\n }else if (state==2){\n triangle(x,y,x+l,y,x+l\/2,y+l);\n triangle(x,y+l,x+l,y+l,x+l\/2,y);\n }\n \n }\n fill(255);\n text('press mouse please :)',10,15);\n }\n \n }\n function mousePressed(){\n state+=1;\n if(state>=3){\n state=0;\n }\n}\n \n<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>sketch var j=25 var l=15 var x=0 var y=0 var state=0 function setup() { createCanvas(600,450); background(0); } function draw() { \/\/draw square according to the distance to the mosue \/*if(mouseX<width\/2){ background(0); }else{ background(255); }*\/ background(0); noStroke(); for (x=5;x<=width;x+=j){ for(y=5;y<=width;y+=j){ \/\/define variables for color changes var r =dist(mouseX,mouseY,x,y) var r2=dist(mouseX,mouseY,0,0) var r3=dist(mouseX,mouseY,width,height) var r4=dist(mouseX,mouseY,0,height) var r5=dist(mouseX,mouseY,width,0) … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/17\/project-03-dynamic-drawing-5\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “Project 03: Dynamic Drawing”<\/span><\/a><\/p>\n","protected":false},"author":770,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[100,121],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/72036"}],"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\/770"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=72036"}],"version-history":[{"count":2,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/72036\/revisions"}],"predecessor-version":[{"id":72039,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/72036\/revisions\/72039"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=72036"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=72036"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=72036"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}