Mega video/webcam demos and assignment

README.md

@@ -55,7 +55,7 @@ This semester, you will need...
 ### LIVE VISUALS
 | DATE       | WHAT WE'LL BE DOING |
 | :--------- | :----- |
-| Feb 21     | Camera and controller input, queuing scenes |
+| Feb 21     | Camera and controller input, cueing scenes |
 | Feb 28     | Projector setup, mini-rehearsals |
 | Mar 7      | Perform your projects! |
 | **Mar 14** | **Spring break, no class!** |

Resources/GenerateBookPDF/GenerateBookPDF.pde

@@ -0,0 +1,175 @@
+/*
+  GENERATE BOOK PDF
+  Jeff Thompson | 2023 | jeffreythompson.org
+  
+  A little Processing program to create a book PDF from a
+  bunch of image files. Your files need to be named in
+  sequential order for your book with leading zeros:
+  
+  Correct:       Won't work:
+  01.png         FirstPage.png
+  02.png         NextPage.png
+  03.png         LastPage1.png
+  
+  Just run the sketch, selected your folder, and two 
+  PDFs will be created!
+  
+  Book-PREVIEW.pdf   Lets you see your book the way it
+                     will appear when done – great for
+                     testing layout etc
+  
+  Book-PRINT.pdf     File ready for printing – order will
+                     look really funky but will come out
+                     right once folded and put together
+  
+  Need to make sure your page order is correct? Try
+  changing the "debug" variable below to true. This will
+  print page numbers on everything so you can verify
+  the book is correct!
+*/
+
+import processing.pdf.*;
+import java.util.Arrays;
+
+// display page numbers (for making sure
+// everything is working right)
+boolean debug = false;
+
+void settings() {
+  // overall page size (inches x resolution) 
+  size(11*72, int(8.5*72));
+}
+
+void setup() {  
+  // let the user select the folder
+  // when selected, will run the callback function
+  // createPDF(), which is below...
+  println("Choose a folder with your book's pages – note their filenames should be in sequential order with leading zeros!");
+  selectFolder("Select the folder with your pages...", "createPDF");
+}
+
+void createPDF(File dir) {  
+  // grab a list of the files and sort by name
+  println("- looking for files...");
+  String[] files = dir.list();
+  Arrays.sort(files);
+  println("- found " + files.length);
+
+  // get the input folder as a string
+  // (and the correct path separator, depending
+  // on your operating system)
+  String path = dir.getAbsolutePath() + File.separator;
+
+  // create a preview pdf (which will appear like the book)
+  println("\n" + "Creating preview PDF...");
+  createPreviewPDF(files, path);
+  println("- done!");
+
+  // and create a print pdf (whose page order will be
+  // funky but will look right when folded
+  println("\n" + "Creating print PDF...");
+  createPrintPDF(files, path);
+  println("- done!");
+
+  // bye!
+  exit();
+}
+
+void createPreviewPDF(String[] files, String path) {
+  // create the pdf object
+  PGraphicsPDF pdf = (PGraphicsPDF) beginRecord(PDF, "Book-PREVIEW.pdf");
+  beginRecord(pdf);
+
+  // add the images to the pages
+  int x = width/2;
+  for (int i=0; i<files.length; i++) {
+    PImage img = loadImage(path + files[i]);
+    image(img, x,0, width/2,height);
+
+    // if debug is on, setup text to
+    // display the page numbers
+    if (debug) {
+      fill(0, 150, 255);
+      noStroke();
+      textSize(72);
+      textAlign(CENTER, CENTER);
+
+      text(i+1, x+width/4,height/2);  // +1 since the loop starts at 0
+    } 
+
+    // next image on the opposite side
+    // (or the next page)
+    x += width/2;
+    if (x >= width) {
+      x = 0;
+      pdf.nextPage();
+    }
+  }
+
+  // save the pdf
+  println("- saving...");
+  endRecord();
+}
+
+void createPrintPDF(String[] files, String path) {
+  // same as the preview, just a different filename!
+  PGraphicsPDF pdf = (PGraphicsPDF) beginRecord(PDF, "Book-PRINT.pdf");
+  beginRecord(pdf);
+
+  // page numbers are extra helpful here to
+  // verify our weird order is correct
+  if (debug) {
+    fill(0, 150, 255);
+    noStroke();
+    textSize(72);
+    textAlign(CENTER, CENTER);
+  }
+
+  // for the print file, every other page will 
+  // have the early pages on the right side
+  // this variable lets us flip that as we go
+  // through all the pages
+  boolean opposite = true;
+
+  // go halfway through, since we'll also draw the
+  // last pages with this loop too!
+  for (int i=0; i<files.length/2; i++) {
+
+    // load the page from the start of the book (offset
+    // by "i") and from the end (offset by the number
+    // of pages minus "i")
+    PImage start = loadImage(path + files[i]);
+    PImage end =   loadImage(path + files[files.length-1-i]);
+
+    // start image on the right, end on the left
+    if (opposite) {
+      image(start, width/2,0, width/2,height);
+      if (debug) text(i+1, width-width/4,height/2);
+
+      image(end, 0,0, width/2,height);
+      if (debug) text(files.length-i, width/4,height/2);
+    }
+    // start on the left, end on the right
+    else {
+      image(start, 0,0, width/2,height);
+      if (debug) text(i+1, width/4,height/2);
+
+      image(end, width/2,0, width/2,height);
+      if (debug) text(files.length-i, width-width/4,height/2);
+    }
+
+    // flip the boolean variable each time
+    // through the for-loop!
+    opposite = !opposite;
+
+    // only create a new page if we're *not* at
+    // the end of our loop
+    if (i < files.length/2 - 1) {
+      pdf.nextPage();
+    }    
+  }
+
+  // save the pdf
+  println("- saving...");
+  endRecord();
+}

