{"id":72336,"date":"2022-09-18T20:26:24","date_gmt":"2022-09-19T00:26:24","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=72336"},"modified":"2022-09-18T20:31:10","modified_gmt":"2022-09-19T00:31:10","slug":"project-03-4","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/18\/project-03-4\/","title":{"rendered":"Project &#8211; 03"},"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>right click to refresh<\/p>\n<div><a class=\"p5_sketch_link\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/sketch-307.js\" data-width=\"600\" data-height=\"450\">sketch<\/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\">\n\/\/grid lines vertical\nvar x1 = 30\nvar y1 = 30\nvar x2 = 30\nvar y2 = 60\n\n\/\/grid lines horizontal\nvar Ax1 = 60\nvar Ay1 = 30\nvar Ax2 = 90\nvar Ay2 = 30\n\n\/\/orange square\nvar Sx1 = 60\nvar Sy1 = 60\nvar d = 30\n\n\/\/purple square\nvar PSx1 = 240\nvar PSy1 = 300\nvar Pd = 30\n\n\/\/yellow square\nvar YSx1 = 420\nvar YSy1 = 210\nvar Yd = 30\n\n\nvar gap = 30\nvar scolor = 0\nvar slant = 0\nfunction setup() {\n    createCanvas(600, 450);\n    background(0);\n    \/\/text(\"p5.js vers 0.9.0 test.\", 10, 15);\n}\n\n\n\nfunction draw() {\n\n\/\/orange square\nstrokeWeight(0)\nfill('orange')\nsquare(Sx1,Sy1,d)\n\n\/\/purple square\nstrokeWeight(0)\nfill('purple')\nsquare(PSx1,PSy1,Pd)\n\n\/\/yellow square\nstrokeWeight(0)\nfill('yellow')\nsquare(YSx1,YSy1,Yd)\n\n\/\/ scaling square orange\nif(dist(mouseX,mouseY,Sx1+d\/2,Sy1+d\/2)&lt;d){\n    \/\/squaresscale\n    d+=10\n}if(d==width\/2-15 || d==height\/2-15){\n    strokeWeight(0);\n    fill(0)\n    square(0,0,1000);\n    strokeWeight(0);\n    fill(random(200,255));\n    square(Sx1,Sy1,d);\n    d=60;\n}\n\n\/\/ scaling square purple\nif(dist(mouseX,mouseY,PSx1+d\/2,PSy1+Pd\/2)&lt;Pd){\n    \/\/squaresscale\n    Pd+=30\n}if(Pd==width\/4 || Pd==height\/4){\n    strokeWeight(0);\n    fill(0)\n    square(0,0,1000);\n    strokeWeight(0);\n    fill(random(200,255));\n    square(PSx1,PSy1,Pd);\n    Pd=60;\n}\n\n\/\/ scaling square yellow\nif(dist(mouseX,mouseY,YSx1+d\/2,YSy1+Yd\/2)&lt;Yd){\n    \/\/squaresscale\n    Yd+=1\n}if(Yd==width\/4 || Yd==height\/4){\n    strokeWeight(0);\n    fill(0)\n    square(0,0,1000);\n    strokeWeight(0);\n    fill(random(200,255));\n    square(YSx1,YSy1,Yd);\n    Yd=60;\n}\n\n\n\n\/\/grid lines vertical left to right\n\/\/color\nif(scolor==0){\nstroke('red');\nstrokeWeight(3);\nline(x1,y1,x2,y2);\n}if(scolor==1){\nstroke('green');\nstrokeWeight(3);\nline(x1,y1,x2,y2);\n}if(scolor==2){\nstroke('blue');\nstrokeWeight(3);\nline(x1,y1,x2,y2);\n}if(scolor&gt;2){\n    scolor=0;\n} \n\n\n\n\n\/\/grid creation animation\nx1+=gap\nx2+=gap\n\n\/\/lines hit edge of canvas\nif(x1&gt;=width-60){\n    \/\/move down a row\n    y1+=gap*2;\n    y2+=gap*2;\n    \/\/reset x values\n    x1=gap;\n    x2=gap;\n\/\/loop lines across screen\n}if(y2&gt;=height){\n    x1=30;\n    x2=30;\n    y1=30;\n    y2=60;\n    scolor +=1\n}\n\n\/\/grid lines horizontal color top down\n\/\/color\nif(scolor==2){\nstroke('red');\nstrokeWeight(3);\nline(Ax1,Ay1,Ax2,Ay2);\n}if(scolor==1){\nstroke('green');\nstrokeWeight(3);\nline(Ax1,Ay1,Ax2,Ay2);\n}if(scolor==0){\nstroke('blue');\nstrokeWeight(3);\nline(Ax1,Ay1,Ax2,Ay2);\n}if(scolor&gt;2){\n    scolor=0;\n}\n\n\/\/grid creation animation\nAy1+=gap\nAy2+=gap\n\n\/\/lines hit edge of canvas\nif(Ay1&gt;=height){\n    \/\/move across a row\n    Ax1+=gap*2;\n    Ax2+=gap*2;\n    \/\/reset y values\n    Ay1=gap + slant;\n    Ay2=gap;\n\/\/loop lines across screen\n}if(Ax2&gt;width){\n    Ax1=60;\n    Ax2=90;\n    Ay1=30;\n    Ay2=30;\n    scolor +=1\n}\n\n\n\n\/\/refresh page\nif(mouseIsPressed){\n    if(mouseButton == RIGHT){\n    \n    fill(0)\n    rect(0,0,width,height);\n    \/\/orange square\n    Sx1 = 60\n    Sy1 = 60\n    d = 30\n\n    \/\/purple square\n    PSx1 = 240\n    PSy1 = 300\n    Pd = 30\n\n    \/\/yellow square\n    YSx1 = 420\n    YSy1 = 210\n    Yd = 30\n}\n}\n\n\/\/slant\nif(mouseX&gt;width\/2){\n    \/\/slant for vertical\n    x1=x1+gap;\n\n}\nif(mouseY&gt;height\/2){\n    \/\/slant for horizontal\n    Ay1=Ay1+gap;\n\n}\n\n}\n<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>right click to refresh sketch \/\/grid lines vertical var x1 = 30 var y1 = 30 var x2 = 30 var y2 = 60 \/\/grid lines horizontal var Ax1 = 60 var Ay1 = 30 var Ax2 = 90 var Ay2 = 30 \/\/orange square var Sx1 = 60 var Sy1 = 60 var d &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/18\/project-03-4\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project &#8211; 03&#8221;<\/span><\/a><\/p>\n","protected":false},"author":752,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[100,57],"tags":[125,61],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/72336"}],"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\/752"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=72336"}],"version-history":[{"count":1,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/72336\/revisions"}],"predecessor-version":[{"id":72337,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/72336\/revisions\/72337"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=72336"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=72336"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=72336"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}