Xindi Lyu-Project 09-Portrait-Section A

sketch

 
/*
Project 09
Xindi Lyu
Section A
xindil@andrew.cmu.edu
*/

var x
var y
var me;
var Color=["indigo","cyan","grey","yellow","white","pink","claret","green"]
var numbers=[0,1,2,3,4,5,6,7]
var a

function preload() {
    //load in my self portrait
    var URL = "https://i.imgur.com/pjDKzf3.jpg";
    me = loadImage(URL);
}

function setup() {
    //drawing the image
    createCanvas(300, 480);
   frameRate(150);
    me.loadPixels();
    
}

function draw() {
    //Get the colors of the pixels
    x = random(width);
    y = random(height);
    var mx = constrain(floor(x), 0, width-3);
    var my = constrain(floor(y), 0, height-3);
    var theColorAtLocationXY = me.get(mx, my);

    //Enable mouse interactions to gerate stroke elements
    var mousecolor = me.get(mouseX, mouseY);
    //Using lines as pixels
    stroke(theColorAtLocationXY);
    strokeWeight(1);
    line(x+random(-20,20),y+random(-20,20),x+random(-20,20),y+random(-20,20));
     
noStroke();
fill(theColorAtLocationXY)
    //Use rectangles as pixels along with the lines
    rect(x,y, random(5,10),random(5,10));
    a=random(numbers);
    //Create mosaica effect with mouse
fill(mousecolor);
     strokeWeight(0.7);
        stroke(Color[a]);
        rect(mouseX,mouseY,random(5,10),random(5,10));
    }

I used a photo of myself as the base image of this project and experimented with two different strokes to generate a dynamic effect in the result portrait. Also I incorporated an interactive element into the program for the viewers to create “mosaic” effects on the drawing.

(Original Image)

(Stroke effects)

Mosaic effects