{"id":75120,"date":"2022-11-05T16:07:39","date_gmt":"2022-11-05T20:07:39","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=75120"},"modified":"2022-11-05T16:07:39","modified_gmt":"2022-11-05T20:07:39","slug":"project-09-ascii-portrait","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/11\/05\/project-09-ascii-portrait\/","title":{"rendered":"Project-09: ASCii 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><p>had a lot of fun w dis one<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"793\" height=\"1024\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/Screen-Shot-2022-11-03-at-1.07.51-AM-793x1024.png\" alt=\"\" class=\"wp-image-75122\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/Screen-Shot-2022-11-03-at-1.07.51-AM-793x1024.png 793w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/Screen-Shot-2022-11-03-at-1.07.51-AM-232x300.png 232w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/Screen-Shot-2022-11-03-at-1.07.51-AM-768x992.png 768w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/Screen-Shot-2022-11-03-at-1.07.51-AM.png 1024w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\"><\/figure><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"696\" height=\"894\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/Screen-Shot-2022-11-05-at-4.04.46-PM.png\" alt=\"\" class=\"wp-image-75123\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/Screen-Shot-2022-11-05-at-4.04.46-PM.png 696w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/Screen-Shot-2022-11-05-at-4.04.46-PM-234x300.png 234w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\"><\/figure><div><a class=\"p5_sketch_link\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/sketch-6.js\" data-width=\"350\" data-height=\"450\">sketch<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/plugins\/p5-embedder\/p5_iframe.html\" class=\"p5_exampleFrame\" width=\"350\" height=\"450\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/ Zoe Lin (ID: youlin)\n\/\/ Section B\n\n\/\/please give it a couple seconds to load!\n\/\/press the mouse to invert the colors!\nvar density = '@&Ntilde;#W$0985321!?=+-;:,._ ';\nvar r, g, b;\nvar img;\n\nfunction preload() {\n  img = loadImage(\"https:\/\/i.imgur.com\/GBXXDnf.png\"); \/\/load image\n}\n\nfunction setup() {\n  createCanvas(350, 450);\n  \/\/frameRate(10);\n  textAlign(CENTER, CENTER); \/\/ensures ascii text aligns with pixels\n  noStroke();\n}\n\nfunction draw() {\n  img.loadPixels(); \/\/loads each individual pixel of img\n  background(0);\n\n  \/\/var denShuffle = shuffle(density);\n  var newWidth = width\/img.width;\n  var newHeight = height\/img.height;\n  for (var i = 0; i &lt; img.width; i++) {\n    for (var j = 0; j &lt; img.height; j++) {\n      var index = (i+j*img.width) * 4; \/\/sets index to match image pixel\n      r = img.pixels[index]; g = img.pixels[index+1]; b = img.pixels[index+2];\n      var average = (r+g+b) \/ 3; \/\/finds average rgb index\n      textSize(newWidth);\n      fill(255);\n\n      \/\/maps index of letter to image pixels\n      var letterdex = floor(map(average,0,255,density.length,0));\n      \/\/draws ascii letters\n      text(density.charAt(letterdex), i*newWidth, j*newHeight);\n      \n    }\n  }  \n}\n\n\/\/note: mousePressed also takes a few seconds to load!\nfunction mousePressed() { \/\/inverts colors when mouse is pressed\n  density = density.split('').reverse().join(''); \/\/reverses density string\n}<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>had a lot of fun w dis one sketch \/\/ Zoe Lin (ID: youlin) \/\/ Section B \/\/please give it a couple seconds to load! \/\/press the mouse to invert the colors! var density = &#8216;@&Ntilde;#W$0985321!?=+-;:,._ &#8216;; var r, g, b; var img; function preload() { img = loadImage(&#8220;https:\/\/i.imgur.com\/GBXXDnf.png&#8221;); \/\/load image } function setup() { &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/11\/05\/project-09-ascii-portrait\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project-09: ASCii Portrait&#8221;<\/span><\/a><\/p>\n","protected":false},"author":740,"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\/f2022\/wp-json\/wp\/v2\/posts\/75120"}],"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\/740"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=75120"}],"version-history":[{"count":1,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/75120\/revisions"}],"predecessor-version":[{"id":75125,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/75120\/revisions\/75125"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=75120"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=75120"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=75120"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}