Project- 09- ssontag

Cross Hairs

var baseImage;

//pre load my underlying image
function preload() {
    var imgurLink = "https://i.imgur.com/jjMBr8v.jpg";
    baseImage = loadImage(imgurLink);
}

function setup() {
    createCanvas(480, 480);
    background(0);
//load the pixels of the image so they can be referenced later
    baseImage.loadPixels();
    frameRate(15);
}

function draw() {

//randomly select a pixel on the canvas
    var px = random(width);
    var py = random(height);
    var ix = constrain(floor(px), 0, width-1);
    var iy = constrain(floor(py), 0, height-1);
//loads the color from the base image so the cross hairs coordinate with the colors of the base image
    var theColorAtLocationXY = baseImage.get(ix, iy);
//randomly generate points for the lines to make cross hairs
    var rX = random(1,8);
    var rY = random(1,8);

    noStroke();
    fill(theColorAtLocationXY);
    stroke(theColorAtLocationXY);

//create cross hairs
    line(px, py, px + rX, py + rX);
    line(px + rY, py, px + rX - rY, py + rX);

}

For this Project I decided I did not want to make shapes like ellipses or rectangles, but I wanted to use line work. Instead of just randomly placed lines I decided to make randomly generated cross hairs to add another layer to the sketch.

Leave a Reply