{"id":68487,"date":"2021-10-31T23:14:22","date_gmt":"2021-11-01T03:14:22","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=68487"},"modified":"2021-10-31T23:14:59","modified_gmt":"2021-11-01T03:14:59","slug":"project-09-computational-portrait-custom-pixel-3","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/31\/project-09-computational-portrait-custom-pixel-3\/","title":{"rendered":"Project-09: Computational Portrait (Custom Pixel)"},"content":{"rendered":"\n

My Project<\/a><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/Chuong Truong;\n\/\/Section B;\n\n\/\/global variable that holds a picture of my face;\nvar myFace;\n\n\/\/the preload function loads in my face from imgur;\nfunction preload(){\n myFace = loadImage(\"https:\/\/i.imgur.com\/Dd41LFT.jpg\");\n}\n\nfunction setup() {\n createCanvas(480, 480);\n background(220);\n text(\"p5.js vers 0.9.0 test.\", 10, 15);\n rectMode(CENTER);\n}\n\nfunction draw() {\n \/\/makes the background from pixels of the upper left part of my picture;\n for (var i = 0; i < 240; i+= 10){\n for (var j = 0; j < 240; j+= 10){\n var sectionPiece = myFace.get(i, j, 20, 20);\n image(sectionPiece, i*2, j*2, 20, 20);\n }\n }\n\n \/\/lines that connect to make a grid;\n noFill();\n strokeWeight(2);\n ellipse(240, 240, 360, 360);\n stroke(random(256), random(256), random(256));\n line(0, 240, 480, 240);\n line(240, 0, 240, 480);\n for (var m = 60; m < 400; m += 20){\n stroke(random(256), random(256), random(256));\n line(m, 120, m, 360);\n }\n for (var o = 60; o < 480; o += 30){\n stroke(random(256), random(256), random(256));\n line(60, o, 420, o);\n }\n \/\/random outlines of rectangles and circles;\n for (var h = 0; h < 100; h ++){\n stroke(random(256), random(256), random(256));\n rect(random(20, 460), random(20, 460), 20, 20);\n ellipse(random(20, 460), random(20, 460), random(5, 25), random(5, 25));\n }\n \/\/creates the left to right diaganol sections of my picture;\n for (var l = 0; l < 1680; l += 240) {\n push();\n scale(0.25);\n var sectionPiece2 = myFace.get(l, l, 240, 240);\n image(sectionPiece2, l, l, 240, 240);\n pop();\n }\n \/\/creates the right to left diaganol sections of my picture;\n for (var n = 1680; n > 0; n -= 240){\n push();\n scale(0.25);\n var sectionPiece3 = myFace.get(0 + n, 1680 - n, 240, 240);\n image(sectionPiece3, 0 + n, 1680 - n, 240, 240);\n pop();\n }\n noLoop();\n}\n<\/code><\/pre><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>For this project, I went with something simple (and hopefully acceptable). I am not that creative.<\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>My Project \/\/Chuong Truong; \/\/Section B; \/\/global variable that holds a picture of my face; var myFace; \/\/the preload function loads in my face from imgur; function preload(){ myFace = loadImage(“https:\/\/i.imgur.com\/Dd41LFT.jpg”); } function setup() { createCanvas(480, 480); background(220); text(“p5.js vers 0.9.0 test.”, 10, 15); rectMode(CENTER); } function draw() { \/\/makes the background from pixels of … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/31\/project-09-computational-portrait-custom-pixel-3\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “Project-09: Computational Portrait (Custom Pixel)”<\/span><\/a><\/p>\n","protected":false},"author":675,"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\/68487"}],"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\/675"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=68487"}],"version-history":[{"count":2,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68487\/revisions"}],"predecessor-version":[{"id":68490,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68487\/revisions\/68490"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=68487"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=68487"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=68487"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}