{"id":72106,"date":"2022-09-17T19:33:20","date_gmt":"2022-09-17T23:33:20","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=72106"},"modified":"2022-09-17T21:07:50","modified_gmt":"2022-09-18T01:07:50","slug":"project-03-dynamic-drawing-7","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/17\/project-03-dynamic-drawing-7\/","title":{"rendered":"Project-03-Dynamic-Drawing"},"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>-The triangles rotate clockwise when mouse moving to the right, and counterclockwise when moving to the left<\/p>\n\n\n\n<p>-The color become lighter when mouse moving to the bottom right, and darker when moving to the top left<\/p>\n\n\n\n<p>-The triangle and change distance as mouse moving left, and it do the opposite when moving right.<\/p>\n\n\n\n<p>&ndash; The smile faces shrink as mouse moves.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<div class=\"wp-block-file\"><a class=\"p5_sketch_link\" data-width=\"600\" data-height=\"450\" id=\"wp-block-file--media-68e2f324-c3e6-4d36-9d56-f8bf1d07393e\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/sketch-288.js\">sketch<\/a><a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/sketch-288.js\" class=\"wp-block-file__button\" download aria-describedby=\"wp-block-file--media-68e2f324-c3e6-4d36-9d56-f8bf1d07393e\">Download<\/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\">\/* Jiayi Chen\n   jiayiche    Section A *\/\nfunction setup() {\n     createCanvas(600, 450);\n     rectMode(CENTER);\n}\n\nfunction draw() {\n    print('mouseX='+ mouseX +'mouseY'+mouseY)\n    \/\/change background\n    backgroundchange();\n\n    \/\/ smile face background\n    for (var a=5;a&lt;600;a=a+35){\n        for (var b=0;b&lt;450;b=b+35){\n        push();\n        translate(a,b);\n        smileface();\n        \/\/change size\n        var mx =constrain(mouseX,0,450)\n        var my =constrain(mouseY,0,300)\n            if(dist(mx,my,a,b)&lt;= 150){ \n                d=30* dist(mx,my,a,b)\/150;\n            }\n        pop();\n        } \n    }\n    \/\/floating triangle and rectangle\n    translate(constrain(mx,0,575),constrain(my,0,425));\n    push();\n    noStroke()\n    cr=mx\/450*255\n    fill(cr,cr,cr,200)\n    rect(0,0,50,50);\n    var ang=mouseX\/600*360\n    \/\/6 triangles\n    push();\n    scale(3*constrain(my,0,450)\/450*3)\n    push();\n    triDist=100*constrain(mx,0,600)\/600\n    rotate(radians(ang));\n    translate(triDist,0);\n    triangle(0, 30, 30, 30, 15, 15);\n    pop();\n    push();\n    rotate(radians(ang+60));\n    translate(triDist,0);\n    triangle(0, 30, 30, 30, 15, 15);\n    pop();\n    push();\n    rotate(radians(ang+120));\n    translate(triDist,0);\n    triangle(0, 30, 30, 30, 15, 15);\n    pop();\n    push();\n    rotate(radians(ang+180));\n    translate(triDist,0);\n    triangle(0, 30, 30, 30, 15, 15);\n    pop();\n    push();\n    rotate(radians(ang+240));\n    translate(triDist,0);\n    triangle(0, 30, 30, 30, 15, 15);\n    pop();\n    push();\n    rotate(radians(ang+300));\n    translate(triDist,0);\n    triangle(0, 30, 30, 30, 15, 15);\n    pop();\n    pop();\n    pop();\n}\n\n\n\nvar x=16\nvar y=16\nvar d=30\n\n\n\n\/\/single simle face\nfunction smileface(){\n    push();\n    fill('yellow')\n    \/\/head\n    ellipse(x,y,d); \n    \/\/mouth\n    arc(x, y+d*1\/7, d\/2, d\/2, 0, PI); \n    \/\/eye\n    fill(0)\n    ellipse(x+d*1\/5,y-d*1\/5,d\/6);\n    ellipse(x-d*1\/5,y-d*1\/5,d\/6);\n    pop();\n}\n\n\n   \/\/change in background\nfunction backgroundchange(){\n    var r = mouseX\/600*255\n    var g = mouseX\/600*255\n    var b = mouseY\/600*255\n    background(r,g,b)\n}\n<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>-The triangles rotate clockwise when mouse moving to the right, and counterclockwise when moving to the left -The color become lighter when mouse moving to the bottom right, and darker when moving to the top left -The triangle and change distance as mouse moving left, and it do the opposite when moving right. &ndash; The &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/17\/project-03-dynamic-drawing-7\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project-03-Dynamic-Drawing&#8221;<\/span><\/a><\/p>\n","protected":false},"author":710,"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\/72106"}],"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\/710"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=72106"}],"version-history":[{"count":3,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/72106\/revisions"}],"predecessor-version":[{"id":72141,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/72106\/revisions\/72141"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=72106"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=72106"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=72106"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}