John Legelis – Project 09 Portrait

sketch

// John Legelis
// Section D

var imgH = 480
var pR = 10
var colorList = []
var cWidth = 360
var cHeight = 480
var sourceimg = "https://i.imgur.com/PHP8Htm.jpg"
var pimg = "https://i.imgur.com/R1D8XFS.jpg"
var Ploaded
var Sloaded;

function preload() {
    Sloaded = loadImage(sourceimg)
    Ploaded = loadImage(pimg)
}
function setup() {
    createCanvas(360, 480);
    background(0);
    Sloaded.loadPixels()
}
function draw() {
    for (x=0; x < cWidth/pR; x++){
        colorList[x] = []
        for (y=0; y < cHeight/pR; y++){
            colorList[x][y] = Sloaded.get(x*pR, y*pR)
            noStroke(0)
            tint(colorList[x][y])
            image(Ploaded, x*pR, y*pR, pR, pR)
        }
    }
    noLoop()
}

This week’s project seemed at first a bit intimidating but after thinking about it, I decided creating a mosaic representation of a portrait using “tiles” of another image would be an approachable yet interesting approach. The portrait photo this project is based on is a photo I took of my friend in a car holding her small dog named Rocky. The tile photo I used for the mosaic was a close up of Rocky’s face.

The Tile Image
Screenshot of mosaic with tile size 40 pixels.
Screenshot of mosaic with tile size 4 pixels.

Leave a Reply