This is my project 03<\/p>\n
<\/p><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">function setup() {\n createCanvas(600, 450);\n background(220);\n text(\"p5.js vers 0.9.0 test.\", 10, 15);\n}\n\/\/cloud left variables\nvar x1 = 70\nvar y1 = 60;\nvar cwidth = 60;\nvar cheight = 40;\n\/\/cloud right variables\nvar x2 = 400;\nvar y2 = 60;\n\/\/star left variables\nvar sx1 = 70;\nvar sy1 = 130;\nvar sw1 = 3;\nvar sh1 = 12;\n\/\/star right variables\nvar sx2 = 400;\nvar sy2 = 130;\nvar sw2 = 12\nvar sh2 = 21\n\/\/color for cloud\nvar rc = 183;\nvar gc = 186;\nvar bc = 202;\nvar angle = 0\n\/\/color for rain\nvar rr = 57;\nvar rg = 85;\nvar rb = 96;\n\/\/flower \nvar anglef = 0\nvar diam = 45\nvar rf = 199\nvar gf = 101\nvar bf = 93\n\nfunction draw() {\n background(255)\n \/\/ground\n noStroke();\n push();\n angle = mouseX*0.15 \/\/background rotation\n mouseX = max(min(mouseX,600),0);\n rotate(radians(angle))\n fill(237,186,185);\n rect(0,400,800,50);\n fill(246,219,219);\n rect(0,350,800,50);\n fill(214,211,203);\n rect(0,300,800,50);\n fill(214,207,141);\n rect(0,250,800,50);\n fill(242,126,113);\n rect(0,200,800,50);\n fill(237,186,185);\n rect(0,150,800,50);\n fill(246,219,219);\n rect(0,100,800,50);\n fill(214,211,203);\n rect(0,50,800,50);\n fill(214,207,141);\n rect(0,0,800,50);\n pop();\n\n \/\/cloud left\n fill(rc,gc,bc);\n ellipse(x1,y1,cwidth,cheight);\n ellipse(x1+30,y1-10,cwidth,cheight);\n ellipse(x1+60,y1,cwidth,cheight);\n ellipse(x1,y1+20,cwidth,cheight);\n ellipse(x1+30,y1+25,cwidth,cheight);\n ellipse(x1+60,y1+20,cwidth,cheight);\n ellipse(x1+30,y1+10,cwidth,cheight);\n ellipse(x1-20,y1+10,cwidth\/1.5,cheight\/1.5);\n ellipse(x1+80,y1+10,cwidth\/1.5,cheight\/1.5);\n cwidth = 60 + mouseX*0.03 \/\/ size change due to the mouseX position\n cheight = 40 + mouseX*0.03\n x1 = mouseX \/\/ position change according to the mouseX\n bc = 202- mouseX*0.1 \/\/ color change of cloud according to the mouseX\n\n \/\/cloud right\n fill(rc,gc,bc);\n ellipse(x2,y2,cwidth,cheight);\n ellipse(x2+30,y2,cwidth,cheight);\n ellipse(x2+60,y2,cwidth,cheight);\n ellipse(x2,y1+20,cwidth,cheight);\n ellipse(x2+30,y2+25,cwidth,cheight);\n ellipse(x2+60,y2+20,cwidth,cheight);\n ellipse(x2+30,y2+10,cwidth,cheight);\n ellipse(x2-20,y2+10,cwidth\/1.5,cheight\/1.5);\n ellipse(x2+80,y2+10,cwidth\/1.5,cheight\/1.5);\n x2 = 600- mouseX \/\/ position change according to the mouseX\n rc = 183- mouseX*0.1+20 \/\/ color change of cloud according to the mouseX\n \n \n \/\/rain left\n fill(rr,rg,rb);\n ellipse(sx1,sy1,sw1,sh1);\n ellipse(sx1-25,sy1-12,sw1,sh1);\n ellipse(sx1+20,sy1+10,sw1,sh1);\n ellipse(sx1-15,sy1+20,sw1,sh1);\n ellipse(sx1+40,sy1+40,sw1,sh1);\n ellipse(sx1+10,sy1+40,sw1,sh1);\n ellipse(sx1+10,sy1+40,sw1,sh1);\n ellipse(sx1+50,sy1+10,sw1,sh1);\n ellipse(sx1+75,sy1+20,sw1,sh1);\n ellipse(sx1+70,sy1-13,sw1,sh1);\n ellipse(sx1+35,sy1+80,sw1,sh1);\n ellipse(sx1+45,sy1+120,sw1,sh1);\n ellipse(sx1+20,sy1+110,sw1,sh1);\n ellipse(sx1,sy1+80,sw1,sh1);\n ellipse(sx1+50,sy1+60,sw1,sh1);\n ellipse(sx1-10,sy1+50,sw1,sh1);\n sx1 = mouseX; \/\/ position change according to the mouseX\n sw1 = 3+mouseX*0.013 \/\/ size change due to the mouseX position\n sh1 = 12+mouseX*0.013\n rg = 85-mouseX*0.2 \/\/ color change of rain according to the mouseX\n rr = 57- mouseX*0.1+20 \/\/ color change of rain according to the mouseX\n\n \/\/rain right\n fill(rr,rg,rb);\n ellipse(sx2,sy2,sw2,sh2);\n ellipse(sx2-30,sy2-12,sw2,sh2);\n ellipse(sx2+20,sy2+10,sw2,sh2);\n ellipse(sx2-15,sy2+20,sw2,sh2);\n ellipse(sx2+40,sy2+40,sw2,sh2);\n ellipse(sx2+10,sy2+40,sw2,sh2);\n ellipse(sx2+10,sy2+40,sw2,sh2);\n ellipse(sx2+50,sy2+10,sw2,sh2);\n ellipse(sx2+85,sy2+20,sw2,sh2);\n ellipse(sx2+70,sy2-13,sw2,sh2);\n ellipse(sx2+35,sy2+80,sw2,sh2);\n ellipse(sx2+30,sy2+140,sw2,sh2);\n ellipse(sx2+20,sy2+110,sw2,sh2);\n ellipse(sx2,sy2+80,sw2,sh2);\n ellipse(sx2+50,sy2+60,sw2,sh2);\n ellipse(sx2-10,sy2+50,sw2,sh2);\n sx2 = 600- mouseX \/\/ position change according to the mouseX\n sw2 = 12-mouseX*0.013 \/\/ size change due to the mouseX position\n sh2 = 21-mouseX*0.013\n rb = 96+mouseX*0.05 \/\/ color change of rain according to the mouseX\n\n \/\/flower center\n if(mouseX>width\/2){\n fill(110,109,28);\n rect(width\/2-5,height\/2+28,10,height\/2);\n rect(width\/4-5,height\/4*3+28,10,height\/2);\n rect(width\/4*3-5,height\/4*3+28,10,height\/2);\n push();\n translate(width\/2,height\/2)\n rotate(radians(anglef)); \/\/flower rotate by it self \n fill(rf,gf,bf);\n circle(-15,-25,diam)\n circle(15,-25,diam)\n circle(-15,25,diam)\n circle(15,25,diam);\n circle(28,0,diam)\n circle(-28,0,diam)\n fill(231,183,diam);\n circle(0,0,diam);\n pop();\n bf = 93+mouseX*0.05\n\n diam = 45+mouseX\/20\n anglef += 3\n \/\/flower left\n push();\n translate(width\/4,height\/4*3)\n rotate(radians(anglef)); \/\/flower rotate by it self \n fill(249,213,216);\n circle(-15,-25,diam\/2);\n circle(15,-25,diam\/2);\n circle(-15,25,diam\/2);\n circle(15,25,diam\/2);\n circle(28,0,diam\/2);\n circle(-28,0,diam\/2);\n fill(189,135,136);\n circle(0,0,diam\/2);\n pop();\n \/\/flower right\n push();\n translate(width\/4*3,height\/4*3)\n rotate(radians(anglef)); \/\/flower rotate by it self \n fill(195,231,254);\n circle(-15,-25,diam\/2);\n circle(15,-25,diam\/2);\n circle(-15,25,diam\/2);\n circle(15,25,diam\/2);\n circle(28,0,diam\/2);\n circle(-28,0,diam\/2);\n fill(238,218,92);\n circle(0,0,diam\/2);\n pop();\n \/\/sun\n fill(245,177,86);\n ellipse(width\/2,height\/6,diam*1.1);\n\n\n }\n\n\n\n}\n<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>This is my project 03 sketch function setup() { createCanvas(600, 450); background(220); text(“p5.js vers 0.9.0 test.”, 10, 15); } \/\/cloud left variables var x1 = 70 var y1 = 60; var cwidth = 60; var cheight = 40; \/\/cloud right variables var x2 = 400; var y2 = 60; \/\/star left variables var sx1 = … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/19\/project-03-6\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “Project 03”<\/span><\/a><\/p>\n","protected":false},"author":778,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[100,57],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/72432"}],"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\/778"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=72432"}],"version-history":[{"count":1,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/72432\/revisions"}],"predecessor-version":[{"id":72433,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/72432\/revisions\/72433"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=72432"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=72432"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=72432"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}