HTML | CSS | DOM | p5.gif.js

Week 7
p5  |  HTML  |  CSS  |  DOM  |  p5.gif.js  

---

This week, I mess around with the p5.gif.js and HTML and move to Sublime and terminal for better handling files and code......

I don't know how to share the embedded code via sublime so here is a video screen of the result. Also, I don't know what happen to the text on the right. It's supposed to write "This is a FLYING DOG!!" The text "This is an EVIL CATS!!" works fine, though. I also added a little bit of control using mouseMoved() and keyPressed() function to the sketch.

After I've delved into the world of gif art in internet, I think I got more interested in how I an manipulating frames or pixels of the videos of pictures

Full Code Here.
https://drive.google.com/open?id=0B2uiTzJTtiBhNnd2c1pQMng5cDg

var canvas;
var dogGif, catGif, galaxyGif;

var h1;
var x = 0;
var xSpeed = 0.5;
var y = 0;

var text1, text2, text3, text4, text5, text6, text7, text8;
var h1;

function setup() {
  canvas = createCanvas(500, 500);
  canvas.position(10, 50); 
  galaxyGif = loadGif('galaxy.gif');
  dogGif = loadGif('dog.gif');
  catGif = loadGif('cat.gif');

// Dog
  text1 = createP("<<<<<<<This");
  text1.style("font-family", "monospace");
  text1.style("color", "#FF00ee");
  text1.style("font-size", "18pt");
  text1.style("padding", "10px");

  text2 = createP("<<<<<is a");
  text2.style("font-family", "monospace");
  text2.style("color", "#FF00ee");
  text2.style("font-size", "20pt");
  text2.style("padding", "10px");

  text3 = createP("<<<FLYING");
  text3.style("font-family", "monospace");
  text3.style("color", "#FF00ee");
  text3.style("font-size", "22pt");
  text3.style("padding", "10px");

  text4 = createP("<<DOG!!");
  text4.style("font-family", "monospace");
  text4.style("color", "#FF00ee");
  text4.style("font-size", "30pt");
  text4.style("padding", "10px");

// Cat
  text5 = createP("This>>>>>>>>");
  text5.style("font-family", "monospace");
  text5.style("color", "#FF00ee");
  text5.style("font-size", "18pt");
  text5.style("padding", "10px");

  text6 = createP("is an>>>>>>");
  text6.style("font-family", "monospace");
  text6.style("color", "#FF00ee");
  text6.style("font-size", "20pt");
  text6.style("padding", "10px");  

  text7 = createP("EVIL>>>>>>");
  text7.style("font-family", "monospace");
  text7.style("color", "#FF00ee");
  text7.style("font-size", "22pt");
  text7.style("padding", "10px");

  text8 = createP("CAT!!>>");
  text8.style("font-family", "monospace");
  text8.style("color", "#FF00ee");
  text8.style("font-size", "30pt");
  text8.style("padding", "10px");

  // h1 = createElement('h1', 'Press Any Key.');
  // h1.positio(550, 550);
}

function draw() {
  background(0);
  image(galaxyGif, 0, 0);
  image(dogGif, 0, 0);
  image(catGif, 250, 250);

  text1.position(x + 280, y + 35);
  text2.position(x + 280, y + 75);
  text3.position(x + 280, y + 115);
  text4.position(x + 280, y + 155);
  text5.position(x, y + 290);
  text6.position(x, y + 330);
  text7.position(x, y + 380);
  text8.position(x, y + 420);
  x = x + xSpeed;
  if (x > width - 430 || x < 0) {
    xSpeed = -xSpeed;
  }

}

function mouseMoved() {
  if (dogGif.loaded() && !dogGif.playing()){
    var totalFrames = dogGif.totalFrames();
    var frame = int(map(mouseX, 0, width, 0, totalFrames));
    dogGif.frame(frame);
  }

    if (catGif.loaded() && !catGif.playing()){
    var totalFrames = catGif.totalFrames();
    var frame = int(map(mouseX, 0, width, 0, totalFrames));
    catGif.frame(frame);
  }
}

function keyPressed() {
  if (dogGif.playing()) {
    dogGif.pause();
  } else {
    dogGif.play();
  }

  if (catGif.playing()) {
    catGif.pause();
  } else {
    catGif.play();
  }

  if (galaxyGif.playing()) {
    galaxyGif.pause();
  } else {
    galaxyGif.play();
  }
}

Downloaded gifs from www.giphy.com