{"id":68500,"date":"2021-11-01T00:42:34","date_gmt":"2021-11-01T04:42:34","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=68500"},"modified":"2021-11-01T00:42:59","modified_gmt":"2021-11-01T04:42:59","slug":"project-computational-portrait-custom-pixel","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/11\/01\/project-computational-portrait-custom-pixel\/","title":{"rendered":"Project: Computational Portrait (Custom Pixel)"},"content":{"rendered":"\n

project pixel sketch luca<\/a><\/a><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">var img;\/\/image\nvar imgang = 90;\/\/image angle\n\nfunction preload(){\n img = loadImage('https:\/\/i.imgur.com\/XCeFp0s.png');\/\/load image from imgur.com\n}\n\nfunction setup() {\n\n createCanvas(391, 480);\n \/\/background for contrast\n noStroke();\n imageMode(CENTER);\n}\n\nfunction draw() {\n\n background(0,0,0);\n\n for (var col = 0; col < img.height; col+=10){\/\/I did column for height because my image was incorrectly loaded.\n for (var row = 0; row < img.width; row+=10){\/\/row for height.\n\n var c = img.get(row,col);\/\/extract pixel from image and set as color\n\n \/\/set image to correct and central position\n push();\n translate(391,0);\n rotate(radians(imgang));\n fill(color(c));\/\/fill with picture colors\n ellipse(col,row,7,7);\/\/ellipses as pixels\n pop();\n\n }\n }\n\n push();\/\/needs to be separate because of background setting\n\n \/\/draw head\n stroke(230,230,0);\n strokeWeight(5);\n line(50,150,320,150);\n line(50,150,50,400);\n line(50,400,320,400);\n line(320,400,320,150);\n line(125,360,255,360);\n\n \/\/moving eyes\n var wall1 = constrain(mouseX,120,150)\n var c = constrain(mouseY,225,255);\n var wall2 = constrain(mouseX,240,280)\n\n \/\/eyes\n fill(230,230,0);\n ellipse(wall1,c,30,30);\n ellipse(wall2,c,30,30);\n\n pop();\n\n}\n\n\n\n\n<\/code><\/pre><\/p>\n\n\n\n<p>I enjoyed making this project. I faced challenges when I tried to load my images and match pixels according to the image. I changed the image link to a direct link on Imgur and solved the problem. For the pixels, I used a for loop to match the pixels to the image, and by changing the number of increments for each run, I was able to change the size and density of my pixels. For my composition, I did not want to create a photorealistic representation, instead, I wanted some sort of interaction with the image, so I created the yellow face. Overall, this project was a challenge, but I learned more about images in p5.js. <\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>project pixel sketch luca var img;\/\/image var imgang = 90;\/\/image angle function preload(){ img = loadImage(‘https:\/\/i.imgur.com\/XCeFp0s.png’);\/\/load image from imgur.com } function setup() { createCanvas(391, 480); \/\/background for contrast noStroke(); imageMode(CENTER); } function draw() { background(0,0,0); for (var col = 0; col < img.height; col+=10){\/\/I did column for height because my image was incorrectly loaded. for … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/11\/01\/project-computational-portrait-custom-pixel\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “Project: Computational Portrait (Custom Pixel)”<\/span><\/a><\/p>\n","protected":false},"author":642,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[111,58,1],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68500"}],"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\/642"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=68500"}],"version-history":[{"count":3,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68500\/revisions"}],"predecessor-version":[{"id":68505,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68500\/revisions\/68505"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=68500"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=68500"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=68500"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}