Faces on a slider

Computational Media

For my PComp midterm, I used a few frames of some hand made sketches that used a proximity sensor to change between them.

For the sake of learning and applying the HTML slider, I uploaded the sketches on to p5.js and used simple if conditions to traverse through the images using the slider and get the animation effect.

Here is my code:

function setup() {
createCanvas(420, 450);
one = loadImage(“faces/1.png”);
two = loadImage(“faces/2.png”);
three = loadImage(“faces/3.png”);
four = loadImage(“faces/4.png”);
five = loadImage(“faces/5.png”);
six = loadImage(“faces/6.png”);
seven = loadImage(“faces/7.png”);
eight = loadImage(“faces/8.png”);
nine = loadImage(“faces/9.png”);
ten = loadImage(“faces/10.png”);
slider = createSlider(0,10,0,0);
slider.position(10,height-40);
slider.size(width-20,20);
x = slider.value();
}

function draw() {
background(255);
console.log(slider.value());
if(slider.value() <= 1){
image(one,0,0,width,height);
}
else if(slider.value() > 1 && slider.value() <= 2){
image(two,0,0,width,height);
}
else if(slider.value() > 2 && slider.value() <= 3){
image(three,0,0,width,height);
}
else if(slider.value() > 3 && slider.value() <= 4){
image(four,0,0,width,height);
}
else if(slider.value() > 4 && slider.value() <= 5){
image(five,0,0,width,height);
}
else if(slider.value() > 5 && slider.value() <= 6){
image(six,0,0,width,height);
}
else if(slider.value() > 6 && slider.value() <= 7){
image(seven,0,0,width,height);
}
else if(slider.value() > 7 && slider.value() <= 8){
image(eight,0,0,width,height);
}
else if(slider.value() > 8 && slider.value() <= 9){
image(nine,0,0,width,height);
}
else {
image(ten,0,0,width,height);
}
}

Leave a Reply

Your email address will not be published. Required fields are marked *