{"id":75174,"date":"2022-11-05T19:33:57","date_gmt":"2022-11-05T23:33:57","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=75174"},"modified":"2022-11-05T19:53:42","modified_gmt":"2022-11-05T23:53:42","slug":"project-09-portrait","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/11\/05\/project-09-portrait\/","title":{"rendered":"Project 09 &#8211; 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>With this project, I mainly wanted to create different color modes from the pixels. The background is black and white, the 1st set of selected pixels are the original colors, and when clicked the pixels become inverted. <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"alignleft size-large is-resized\"><img loading=\"lazy\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/Screenshot-2022-11-05-192854-1024x1021.jpg\" alt=\"\" class=\"wp-image-75210\" width=\"290\" height=\"289\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/Screenshot-2022-11-05-192854-1024x1021.jpg 1024w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/Screenshot-2022-11-05-192854-300x300.jpg 300w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/Screenshot-2022-11-05-192854-150x150.jpg 150w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/Screenshot-2022-11-05-192854-768x766.jpg 768w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/Screenshot-2022-11-05-192854.jpg 1185w\" sizes=\"(max-width: 290px) 85vw, 290px\"><\/figure><\/div>\n\n<div class=\"wp-block-image\">\n<figure class=\"alignleft size-large is-resized\"><img loading=\"lazy\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/Screenshot-2022-11-05-192926-1024x1017.jpg\" alt=\"\" class=\"wp-image-75212\" width=\"289\" height=\"287\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/Screenshot-2022-11-05-192926-1024x1017.jpg 1024w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/Screenshot-2022-11-05-192926-300x298.jpg 300w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/Screenshot-2022-11-05-192926-150x150.jpg 150w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/Screenshot-2022-11-05-192926-768x763.jpg 768w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/Screenshot-2022-11-05-192926.jpg 1200w\" sizes=\"(max-width: 289px) 85vw, 289px\"><\/figure><\/div>\n\n\n<div><a class=\"p5_sketch_link\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/sketch-10.js\" data-width=\"400\" data-height=\"400\">sketch<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/plugins\/p5-embedder\/p5_iframe.html\" class=\"p5_exampleFrame\" width=\"400\" height=\"400\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/ Emily Franco\n\/\/ Section C\n\/\/ efranco@andrew.cmu.edu\n\/\/ Assignment-09\n\nvar sqr = [];\nvar sqrArrayLen = 150;\n\n\/\/true = original colors false = inverted\nvar colorStyle = true;\n\nvar count = 0; \nfunction preload(){\n    face = loadImage(\"https:\/\/i.imgur.com\/bu90lcN.jpg\");\n}\n\n\/\/constructor for square objects\nfunction makeSquare(cx, cy, wdth){\n    var c = {x:cx, y:cy, w:wdth}\n    return c;\n}\n\nfunction setup(){\n    createCanvas(480,480); \n    background(\"white\");\n    \n    face.loadPixels(); \n    face.resize(480,600);\n    greyscale(); \n\n    \/\/define objects in sqr array \n\tfor(var i=0;i&lt;=sqrArrayLen-1;i++){\n\t    var side1 = random(10,100);\n\t    var x = random(width);\n\t    var y = random(height);\n\n\t    var square = makeSquare(x,y,side1);\n        sqr.push(square);\n     }    \n}\n\nfunction draw() {   \n    noFill();\n    stroke(\"white\");\n\n    \/\/draw 1st image only once\n    if(count&lt;=0){\n    \tdrawAlterations()\n    }\n\t\n    count++;\n\tnoLoop();\n}\n\n\/\/draw changed made to image\nfunction drawAlterations(){\n\tvar opacity;\n\tvar shift; \n\tvar c; \n\tfor(var i=0; i&lt;=sqr.length-1;i++){\n\t\tnoStroke();\n\t\tif(colorStyle){\n\t\t\tshowColor(i);\n\t\t}else{\n\t\t\tinvertColors(i);\n\t\t}\n\t\tprint(colorStyle);\n\t\t\n\t}\n}\n\/\/make image greyscale\nfunction greyscale(){ \n\tfor (var i=0;i&lt;=face.width;i++){\n\t\tfor(var j=0;j&lt;=face.height;j++){\n\t\t\tc = face.get(i,j);\n\t\t\tvar grey = c[0]; \n\t\t\tpush();\n\t\t\tnoStroke();\n\t\t\tfill(grey,150);\n\t\t\tsquare(i,j,1);\n\t\t\tpop();\n\t\t}\n\t} \n}\n\n\/\/change pixel color back to original only in boxed area\nfunction showColor(index){\n\tvar maxX = sqr[index].x + sqr[index].w;\n\tvar maxY = sqr[index].y + sqr[index].w;\n\n\tfor (var i=sqr[index].x;i&lt;=maxX;i++){\n\t\tfor(var j=sqr[index].y;j&lt;=maxY;j++){\n\t\t\tc = face.get(i,j);\n\t\t\topacity = random(50,150); \n\t\t\tshift = random(-10,10);\n\n\t\t\tfill(c[0],c[1],c[2],opacity);\n\t\t\tsquare(i+shift,j+shift,1); \n\t\t}\n\t} \n}\n\nfunction invertColors(index){\n\tvar maxX = sqr[index].x + sqr[index].w;\n\tvar maxY = sqr[index].y + sqr[index].w;\n\n\tfor (var i=sqr[index].x;i&lt;=maxX;i++){\n\t\tfor(var j=sqr[index].y;j&lt;=maxY;j++){\n\t\t\tc = face.get(i,j);\n\t\t\t\n\t\t\tvar r = 255-c[0];\n\t\t\tvar g = 255-c[1];\n\t\t\tvar b = 255-c[2];\n\n\t\t\topacity = random(50,150);\n\t\t\tshift = random(-10,10);\n\n\t\t\tfill(r,g,b,opacity);\n\t\t\tsquare(i+shift,j+shift,1); \n\t\t}\n\t} \n}\nfunction mousePressed(){\n\tcolorStyle = !colorStyle;\n\tdrawAlterations();\n}\n<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>With this project, I mainly wanted to create different color modes from the pixels. The background is black and white, the 1st set of selected pixels are the original colors, and when clicked the pixels become inverted. sketch \/\/ Emily Franco \/\/ Section C \/\/ efranco@andrew.cmu.edu \/\/ Assignment-09 var sqr = []; var sqrArrayLen = &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/11\/05\/project-09-portrait\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 09 &#8211; Portrait&#8221;<\/span><\/a><\/p>\n","protected":false},"author":719,"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\/75174"}],"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\/719"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=75174"}],"version-history":[{"count":3,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/75174\/revisions"}],"predecessor-version":[{"id":75654,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/75174\/revisions\/75654"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=75174"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=75174"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=75174"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}