abradbur – Project – 09

sketch

var myFace; //image of my face
var skeleton; //skeleton image
var currentImageIndex;

function preload(){
    //load my face and the skeleton
    myFace = loadImage("https://i.imgur.com/m10glof.jpg");
    skeleton = loadImage("https://i.imgur.com/9cviAOv.jpg");
    currentImageIndex = 0;
}

function setup() {
    createCanvas(360, 480);
    background(0);
    fill(218, 172, 75);
    textSize(50);
    text("We are all Skeletons Underneath", 50, 120, 310, 340);
    currentImage = myFace;
    currentImage.loadPixels();

}

function draw() {
    var px = random(width);
    var py = random(height);
    //keeps the color within the constraints of the image
    var ix = constrain(floor(px), 0, width);
    var iy = constrain(floor(py), 0, height);
    var col = currentImage.get(ix, iy); //color of the image
    strokeWeight(0.1);
    stroke(218, 174, 75);
    fill(col);
    //draw random triangles
    triangle(px, py, px + random(6, 12), py + random(-8, 8),
    px + random(6, 12), py);
    
    //just draw on the triangles if you're bored
    var mouseCol = currentImage.get(mouseX, mouseY);//color at the moouse
    stroke(mouseCol);
    triangle(mouseX, mouseY, mouseX + random(6, 12), mouseY + random(-8, 8),
    mouseX + random(6, 12), mouseY);
}

//flip between myFace and skeleton
//when you press the mouse
function mousePressed(){
    currentImageIndex = (currentImageIndex +1)%2;
    if (currentImageIndex === 0){
        currentImage = myFace;
    } else{
        currentImage = skeleton;
    }
}

For this project I decided to use my own face because I wanted to use a silly photo I’ve been unable to as of yet show the world. I also wanted to keep with the theme of the Halloween season and make something a little spooky. Random triangles pop up to make the image but if you click on it, instead of my face, a skeleton may begin to emerge. (Not actually my skeleton, all credit to Evil Sheila the skeleton in my High School art department, whom I love). I’d actually hoped to switch between shapes (triangles to circles) as well as images, but I couldn’t quite get it to work. So I settled.

Here are the original images I used.

And here are some screen shots if you don’t want to sit through the creation process. (You can also use the mouse to speed things up)