{"id":75230,"date":"2022-11-05T20:46:15","date_gmt":"2022-11-06T00:46:15","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=75230"},"modified":"2022-11-05T20:46:15","modified_gmt":"2022-11-06T00:46:15","slug":"project-09-computational-portrait-2","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/11\/05\/project-09-computational-portrait-2\/","title":{"rendered":"Project 09: Computational 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>My process: I chose a picture of me on my 3rd birthday. I wanted to incorporate the number 3 into my custom pixel portrait. So I started there. My first custom pixels are made of 3s. Then I started to play with the other ways I could deconstruct, rebuild, and recolor  play with the other ways I could deconstruct, rebuild, and recolor my portrait. I have created a 5 Portrait Series. <\/p>\n\n\n\n<p>Portrait 1 &ndash; Made of Threes, Portrait 2 &ndash; Made of Ovals &ndash; inspired by thumbprint art, Portrait 3 &ndash; Made of Squares, Portrait 4 &ndash; Made of Legos &ndash; inspired by Legos, Portrait 5 &ndash; Made of Warhol &ndash; inspired by Andy Warhol<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"711\" height=\"142\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/photoStrip09.jpg\" alt=\"\" class=\"wp-image-75250\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/photoStrip09.jpg 711w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/photoStrip09-300x60.jpg 300w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\"><\/figure><p> Press the space bar to see the various portraits I created.  Click the mouse to freeze the creation of a portrait. Click again to resume. <\/p>\n\n\n\n<div><a class=\"p5_sketch_link\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/sketch-15.js\" data-width=\"472\" data-height=\"465\">sketch<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/plugins\/p5-embedder\/p5_iframe.html\" class=\"p5_exampleFrame\" width=\"472\" height=\"465\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/* Evan Stuhlfire\n * estuhlfi@andrew.cmu.edu section B\n * Project-09: Computational Portrait *\/\n\n\/* My process: I chose a picture of me on my 3rd \n * birthday. I wanted to incorporate the number 3 into\n * my custom pixel portrait. So I started there. My first custom pixels\n * are made of 3s. Then I started to \n * play with the other ways I could deconstruct, rebuild, and recolor\n * my portrait. I have created a 5 Portrait Series. *\/\n\n \/* Portrait 1 - Made of Threes\n  * Portrait 2 - Made of Ovals - inspired by thumbprint art\n  * Portrait 3 - Made of Squares\n  * Portrait 4 - Made of Legos - inspired by Legos\n  * Portrait 5 - Made of Warhol - inspired by Andy Warhol *\/\n\n\/* Press the space bar to see the various portraits I created.\n * Click the mouse to freeze the creation of a portrait. Click again\n * to resume. This way portraits can be saved in different states. *\/\n\nvar img; \/\/ image variable\nvar scaleCanvas = 1.4; \/\/ factor to make canvas bigger than image\n\n\/\/ booleans to determin which portrait to draw\nvar dThrees = true;\nvar dEllipses = false;\nvar dSquares = false;\nvar dLines = false;\nvar dOutline = false;\n\n\/\/ used with a mouse click to freeze and resume dynamic portraits\nvar freeze = false; \n\nfunction preload() {\n    img = loadImage(\"https:\/\/i.imgur.com\/FRtQdiE.jpg\");\n}\n\nfunction setup() {\n    \/\/ create canvas 1.4 times the size of the original image\n    createCanvas(img.width * scaleCanvas, img.height * scaleCanvas);\n    background(230);\n\n    textAlign(CENTER);\n}\n    \nfunction draw() {\n    \/\/ randomly generate x and y to get color from\n\n    \/\/ use randomGaussian so image appears in center first\n    var xPos = Math.floor(randomGaussian(img.width\/2, 100));\n    var yPos = Math.floor(randomGaussian(img.height\/2, 100));\n\n    \/\/ remap coordinates of image to the canvas size\n    var xMap = map(xPos, 0, img.width, 0, width);\n    var yMap = map(yPos, 0, img.height, 0, height);\n\n    \/\/ get pixel color\n    var pixCol = img.get(xPos, yPos);\n\n    \/\/ test which syle to draw\n    if(dThrees & !freeze) {\n        drawThrees(xMap, yMap, pixCol);\n    } else if(dEllipses & !freeze) {\n        drawEllipses(xMap, yMap, pixCol);\n    } else if(dSquares & !freeze) {\n        rectMode(CENTER);\n        drawSquares(xMap, yMap, pixCol);\n    } else if(dLines & !freeze) {\n        drawLines();\n    } else if(dOutline & !freeze) {\n        rectMode(CORNER);\n        drawOutline();\n    }\n}\n\nfunction keyPressed() {\n    \/\/ switch between portait drawings when\n    \/\/ the space bar is pressed\n    if(key != \" \") {\n        \/\/ key was not space bar, return\n        return;\n    }\n\n    if(dThrees){\n        dThrees = false;\n        dEllipses = true;\n        dSquares = false;\n        dLines = false;\n        dOutline = false;\n    } else if(dEllipses) {\n        dThrees = false;\n        dEllipses = false;\n        dSquares = true;\n        dLines = false;\n        dOutline = false;\n    } else if(dSquares) {\n        dThrees = false;\n        dEllipses = false;\n        dSquares = false;\n        dLines = true;\n        dOutline = false;\n    } else if(dLines) {\n        dThrees = false;\n        dEllipses = false;\n        dSquares = false;\n        dLines = false;\n        dOutline = true;\n    } else if(dOutline) {\n        dThrees = true;\n        dEllipses = false;\n        dSquares = false;\n        dLines = false; \n        dOutline = false; \n    }\n    \/\/ reset background, unfreeze if frozen\n    background(230);\n    freeze = false;\n}\n\nfunction mousePressed() {\n    \/\/ toggle the freeze boolean to freeze drawing\n    freeze = !freeze;\n}\n\nfunction colorShift(pc, shiftType) {\n    \/\/ read the pixel color variable and shift the color\n    \/\/ based on shiftType specified\n    var r, g, b, t;\n\n    \/\/ read colors\n    r = pc[0];\n    g = pc[1];\n    b = pc[2];\n    t = pc[3];\n\n    if(shiftType == \"green\") {\n        \/\/ shift colors towards green\n        r = constrain(r - 10, 5, 200);\n        g = constrain(g + 50, 50, 230);\n        b = constrain(b + 10, 10, 200);  \n    } else if(shiftType == \"blue\") {\n        \/\/ shift colors towards blue\n        r = constrain(r - 10, 5, 200);\n        g = constrain(g + 10, 10, 200);\n        b = constrain(b + 50, 50, 230);        \n    }\n\n    \/\/ map mouse to change trasparancy as it moves vertical\n    var my = map(mouseY, 0, height, 50, 180);\n    t = my;\n\n    return color(r, g, b, t);\n}\n\nfunction drawThrees(xMap, yMap, pixCol) {\n    \/\/ draw portrait out of 3s\n    var maxSize = 40;\n\n    \/\/ green shift colors from original image\n    pixCol = colorShift(pixCol, \"green\");\n    stroke(pixCol);\n    strokeWeight(1);\n    fill(pixCol);\n    \/\/ map mouse x to new range to control text size\n    var mx = map(mouseX, 0, width, 10, maxSize);\n    textSize(min(mx, maxSize));\n\n    \/\/ draw 3s on canvas\n    text(\"3\", xMap, yMap);\n}\n\nfunction drawEllipses(xMap, yMap, pixCol) {\n    \/\/ draw portrait out of random ellipses\n\n    \/\/ blue shift colors from original image\n    pixCol = colorShift(pixCol, \"blue\");\n    \/\/ use color for fill\n    fill(pixCol);\n    stroke(pixCol);\n    strokeWeight(1);\n    ellipse(xMap, yMap, random(5, 35), random(5, 15));\n}\n\nfunction drawSquares(xMap, yMap, pixCol) {\n    \/\/ create portrait from squares\n    \/\/ square size is based on the darkness of the pixel color\n    var maxColor = 140;\n    var midColor = 100;\n    var midColor2 = 70;\n\n    \/\/ make color more or less transparent with movement of mouseY\n    var transColor = colorShift(pixCol, \"\");\n    \/\/ set colors\n    stroke(transColor);\n    fill(transColor);\n\n    \/\/ Check pixel color and adjust square size based on how dark color is\n    if(pixCol[0] &gt; maxColor & pixCol[1] > maxColor && pixCol[3] > maxColor) {\n        square(xMap, yMap, 30);\n        fill(pixCol);\n        circle(xMap, yMap, 5);\n    } else if(pixCol[0] &gt; midColor & pixCol[1] > midColor && pixCol[3] >\n        midColor) {\n        square(xMap, yMap, 20);\n        fill(pixCol);\n        circle(xMap, yMap, 5);\n    } else if(pixCol[0] &gt; midColor2 & pixCol[1] > midColor2 && pixCol[3] >\n        midColor2) {\n        square(xMap, yMap, 15);\n        fill(pixCol);\n        circle(xMap, yMap, 5);\n    }else {\n        square(xMap, yMap, 20);\n        fill(pixCol);\n        circle(xMap, yMap, 5);\n    }\n}\n\nfunction drawLines() {\n    \/\/ lego like circles and square in rows and columns\n    for(var y = 5; y &lt; img.height; y += 5) {\n\n        for(var x = 5; x &lt; img.width; x += 5) {\n            var c = img.get(x, y);\n\n            \/\/ map x from img to x from canvas\n            var mx = map(x, 0, img.width, 0, width);\n            \/\/ map y from img to y from canvas\n            var my = map(y, 0, img.height, 0, height);\n\n            \/\/ fill and draw \n            \/\/ shift to lego colors   \n            if(c[0] &gt; 180) {\n                c = color(255, 255, 0);\n            } else if(c[0] &gt; 80) {\n                c = color(0, 255, 0);\n            } else if(c[0] &gt; 50) {\n                c = color(255, 0, 0);\n            } else {\n                c = color(0, 0, 255);\n            }\n            fill(c);\n            noStroke();\n            rect(mx, my, 10, 10);\n            stroke(50);\n            circle(mx, my, 5);\n        }\n    }\n}\n\nfunction drawOutline() {\n    \/\/ draw an Andy Warhol style grid of pixel faces\n    \/\/ draw four color quadrants\n    fill(0, 255, 0); \/\/ green\n    rect(0, 0, width\/2, height\/2);\n    fill(255, 255, 77); \/\/ yellow\n    rect(width\/2, 0, width, height\/2);\n    fill(77, 255, 255); \/\/ blue\n    rect(0, height\/2, width\/2, height);\n    fill(255, 148, 77); \/\/ orange\n    rect(width\/2, height\/2, width, height);\n\n    \/\/ draw monochrome points at points of color change\n    for(var y = 0; y &lt; img.height; y += 3) {\n        \/\/ get color from image\n        var c = img.get(0, y);\n\n        \/\/ look ahead to see when to change line color\n        for(var x = 0; x &lt; img.width; x += 2) {\n            var dc = img.get(x, y);\n\n            \/\/ color is different, draw this point\n            if(dc[0] - c[0] &gt; 10 || c[0] - dc[0] &gt; 10 || \n                x == img.width - 1) {\n                \/\/ map x from img to x from canvas\n                var mx = map(x, 0, img.width, 0, width);\n                \/\/ map y from img to y from canvas\n                var my = map(y, 0, img.height, 0, height);\n\n                if(c[0] &gt; 60) {\n                    drawPointImg(mx, my, color(0, 0, 230), 1);\n                    drawPointImg(mx, my, color(230, 0, 230), 2);\n                    drawPointImg(mx, my, color(255, 0, 0), 3);\n                    drawPointImg(mx, my, color(255, 216, 204), 4);\n                }\n\n                \/\/ set color variable to new color\n                c = dc;\n            }\n        }\n    }\n}\n\nfunction drawPointImg(mx, my, pc, quad) {\n    \/\/ draw set of points for specified quadrant \n    \/\/ map to specified quad\n    if(quad == 1) {\n        \/\/ map points to first quadrant\n        qmx = map(mx, 0, width, 0, width\/2);\n        qmy = map(my, 0, height, 0, height\/2);\n    } else if (quad == 2) {\n        \/\/ map points to second quadrant\n        qmx = map(mx, 0, width, width\/2, width);\n        qmy = map(my, 0, height, 0, height\/2);\n    } else if (quad == 3) {\n        \/\/ map points to third quadrant\n        qmx = map(mx, 0, width, 0, width\/2);\n        qmy = map(my, 0, height, height\/2, height);\n    } else if (quad == 4) {\n        \/\/ map points to fourth quadrant\n        qmx = map(mx, 0, width, width\/2, width);\n        qmy = map(my, 0, height, height\/2, height);\n    }\n\n    \/\/ set color of point\n    stroke(pc);\n    strokeWeight(.25);\n\n    \/\/ draw point\n    point(qmx, qmy);\n}\n\n\n<\/code><\/pre><\/div>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"691\" height=\"687\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/09notes.jpg\" alt=\"\" class=\"wp-image-75252\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/09notes.jpg 691w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/09notes-300x298.jpg 300w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/09notes-150x150.jpg 150w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\"><figcaption>Project Notes<\/figcaption><\/figure><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>My process: I chose a picture of me on my 3rd birthday. I wanted to incorporate the number 3 into my custom pixel portrait. So I started there. My first custom pixels are made of 3s. Then I started to play with the other ways I could deconstruct, rebuild, and recolor play with the other &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/11\/05\/project-09-computational-portrait-2\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 09: Computational Portrait&#8221;<\/span><\/a><\/p>\n","protected":false},"author":760,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[111,56,1],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/75230"}],"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\/760"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=75230"}],"version-history":[{"count":4,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/75230\/revisions"}],"predecessor-version":[{"id":75253,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/75230\/revisions\/75253"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=75230"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=75230"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=75230"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}