Animation Maker with p5.capture

mySketch.js
xxxxxxxxxx
 
let video;
let playButton;
let frames = [];
let isPlaying = false;
let currentIndex = 0;
let lastFrameTime = 0;
let frameWidth
let frameHeight
let frameY
let hideThumbs = false
let shutter
let mouse
let key
​
function preload() {
  shutter = loadSound('mixkit-camera-shutter-click-1133.wav')
  mouse = loadImage('mouse.png')
  key = loadImage('keyboard.png')
}
​
function setup() {
  background(200, 150, 20)
  createCanvas(windowWidth*0.78, windowHeight); // Set canvas size equal to the height of the window
  imageMode(CENTER)
  video = createCapture(VIDEO);
  video.size(height, height / 1.125); // Set video capture size equal to the height of the window
  video.hide();
  
  frameWidth = height
  frameHeight = height / 1.125
  frameY =  height - video.height / 2
  mouse.resize(width / 5, 0)
    image(mouse, width / 10, height - height /2.5)
  rectMode(CENTER)
  //rect(width - width / 10, height - height / 2.5, key.width, key.height / 2)
  key.resize(width / 5, 0)
  image(key, width - width / 12, height - height / 2.2)
    fill(255)
    textAlign(CENTER, CENTER)
  textSize(width / 75)
  text('Click anywhere', width / 10, height - height / 3)
  text('to capture a frame', width / 10, height - height / 3 + height / 50)
  
  text('Press SPACE BAR', width - width / 10, height - height / 3)
  text('to play the animation', width - width / 10, height - height / 3 + height / 50)
  rectMode(CORNER)
}
​
function draw() {
​
  fill(0)
  rect(0, 0, width, height / 2.9)
​
  image(video, width / 2, frameY);
​
  if (frames.length > 0) {
    tint(255, 150)
    image(frames[frames.length - 1], width / 2, frameY, frameWidth, frameHeight);
  }
  tint(255, 255)
  if (isPlaying && frames.length > 0) {
    image(frames[currentIndex], width / 2, frameY, frameWidth, frameHeight);
    if (millis() - lastFrameTime > 100) {
      currentIndex = (currentIndex + 1) % frames.length;
      lastFrameTime = millis();
    }
  }
      displayThumbnails(); // Display thumbnails
}
​
function mousePressed() {
  if (mouseX > 0 || mouseY > height / 5) {
    shutter.play()
    background(200, 150, 20)
  fill(0)
    textAlign(CENTER, CENTER)
  textSize(width / 75)
mouse.resize(width / 5, 0)
    image(mouse, width / 10, height - height /2.5)
  rectMode(CENTER)
  //rect(width - width / 10, height - height / 2.5, key.width, key.height / 2)
  key.resize(width / 5, 0)
  image(key, width - width / 12, height - height / 2.2)
    fill(255)
    textAlign(CENTER, CENTER)
  textSize(width / 75)
  text('Click anywhere', width / 10, height - height / 3)
  text('to capture a frame', width / 10, height - height / 3 + height / 50)
  
  text('Press SPACE BAR', width - width / 10, height - height / 3)
  text('to play the animation', width - width / 10, height - height / 3 + height / 50)
  rectMode(CORNER)
    frameWidth = height
  frameHeight = height / 1.125
    captureFrame();
  }
}
​
function keyPressed() {
  if (keyCode === 32) {
    hideThumbs = true
    frameWidth = width
    frameHeight = height
    frameY = height / 2
    toggleAnimation()
  }
}
​
function captureFrame() {
  frames.push(video.get());
}
​
function toggleAnimation() {
  if (isPlaying) {
    isPlaying = false;
  } else {
    if (frames.length > 0) {
      isPlaying = true;
      currentIndex = 0;
      lastFrameTime = millis();
    } else {
      alert('Capture frames first!');
    }
  }
}
​
function displayThumbnails() {
  if (hideThumbs === false) {
  const thumbnailSize = height / 7.05;
  const spacing = 10;
​
​
  textSize(width / 50)
  fill(255)
text('FIRST FRAME', width / 12, height / 25)
  fill(100)
  text('none yet', width / 12, height / 5)
  fill(255)
  text(frames.length + ' TOTAL FRAMES', width/2, height / 25)
  textSize(width / 100)
  let animationLength = frames.length / 30
  text('your animation will be ' + nfc(animationLength, 2) + ' seconds long', width / 2, height / 12)
    textSize(width / 50)
text('LAST FRAME', width - width / 12, height / 25)
    fill(100)
  text('none yet', width - width / 12, height / 5)
    if (frames.length > 0) {
    image(frames[0], thumbnailSize*1.05, (thumbnailSize/1.5) + height / 10, thumbnailSize*2, thumbnailSize*2);
    image(frames[frames.length - 1], width - (thumbnailSize*1.05), (thumbnailSize/1.5) + height / 10, thumbnailSize*2, thumbnailSize*2);
  }
  }
}
​
​