gistfile1.js

/////////////////////////////////////////////////////////////////
// basic button

var button;

function setup() {

  createCanvas(640, 480);
  noLoop();
  colorMode(HSB);
  noStroke();

  button = createButton('change');
  button.mousePressed(change);
}

function change() {
  background(random(255), 255, 255);
  fill(random(255), 255, 255);
  ellipse(width/2, height/2, 200, 200);
}


/////////////////////////////////////////////////////////////////
// position button


var button;

function setup() {

  createCanvas(640, 480);
  noLoop();
  colorMode(HSB);
  noStroke();

  button = createButton('change');
  button.mousePressed(change);
  button.position(20, 20);
}

function change() {
  background(random(255), 255, 255);
  fill(random(255), 255, 255);
  ellipse(width/2, height/2, 200, 200);
}


/////////////////////////////////////////////////////////////////
// position canvas

var button;
var x = 0;
var y = 0;
var cnv;

function setup() {

  cnv = createCanvas(640, 480);
  cnv.position(0, 0);
  noLoop();
  colorMode(HSB);
  noStroke();

  button = createButton('change');
  button.mousePressed(change);
  button.position(20, 20);
}

function draw() {
  background(0);
}

function change() {
  background(random(255), 255, 255);
  fill(random(255), 255, 255);
  ellipse(width/2, height/2, 200, 200);

  x += random(-3, 10);
  y += random(-3, 10);
  cnv.position(x, y);

}



/////////////////////////////////////////////////////////////////
// textbox and button


var button;

function setup() {

  // create canvas
  createCanvas(710, 400);

  input = createInput();
  input.position(20, 65);

  button = createButton('submit');
  button.position(150, 65);
  button.mousePressed(greet);

  greeting = createP('what is your name?');
  greeting.position(20, 5);

  textAlign(CENTER)
  textSize(80);
  stroke(0);
  fill(255);
}

function greet() {
  var name = input.value();
  greeting.html('hello '+name+'!');
  input.value('');

  for (var i=0; i<200; i++) {
    push();
    translate(random(width), random(height));
    rotate(random(2*PI));
    text(name, 0, 0);
    pop();
  }
}



/////////////////////////////////////////////////////////////////
// slider

var rSlider, gSlider, bSlider;

function setup() {
  // create canvas
  createCanvas(710, 400);
  textSize(15)
  noStroke();

  // create sliders
  rSlider = createSlider(0, 255, 100);
  rSlider.position(20, 20);
  gSlider = createSlider(0, 255, 0);
  gSlider.position(20, 50);
  bSlider = createSlider(0, 255, 255);
  bSlider.position(20, 80);
}

function draw() {
  var r = rSlider.value();
  var g = gSlider.value();
  var b = bSlider.value();
  background(r, g, b);
  text("red", 165, 35);
  text("green", 165, 65);
  text("blue", 165, 95);
}





/////////////////////////////////////////////////////////////////
// video, button

var playing = false;
var fingers;
var button;


function setup() {
  fingers = createVideo('assets/fingers.mov';
  button = createButton('toggle');
  button.mousePressed(toggleVid); // attach button listener
}

// plays or pauses the video depending on current state
function toggleVid() {
  if (playing) {
    fingers.pause();
  } else {
    fingers.loop();
  }
  playing = !playing;
}




/////////////////////////////////////////////////////////////////
// html method

var playing = false;
var fingers;
var button;


function setup() {
  fingers = createVideo('assets/fingers.mov';
  button = createButton('play');
  button.mousePressed(toggleVid); // attach button listener
}

// plays or pauses the video depending on current state
function toggleVid() {
  if (playing) {
    fingers.pause();
    button.html('play');
  } else {
    fingers.loop();
    button.html('pause');
  }
  playing = !playing;
}



/////////////////////////////////////////////////////////////////
// Draw video to canvas.


var fingers;

function setup() {
  createCanvas(710, 400);
  // specify multiple formats for different browsers
  fingers = createVideo('assets/fingers.mov');
  fingers.loop(); // set the video to loop and start playing
  fingers.hide(); // by default video shows up in separate dom
                  // element. hide it and draw it to the canvas
                  // instead
}

function draw() {
  background(150);
  image(fingers,10,10); // draw the video frame to canvas
  filter('GRAY');
  image(fingers,150,150); // draw a second copy to canvas
}


/////////////////////////////////////////////////////////////////
// Manipulate pixels of video.

var fingers;

function setup() {
  createCanvas(640, 480);
  // specify multiple formats for different browsers
  fingers = createVideo('fingers.mov');
  fingers.loop();
  fingers.hide();
  noStroke();
  fill(0);
}

function draw() {
  background(255);
  fingers.loadPixels();
  var stepSize = round(map(mouseX, 0, width, 6, 32));
  for (var y=0; y<height; y+=stepSize) {
    for (var x=0; x<width; x+=stepSize) {
      var i = y * width + x;
      var darkness = (255 - fingers.pixels[i*4]) / 255;
      var radius = stepSize * darkness;
      ellipse(x, y, radius, radius);
    }
  }
}



/////////////////////////////////////////////////////////////////
// swap webcam


var capture;

function setup() {
  createCanvas(640, 480);
  // specify multiple formats for different browsers
  capture = createCapture(VIDEO);
  noStroke();
  fill(0);
}

function draw() {
  background(255);
  capture.loadPixels();
  var stepSize = round(map(mouseX, 0, width, 6, 32));
  for (var y=0; y<height; y+=stepSize) {
    for (var x=0; x<width; x+=stepSize) {
      var i = y * width + x;
      var darkness = (255 - capture.pixels[i*4]) / 255;
      var radius = stepSize * darkness;
      ellipse(x, y, radius, radius);
    }
  }
}


/////////////////////////////////////////////////////////////////
// audio in

var input;
var analyzer;

function setup() {
  createCanvas(640, 480);

  // Create an Audio input
  mic = new p5.AudioIn();

  // start the Audio Input.
  // By default, it does not .connect() (to the computer speakers)
  mic.start();
}

function draw() {
  background(200);

  // Get the overall volume (between 0 and 1.0)
  var vol = mic.getLevel();

  // Draw an ellipse with height based on volume
  var h = map(vol, 0, 0.5, height, 0);
  ellipse(width/2, h - 25, 50, 50);
}


/////////////////////////////////////////////////////////////////
// swap in mic with webcam

var capture;
var mic;

function setup() {
  createCanvas(640, 480);
  // specify multiple formats for different browsers
  capture = createCapture(VIDEO);
  noStroke();
  fill(0);

  mic = new p5.AudioIn();
  mic.start();
}

function draw() {
  background(255);
  capture.loadPixels();
  var stepSize = round(map(mic.getLevel(), 0, 0.5, 6, 32));

  for (var y=0; y<height; y+=stepSize) {
    for (var x=0; x<width; x+=stepSize) {
      var i = y * width + x;
      var darkness = (255 - capture.pixels[i*4]) / 255;
      var radius = stepSize * darkness;
      ellipse(x, y, radius, radius);
    }
  }
}