I tried to use random quadrangles and words to construct a self portrait. And the words I use are the place I was born, grown up and the place i’m staying.
sketch
var img;
var words = ['Beijing', 'Kunming', 'Pittsburgh','Alice']
var number = 1;
//preload image
function preload() {
img = loadImage('https://i.imgur.com/QwF6omd.jpeg');
}
function setup() {
createCanvas(400, 480);
//resize image to fit canvas
img.resize(width, height);
frameRate(400);
imageMode(CENTER);
noStroke();
background(255);
img.loadPixels();
}
//draw image
function draw() {
if(number==1) {
drawWord();
} else {
drawPolygon();
}
}
function drawPolygon() {
var x = floor(random(img.width));
var y = floor(random(img.height));
//picking color
var pix = img.get(x, y);
fill(pix, 128);
//draw the random shape
beginShape();
vertex(x,y);
vertex(x-(random(4,7)), y+(random(10, 25)));
vertex(x-(random(4,7)), y+(random(25, 40)));
vertex(x,y+(random(40, 60)));
vertex(x+(random(4,7)), y+(random(25, 40)));
vertex(x+(random(4,7)), y+(random(10, 25)));
endShape();
}
function drawWord() {
var x = floor(random(img.width));
var y = floor(random(img.height));
var pix = img.get(x, y);
fill(pix, 128);
textSize(random(3,15))
//randomly pick words to draw
text(words[int(random(0,4))], x, y)
}
function mousePressed() {
//changing between two options
number++;
if(number > 2) {
number = 1
}
background(255)
}