{"id":72100,"date":"2022-09-17T19:25:09","date_gmt":"2022-09-17T23:25:09","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=72100"},"modified":"2022-09-17T19:29:17","modified_gmt":"2022-09-17T23:29:17","slug":"project-3","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/17\/project-3\/","title":{"rendered":"Project 3"},"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\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/sketch-280.js%22\" 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\">\/\/Paul Li\n\/\/Section A\n\n\n\nvar backR = 10;\nvar backG = 10;\nvar backB = 10;\nvar w = 30;\nvar h = 20;\nvar triR = 30;\nvar triG = 40;\nvar x = 1;\n\n\nfunction setup() {\n    createCanvas(600,450);\n    rectMode(CENTER);\n}\n\nfunction draw() {\n\n    \/\/background & color\n    \/\/background color changes based on mouse\n        backR = max(min(mouseY\/2,255),0);\n        backG = max(min(mouseX\/2.2,255),0);\n        backB = max(min(mouseX,255),0);\n        background(backR,backG,backB,mouseY\/60)\n    \/\/shape & shape movement\n    \/\/ stroke weight and width and height of the ellipse is determined by mouse position\n    \/\/ \n        w = min(mouseY,width - 30);\n        h = min(mouseX,height - 30);\n        strokeWeight(mouseX\/100+mouseY\/100);\n        stroke(backG,backR,backB);\n        fill(backG,backR,backB);\n        ellipse(width\/2,height\/2, w, h);\n\/\/triangles rotate and move according to mouse cordinates in inverse and direct relationships\n        push();\n        rotate(radians(min(mouseX,width)));\n        fill(backB,backR,backB);\n        triangle(\n            constrain(mouseX\/(mouseY\/30),0,width),mouseY,\n            constrain(mouseY\/(mouseX\/30),0,width-50),mouseY,\n            mouseX,mouseY\n            );\n        pop();\n\/\/ chnaging color by mouse position.\n        push();\n        triR = constrain(mouseX,0,width);\n        triG = constrain(mouseY, 0, height);\n        translate(width\/2,height\/2);\n        rotate(radians(min(mouseY,height)));\n        fill(triR,triG,0);\n        triangle(\n            constrain(mouseY\/(mouseX\/10),0,width),mouseY,\n            constrain(mouseX\/(mouseY\/10),0,width-100),mouseY,\n            mouseX,mouseY\n            );\n       \n        pop();\n\n\n\/\/ square in the center & moving squares.\n        fill(0,0,0,60);\n        stroke(backG\/2,backR,backB)\n        square(width\/2,height\/2,height\/min(mouseX\/100,mouseY\/30));\n        push();\n        translate(50,50);\n        rotate(radians(x));\n        x+= 4;\n        fill(255);\n        rect(width\/2,height\/2,constrain(mouseX,0,100),constrain(mouseY,0,50));\n        pop();\n\n        push();\n        translate(width,50);\n        rotate(radians(x));\n        x+=4;\n        fill(255);\n        rect(width\/2,height\/2,constrain(mouseX,0,50),constrain(mouseY,0,20));\n        pop();\n\n        strokeWeight(2);\n        stroke(255-backG\/2,255-backR,255-backB)\n        line(mouseX,mouseY,width\/2,height\/2);\n\n\n\n        \/\/frameRate(400);\n\n\n    \/\/scaling\n\n      \/\/  }\n   \/\/ }\n}\n \n<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>sketch \/\/Paul Li \/\/Section A var backR = 10; var backG = 10; var backB = 10; var w = 30; var h = 20; var triR = 30; var triG = 40; var x = 1; function setup() { createCanvas(600,450); rectMode(CENTER); } function draw() { \/\/background &#038; color \/\/background color changes based on mouse &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/17\/project-3\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 3&#8221;<\/span><\/a><\/p>\n","protected":false},"author":738,"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\/72100"}],"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\/738"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=72100"}],"version-history":[{"count":4,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/72100\/revisions"}],"predecessor-version":[{"id":72109,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/72100\/revisions\/72109"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=72100"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=72100"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=72100"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}