var underlyingImage;
function preload() {
var myImageURL = "https://i.imgur.com/Q9MzvBG.jpg";
underlyingImage = loadImage(myImageURL);
}
function setup() {
createCanvas(400, 480);
background(0);
underlyingImage.loadPixels();
frameRate(10);
}
function draw() {
var lineStartX = random(width);
var lineStartY = random(height);
var lineStartX2 = random(width);
var lineStartY2 = random(height);
var ix = constrain(floor(lineStartX), 0, width-1);
var iy = constrain(floor(lineStartY), 0, height-1);
var theColorAtLocationXY = underlyingImage.get(ix, iy);
stroke(theColorAtLocationXY);
line(lineStartX, lineStartY, lineStartX + 20, lineStartY + 20);
line(lineStartX2, lineStartY2, lineStartX2 + 20, lineStartY2 - 20);
}
I wanted to do something with lines, so I started by just making the line from one random point to another. The problem was it was only using the color from the starting point, so it just made this big blob with no actual portrait. So I shortened the distance of the lines so that the colors wouldn’t stray from their rightful spots too much.