Week05-LiveVisuals/Code/00-VideoPlayback/index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <title>Sketch</title>
+
+    <link rel="stylesheet" type="text/css" href="style.css">
+
+    <script src="libraries/p5.min.js"></script>
+    <script src="libraries/p5.sound.min.js"></script>
+  </head>
+
+  <body>
+    <script src="sketch.js"></script>
+  </body>
+</html>

Week05-LiveVisuals/Code/00-VideoPlayback/jsconfig.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "target": "es6"
+  },
+  "include": [
+    "*.js",
+    "**/*.js",
+    "/Users/jeffthompson/.vscode/extensions/samplavigne.p5-vscode-1.2.13/p5types/global.d.ts"
+  ]
+}

Week05-LiveVisuals/Code/00-VideoPlayback/sketch.js

@@ -0,0 +1,73 @@
+/*
+VIDEO PLAYBACK
+Jeff Thompson | 2023 | jeffreythompson.org
+
+We've looked at how to use images and sound with
+p5.js, but it's also easy to add video! 
+
+You'll need to make sure your video file is
+in one of these supported formats:
+
++ mp4: a great, well-supported option
++ webm: newer format, also used for images!
++ mov: sadly won't work – use an online converter
+       to make an mp4 version
+
+Sample video by Enrique Hoyos:
+https://www.pexels.com/video/drone-view-of-big-waves-rushing-to-the-shore-3571264/
+
+*/
+
+// like an image, we need a variable
+// to load the video into
+let video;
+
+// we can draw stuff on top of the
+// video too!
+let a = 0;
+
+function preload() {
+  // load the video file
+  video = createVideo('assets/waves.mp4');
+
+  // in some browsers, you may notice
+  // that a second video appears onscreen!
+  // that's because p5js actually creates
+  // a <video> html element, which then is
+  // piped into the canvas – this command
+  // ensures we can control when it's displayed
+  // inside our sketch
+  video.hide();
+}
+
+function setup() {
+  createCanvas(windowWidth, windowHeight);
+
+  // play the video in loop mode
+  // (can also call video.play() to play once)
+  video.loop();
+
+  // and set the volume to 0
+  // (1 = full volume)
+  video.volume(0);
+}
+
+function draw() { 
+  // display the video just like an image! 
+  image(video, 0,0, width,height);
+
+  // since we're drawing the video frames to
+  // the canvas, we can draw on top of it too
+  push();
+  translate(width/2, height/2);
+  rotate(a);
+  fill(255);
+  noStroke();
+  circle(0, -50, 30);  // top
+  circle(50, 0, 30);   // right
+  circle(0, 50, 30);   // bottom
+  circle(-50, 0, 30);  // left  
+  pop();
+  a += radians(2);
+}
+

Week05-LiveVisuals/Code/00-VideoPlayback/style.css

@@ -0,0 +1,8 @@
+html, body {
+  margin: 0;
+  padding: 0;
+}
+
+canvas {
+  display: block;
+}

Week05-LiveVisuals/Code/01-RemixingVideo/index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <title>Sketch</title>
+
+    <link rel="stylesheet" type="text/css" href="style.css">
+
+    <script src="libraries/p5.min.js"></script>
+    <script src="libraries/p5.sound.min.js"></script>
+  </head>
+
+  <body>
+    <script src="sketch.js"></script>
+  </body>
+</html>

Week05-LiveVisuals/Code/01-RemixingVideo/jsconfig.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "target": "es6"
+  },
+  "include": [
+    "*.js",
+    "**/*.js",
+    "/Users/jeffthompson/.vscode/extensions/samplavigne.p5-vscode-1.2.13/p5types/global.d.ts"
+  ]
+}