{"id":72370,"date":"2022-09-18T23:02:14","date_gmt":"2022-09-19T03:02:14","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=72370"},"modified":"2022-09-18T23:47:10","modified_gmt":"2022-09-19T03:47:10","slug":"project-03-dynamic-drawing-12","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/18\/project-03-dynamic-drawing-12\/","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><div class=\"wp-block-file\"><a class=\"p5_sketch_link\" data-width=\"450\" data-height=\"600\" id=\"wp-block-file--media-2faee118-8176-406e-a249-464246dae5da\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/sketch-310.js\">sketch<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/plugins\/p5-embedder\/p5_iframe.html\" class=\"p5_exampleFrame\" width=\"450\" height=\"600\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/Alicia Kim\n\/\/Section B\n\nvar r = 80;\nvar angle = 0;\n\nfunction setup() {\n    createCanvas(450, 600);\n    background(220);\n}\n\nfunction draw() {\n    noStroke ();\n    \/\/limiting y from 0 to 600\n    var y = max(min(mouseY, 600), 0);  \n    \/\/ as y increases background gets lighter\n    background (255*y\/650); \n\n\n\/\/top ellipse\n    fill (255,232,124); \/\/ star yellow\n    ellipse (width\/2,37.5,25,25);\n\n\/\/trunk\n    fill (58.8,29.4,0); \/\/ brown\n    rect(width\/2-17.5,65,35,450);\n\n\/\/leaves\n\/\/ as y increases, size of the leaves increases & y position changes \n    push();\n    \/\/ higher the y, leaves get darker \n    fill (157-120*y\/650,205-140*y\/650,143-120*y\/650); \/\/frog\n    triangle(width\/2, 50, width\/3, 120, 2\/3*width,120);\n\n    translate (-45*y\/650,-25*y\/650);\n    scale (1+0.2*y\/650);\n    triangle(width\/2, 50+65*y\/650, width\/3-8*1\/3*y\/650, \n        120+55*y\/650, 2\/3*width+8*1\/3*y\/650, 120+55*y\/650);\n\n    translate (-45*y\/650,-25*y\/650);\n    scale (1+0.2*y\/650);\n    triangle(width\/2, 50+95*y\/650, width\/3-12.121212*y\/650, 120+100*y\/650,\n     width*2\/3+12.121212*y\/650, 120+105*y\/650);\n\n    translate (-45*y\/650,-25*y\/650);\n    scale (1+0.2*y\/650);\n    triangle(width\/2, 50+140*y\/650, width\/3-15.68627*y\/650, 120+150*y\/650,\n     width*2\/3+15.68627*y\/650, 120+150*y\/650);\n   \n\n    translate (-45*y\/650,-25*y\/650);\n    scale (1+0.2*y\/650);\n    triangle(width\/2, 50+175*y\/650, width\/3-18.05956*y\/650, 120+185*y\/650,\n     width*2\/3+18.05956*y\/650, 120+185*y\/650);\n    pop();\n\n\/\/ornaments \n\/\/ higher the y, more ornaments appear\n\n    if (y&gt;125){\n        fill (251,209,225); \/\/ ornaments pink\n        ellipse (width\/2-10,88,25,25);\n\n    }\n    if (y&gt;165){\n        fill (255,232,124); \/\/ ornaments yellow\n        ellipse (width\/2+27,138,25,25);\n    }\n\n    if (y&gt;210){\n        fill (255,218,173); \/\/ ornaments orange\n        ellipse (width\/2,200,25,25);\n    }\n    if (y&gt;270){\n        fill (250,128,114); \/\/ ornaments salmon\n        ellipse (width\/3,220,25,25);\n    }\n    if (y&gt;330){\n        fill (255,232,124); \/\/ ornaments yellow\n        ellipse (width\/2-8,300,25,25);\n    }\n    if (y&gt;390){\n        fill (255,218,173); \/\/ ornaments orange\n        ellipse (width-width\/3,280,25,25);\n    }\n\n    if (y&gt;440){\n        fill (255,232,124); \/\/ ornaments yellow\n        ellipse (width\/3,360,25,25);\n\n    }\n\n    if (y&gt;495){\n        fill (251,209,225); \/\/ ornaments pink\n        ellipse (width\/2+14,400,25,25);\n    }\n\n    if(y&gt;550){\n        fill (250,128,114); \/\/ ornaments salmon\n        ellipse (width-width\/4,420,25,25);\n\n        fill (255,218,173); \/\/ ornaments orange\n        ellipse (width\/4,450,25,25);\n    }\n    \n}\n\n\n\n\n\n\n\n\n<\/code><\/pre><\/div>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"800\" height=\"1024\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/IMG_1081-2-800x1024.jpg\" alt=\"\" class=\"wp-image-72392\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/IMG_1081-2-800x1024.jpg 800w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/IMG_1081-2-234x300.jpg 234w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/IMG_1081-2-768x983.jpg 768w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/IMG_1081-2.jpg 980w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\"><figcaption>Ideation<\/figcaption><\/figure><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>sketch \/\/Alicia Kim \/\/Section B var r = 80; var angle = 0; function setup() { createCanvas(450, 600); background(220); } function draw() { noStroke (); \/\/limiting y from 0 to 600 var y = max(min(mouseY, 600), 0); \/\/ as y increases background gets lighter background (255*y\/650); \/\/top ellipse fill (255,232,124); \/\/ star yellow ellipse (width\/2,37.5,25,25); &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/18\/project-03-dynamic-drawing-12\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project-03: Dynamic Drawing&#8221;<\/span><\/a><\/p>\n","protected":false},"author":726,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[100,56,1],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/72370"}],"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\/726"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=72370"}],"version-history":[{"count":6,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/72370\/revisions"}],"predecessor-version":[{"id":72393,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/72370\/revisions\/72393"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=72370"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=72370"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=72370"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}