{"id":65906,"date":"2021-09-17T15:53:20","date_gmt":"2021-09-17T19:53:20","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=65906"},"modified":"2021-09-17T15:53:20","modified_gmt":"2021-09-17T19:53:20","slug":"lmattson-project-03","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/09\/17\/lmattson-project-03\/","title":{"rendered":"lmattson-project-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><div><a class=\"p5_sketch_link\" data-width=\"600\" data-height=\"450\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/lmattson-03-project-1.js\">lmattson-03-project<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/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\">\/\/Luke Mattson\n\/\/section A\n\n\nfunction setup() {\n    createCanvas(600, 450);\n    background(120)\n}\n\nfunction draw() {\n\/\/ draw a face in the background\n    background(173,216,230)\n    fill(167,199,231);\n    strokeWeight(1);\n    stroke(140,170,220);\n    triangle(0,0,600,600,0,600);\n    stroke(0);                  \n    fill(223,180,130);      \n    ellipse(300,250,230,320);\n    fill(250,231,218);          \n    ellipse(412,276,30,60);\n    ellipse(188,276,30,60);\n    fill(250,231,218);          \n    ellipse(300,300,230,320);\n    fill(245,245,245);         \n    stroke(0);\n    strokeWeight(2);\n    circle(265,245,40,40);\n    circle(335,245,40,40);\n    fill(0,0,200,30);\n    circle(270,250,18,18);\n    circle(330,250,18,18);\n    line(300,260,310,300);      \n    line(310, 300,290, 295);\n    fill(255,160,160);          \n    ellipse(300,350,25,35);\n    line(310,230,350,215);      \n    line(290,230,250,215);\n    stroke(255,160,160,40);      \n    fill(255,160,160,40);\n    ellipse(240,325,30,50);\n    ellipse(360,325,30,50);\n    noFill();                    \n    strokeWeight(2);\n    stroke(0);\n    arc(300,425,70,40, 2*PI+1\/8*PI, PI-1\/8*PI);\n    stroke(255,255,255);        \n    line(300,500, 300, 460);\n    line(300,500, 310, 510);\n    line(300,500,290,510);\n    line(300,480,310,470);\n    line(300,480,290,470);\n\n\/\/ the text \"Hi\" comes onto the canvas when the mouse is on the right side\n     text(\"Hi\", 1175 - mouseX, mouseY)\n\n\/\/use for loops to draw the hexagons\n    var hexX = 20\n    var hexY = 30\n    for (let hexX = 0; hexX &lt;= 600; hexX += 20){\t\t\t\t\t\t\t\t\t\n        for(let hexY = -10; hexY &lt;= 500; hexY+= 20){\n\n            \/\/ variables to determine each hexagon's color\n            var hexR = (dist(hexX, hexY, mouseX, mouseY)\/150)*100\n            var hexG = (dist(hexX, hexY, mouseX, mouseY)\/150)*20\n            var hexB = (dist(hexX, hexY, mouseX, mouseY)\/150)*120\n\n            \/\/ variable to determine each hexagon's size\n            var size = constrain((dist(hexX, hexY, mouseX, mouseY)\/150),.3,1.5)\n\n            \/\/ drawing a hexagon\n            fill(hexR,hexG,hexB)\n            beginShape()\n            vertex(hexX,hexY)\n            vertex(hexX-size*10,hexY-size*5)\n            vertex(hexX-size*10,hexY-size*15)\n            vertex(hexX,hexY-size*20)\n            vertex(hexX+size*10,hexY-size*15)\n            vertex(hexX+size*10,hexY-size*5)\n            endShape(CLOSE)\n        }\n    }\n\n\/\/ angular movement of the circles\n    push()\n    translate(300,225);\n\n    \/\/ positioning and opacity variables\n    var circleX = 100;\n    var circleY = 100;\n    var circleOpacity = mouseX\/2\n\n    fill(0,0,0,circleOpacity)\n\n    \/\/ rotating the origin based on mouseX positioning\n    var rotationrr = radians(mouseX);\n    rotate(rotationrr);\n\n    \/\/drawing each circle\n    ellipse(circleX,circleY,20);\n    ellipse(circleX+50,circleY+50,20)\n    ellipse(circleX+100,circleY+100,20)\n    ellipse(circleX+150,circleY+150,20)\n    ellipse(circleX-50,circleY-50,20)\n    ellipse(circleX-100,circleY-100,20)\n    ellipse(circleX-150,circleY-150,20)\n    ellipse(circleX-200,circleY-200,20)\n    ellipse(circleX-250,circleY-250,20)\n    ellipse(circleX-300,circleY-300,20)\n    ellipse(circleX-350,circleY-350,20)\n    \n    \/\/ returning the origin to the default\n    pop()\n\n    \n   \n}<\/code><\/pre><\/div>\n\n\n\n<p>Wherever the mouse is, the hexagons get smaller, colors change, and circles rotate. put your mouse as far right on the canvas as you can for a surprise!<\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>Wherever the mouse is, the hexagons get smaller, colors change, and circles rotate. put your mouse as far right on the canvas as you can for a surprise!<\/p>\n","protected":false},"author":659,"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\/f2021\/wp-json\/wp\/v2\/posts\/65906"}],"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\/659"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=65906"}],"version-history":[{"count":2,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/65906\/revisions"}],"predecessor-version":[{"id":65910,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/65906\/revisions\/65910"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=65906"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=65906"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=65906"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}