{"id":69824,"date":"2022-09-06T12:17:09","date_gmt":"2022-09-06T16:17:09","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=69824"},"modified":"2022-09-18T04:32:15","modified_gmt":"2022-09-18T08:32:15","slug":"project-1-my-self-portrait-2","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/06\/project-1-my-self-portrait-2\/","title":{"rendered":"Project 1- My Self Portrait"},"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=\"600\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/sketch-29.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=\"600\" height=\"600\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">function setup() {\n    createCanvas(600, 600);\n    background(120);\n    \/\/text(\"p5.js vers 0.9.0 test.\", 10, 15);\n}\n\nfunction draw() {\n    background(120);\n    strokeCap(ROUND);\n    scale(0.93);\n\n    \/\/DYNAMIC BACKGROUND\n    noFill();\n    noStroke();\n    var c = width\/2;\n    var alt = true;\n\n    if (mouseX &gt;= c){\n        alt = true;\n        fill(244, 162, 97);             \/\/ orange\n        triangle(0,0, c, c, 100, -50); \n\n        fill(38, 70, 83);               \/\/ dark blue\n        triangle(400, -50, c,c, 600, -50);\n        \n        fill(42, 157, 143);             \/\/teal\n        triangle(-200, 300, c, c, -300, 400);\n        triangle(650, 20, c,c, 650, 50);\n\n        fill(233, 196, 106);            \/\/ yellow\n        triangle(-400, 400, c, c, -600, 650);\n        triangle(650, 200, c, c, 650, 340);\n\n        fill(231, 111, 81);             \/\/ red\n        triangle(100, 650, c, c, 350, 650);\n        triangle(300, -50, c, c, 380, -50);\n\n        fill(96, 108, 56);              \/\/ green\n        triangle(650, 400, c, c, 650, 500);\n\n    } else {\n        alt = false;\n        fill(40, 54, 24);             \/\/ dark green\n        triangle(0,30, c, c, 0, 250); \n\n        fill(254, 250, 224);             \/\/ cream\n        triangle(400, -50, c,c, 600, -50);\n        \n        fill(221, 161, 94);             \/\/tan\n        triangle(-200, 300, c, c, -300, 400);\n        triangle(600, 0, c,c, 650, 0);\n\n        fill(43, 45, 66);            \/\/ dark purple\n        triangle(-400, 500, c, c, 0, 580);\n        triangle(650, 200, c, c, 650, 340);\n\n        fill(131, 197, 190);             \/\/ light blue\n        triangle(0, 650, c, c, 80, 650);\n        triangle(100, 0, c, c, 210, 0);\n\n        fill(255, 221, 210);              \/\/ salmon\n        triangle(650, 500, c, c, 650, 650);\n    }\n\n    \/\/FACE \n    noStroke();\n    fill(255, 255, 255);\n\n    beginShape();\n    vertex(147, 240);\n    vertex(147, 290);\n    vertex(153, 295);\n\n    vertex(300, 300);\n    vertex(195, 434);\n    vertex(203, 460);\n    vertex(208, 490);\n    vertex(209, 510);\n    vertex(208, 530);\n    vertex(201, 570);\n    vertex(181, 645);\n    vertex(518, 645);\n    vertex(645, 645);\n    vertex(645, 540);\n    vertex(550, 538);\n    vertex(550, 497);\n    vertex(500, 250);\n    endShape();\n\n    stroke(10);\n    \n    bezier(280, 519, 210, 500, 90, 310, 228, 163);\n    bezier(228, 163, 287, 95, 390, 117, 422, 147);\n    bezier(422, 147, 600, 320, 370, 540, 280, 519);\n    noStroke();\n    triangle(280, 519, 228, 163, 422, 147);\n\n    \/\/NOSE\n    stroke(7);\n    noFill();\n    bezier(261, 339, 236, 321, 260, 315, 269, 295);\n    bezier(269, 295, 275, 254, 278, 228, 267, 212);\n    bezier(321, 338, 334, 320, 309, 310, 297, 282);\n    bezier(324, 324, 312, 305, 289, 304, 297, 282);\n\n    \/\/MOUTH\n    bezier(238, 396, 253, 369, 309, 374, 351, 400);\n    bezier(238, 396, 260, 474, 331, 433, 351, 400);\n\n    \/\/HAIR\n    stroke(10);\n    fill(255);\n    curve(-500, 1000, 291, 83, 550, 538, -200, 1003);\n    curve(600, 600, 291, 83, 147, 290, 620, 250);\n    \/\/curve(1000,-700, 550, 497, 490, 645, 0, 0);\n    bezier(291, 123, 460, 90, 380, 320, 500, 350);\n    noFill();\n    bezier(195, 434, 220, 500, 210, 550, 180, 645);\n    curve(305, 105, 291, 123, 165, 297, 800, 193);\n    \n    noStroke();\n\n    fill(255, 255, 255);\n    triangle(291, 83, 220, 180, 291, 123);\n    triangle(291, 83, 350, 115, 291, 122);\n\n    \/\/NECK\n    stroke(7);\n    bezier(255, 507, 290, 550, 260, 620, 247, 645);\n    noFill();\n    bezier(425, 442, 460, 530, 460, 540, 645, 540);\n    \n    \/\/EYES\n    fill(237, 189, 64, 200);\n    noStroke();\n    ellipseMode(CENTER);\n    circle(353, 246, 23);\n    ellipse(222, 251, 18, 20);\n\n    stroke(8);\n    noFill();\n    bezier(331, 257, 347, 220, 391, 230, 409,  249);\n    bezier(257, 256, 231, 228, 210, 241, 206, 261);\n\n\n    \/\/TEXT\n    var s = 'Ceci n\\'est pas un autoportrait.';\n    var f = 'Is this a self portrait?'\n    fill(0);\n    if (alt){\n        textSize(30);\n        text(s, 150, 50);\n    } else {\n        textSize(20);\n        fill(255);\n        noStroke();\n        text(f, 50, 50, 70);\n    }\n\n}\n<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>sketch function setup() { createCanvas(600, 600); background(120); \/\/text(&#8220;p5.js vers 0.9.0 test.&#8221;, 10, 15); } function draw() { background(120); strokeCap(ROUND); scale(0.93); \/\/DYNAMIC BACKGROUND noFill(); noStroke(); var c = width\/2; var alt = true; if (mouseX &gt;= c){ alt = true; fill(244, 162, 97); \/\/ orange triangle(0,0, c, c, 100, -50); fill(38, 70, 83); \/\/ dark blue &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/06\/project-1-my-self-portrait-2\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 1- My Self Portrait&#8221;<\/span><\/a><\/p>\n","protected":false},"author":708,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[10,121],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/69824"}],"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\/708"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=69824"}],"version-history":[{"count":12,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/69824\/revisions"}],"predecessor-version":[{"id":72258,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/69824\/revisions\/72258"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=69824"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=69824"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=69824"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}