{"id":68299,"date":"2021-10-30T20:48:10","date_gmt":"2021-10-31T00:48:10","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=68299"},"modified":"2021-10-30T20:48:10","modified_gmt":"2021-10-31T00:48:10","slug":"project-9-portrait","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/30\/project-9-portrait\/","title":{"rendered":"Project 9: 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 class=\"wp-block-file\"><a class=\"p5_sketch_link\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/wpf-portraits.js\" data-width=\"480\" data-height=\"480\">wpf-portraits.js<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/plugins\/p5-embedder\/p5_iframe.html\" class=\"p5_exampleFrame\" width=\"480\" height=\"480\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/Patrick Fisher, Section B, wpf@andrew.cmu.edu Assignment -09-project\nlet img;\nlet drawState = 0; \/\/variable to change the type of drawing that is happeing\nlet x2 = 5; \/\/startin x variable for the bouncing drawing\nlet y2 = 5; \/\/startin y variable for the bouncing drawing\nlet r2 = 5; \/\/startin radius variable for the bouncing drawing\nlet dx2; \/\/delta for x for bouncing drawing\nlet dy2; \/\/delta for y for bouncing drawing\nvar ly1; \/\/first end of the line for the line drawing\nvar ly2; \/\/second end of the line for line drawing\nvar lx; \/\/mid x point of the line for line drawing\n\nfunction preload() {\n    img = loadImage('https:\/\/i.imgur.com\/HFzVcQF.jpeg');\n}\n\nfunction setup() {\n    createCanvas(480, 480);\n    img.resize(480,480); \/\/fits image to canvas\n    imageMode(CENTER);\n    noStroke();\n    background(255);\n    img.loadPixels();\n    dx2 = floor(random(1,10)); \/\/sets delta x\n    dy2 = floor(random(1,10)); \/\/sets delta y\n    while(dy2 == dx2){ \/\/makes sure the deltas are not the same\n        dy2 = floor(random(1,10));\n    }\n    ly1 = random(0,height); \/\/sets the random line locations\n    ly2 = random(0,height);\n    lx = random(50,width-50); \n}\nfunction draw() {\n    if(drawState == 0){ \/\/line drawings\n        push();\n        strokeWeight(4);\n        let pix = img.get(lx,(ly1+ly2)\/2);\n        stroke(pix,128);\n        line(lx-50,ly1,lx+50,ly2);\n        ly1 = random(0,height);\n        ly2 = random(0,height);\n        lx = random(50,width-50);\n        pop();\n    }\n    if(drawState == 1){ \/\/bouncing drawing\n        let pix = img.get(x2,y2);\n        fill(pix,128);\n        circle(x2,y2,2*r2);\n        x2 += dx2;\n        y2 += dy2;\n\n        if(x2 &gt;= width){\n            dx2 = -dx2;\n        }\n        if(y2 &gt;= height){\n            dy2 = -dy2;\n        }\n\n        if(x2 &lt;= 0){\n            dx2 = -dx2;\n        }\n        if(y2 &lt;= 0){\n            dy2 = -dy2;\n        }\n\n    }\n    if(drawState == 2){ \/\/  square loop drawing\n        var xy3 = mouseX\/10;\n        var rcnum = height\/(xy3+1); \/\/variable for the width of the square based on how many squares there are\n        background(255);\n        for(var col = 0; col &lt;=xy3; col++){\n            for(var row = 0; row &lt;= xy3; row++){\n                let pix = img.get((row*(rcnum))+(rcnum)\/2,(col*(rcnum))+(rcnum)\/2);\n                fill(pix,128);\n                square(row*(rcnum),col*(rcnum),(rcnum));\n            }\n        }\n    }\n\n}\n\nfunction mousePressed (){ \/\/changes the drawing with a press of the mouse\n    if(drawState == 0) {\n        background(255);\n        drawState = 1;\n    }\n    else if(drawState == 1){\n        background(255);\n        drawState = 2;\n    }\n    else if(drawState == 2){\n        background(255);\n        drawState = 0;\n    }\n}<\/code><\/pre><\/div>\n\n\n\n<p>This project was a lot of fun. I had fun coming up with different ideas of how the photo could be revealed and while not simple, the coding process was rewardingly not strenous. I did have a lot of difficulty with imgur and p5.js trusting my image at first, including a few people commenting mean things, which was annoying.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"976\" height=\"972\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-30-at-4.58.09-PM.png\" alt=\"\" class=\"wp-image-68301\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-30-at-4.58.09-PM.png 976w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-30-at-4.58.09-PM-300x300.png 300w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-30-at-4.58.09-PM-150x150.png 150w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-30-at-4.58.09-PM-768x765.png 768w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\"><\/figure><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"974\" height=\"966\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-30-at-4.58.57-PM.png\" alt=\"\" class=\"wp-image-68302\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-30-at-4.58.57-PM.png 974w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-30-at-4.58.57-PM-300x298.png 300w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-30-at-4.58.57-PM-150x150.png 150w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-30-at-4.58.57-PM-768x762.png 768w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\"><\/figure><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"968\" height=\"958\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-30-at-5.34.00-PM.png\" alt=\"\" class=\"wp-image-68303\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-30-at-5.34.00-PM.png 968w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-30-at-5.34.00-PM-300x297.png 300w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-30-at-5.34.00-PM-768x760.png 768w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\"><\/figure><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"972\" height=\"960\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-30-at-5.39.08-PM.png\" alt=\"\" class=\"wp-image-68304\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-30-at-5.39.08-PM.png 972w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-30-at-5.39.08-PM-300x296.png 300w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-30-at-5.39.08-PM-768x759.png 768w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\"><\/figure><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"976\" height=\"960\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-30-at-6.38.41-PM.png\" alt=\"\" class=\"wp-image-68305\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-30-at-6.38.41-PM.png 976w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-30-at-6.38.41-PM-300x295.png 300w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-30-at-6.38.41-PM-768x755.png 768w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\"><\/figure><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"978\" height=\"984\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-30-at-6.38.51-PM.png\" alt=\"\" class=\"wp-image-68306\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-30-at-6.38.51-PM.png 978w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-30-at-6.38.51-PM-298x300.png 298w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-30-at-6.38.51-PM-150x150.png 150w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-30-at-6.38.51-PM-768x773.png 768w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\"><\/figure><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>wpf-portraits.js \/\/Patrick Fisher, Section B, wpf@andrew.cmu.edu Assignment -09-project let img; let drawState = 0; \/\/variable to change the type of drawing that is happeing let x2 = 5; \/\/startin x variable for the bouncing drawing let y2 = 5; \/\/startin y variable for the bouncing drawing let r2 = 5; \/\/startin radius variable for the &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/30\/project-9-portrait\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 9: Portrait&#8221;<\/span><\/a><\/p>\n","protected":false},"author":648,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[111,56],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68299"}],"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\/648"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=68299"}],"version-history":[{"count":1,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68299\/revisions"}],"predecessor-version":[{"id":68307,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68299\/revisions\/68307"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=68299"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=68299"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=68299"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}