I wanted to create a portrait with my fav words and cute text faces! When the mouse is pressed, the pixel colors are in black and white.<\/p>\n\n\n\n
Here is how it looks after some time.<\/p>\n\n\n\n<\/figure>sketch<\/a><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/ Sowang Kundeling Project 09 Section C\n\nvar img;\nvar imgbw;\nvar texts = [\"( ͡° ͜ʖ ͡°)\", \"(づ｡◕‿‿◕｡)づ\", \"(◕‿◕✿)\", \"(ᵔᴥᵔ)\", \"♥‿♥\", \"~(˘▾˘~)\", \"ᕦ(ò_óˇ)ᕤ\", \"(｡◕‿◕｡)\", \"ʕ•ᴥ•ʔ\", \"corn\", \"taco\", \"cat\"];\n\nfunction preload(){\n \/\/load image\n img = loadImage(\"https:\/\/i.imgur.com\/1V17iyS.png\");\n imgbw = loadImage(\"https:\/\/i.imgur.com\/qedFJ3f.jpg\")\n frameRate(10000);\n}\n\n\nfunction setup() {\n createCanvas(350, 350);\n \/\/img.resize(450, 450);\n \/\/imageMode(CENTER);\n \/\/textMode(CENTER);\n}\n\n\nfunction draw() {\n \/\/image(img, 0, 0, 400, 400);\n var x = random(img.width); \/\/ random coordinate for the pixel\n var y = random(img.height);\n\n var pixelColor = img.get(x*5, y*5); \/\/ pixel color\n var pixelColorbw = imgbw.get(x*5, y*5) \/\/ black and white pixel color\n \n if(mouseIsPressed) { \/\/ creates black and white pixels when mouse is pressed\n fill(pixelColorbw);\n }else {\n fill(pixelColor);\n }\n\n strokeWeight(random(5,20));\n textSize(random(5, 20));\n text(random(texts), x, y);\n}<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>I wanted to create a portrait with my fav words and cute text faces! When the mouse is pressed, the pixel colors are in black and white. Here is how it looks after some time. sketch \/\/ Sowang Kundeling Project 09 Section C var img; var imgbw; var texts = [“( ͡° ͜ʖ ͡°)”, “(づ｡◕‿‿◕｡)づ”, … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/11\/05\/project-09\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “Project 09”<\/span><\/a><\/p>\n","protected":false},"author":731,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[111,57],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/75261"}],"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\/731"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=75261"}],"version-history":[{"count":1,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/75261\/revisions"}],"predecessor-version":[{"id":75263,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/75261\/revisions\/75263"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=75261"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=75261"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=75261"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"\"](\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/Screen-Shot-2022-11-05-at-7.56.40-PM.png\")
<\/figure><\/figure>