> For the complete documentation index, see [llms.txt](https://icl.doyoki.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://icl.doyoki.com/week-09.md).

# Week 09

## Load Images

```
var img;  
var k = 2;

function setup() {
  createCanvas(720, 400);
  
  img = loadImage('images/car' + k + '.jpg');
  console.log(k);
}

function draw() {
  image(img, 0, 0, width, height);
}
```

<https://editor.p5js.org/kdoodoo/sketches/r1nYPIa27>

## Preload()

```
var img;  
var k = 3;


function preload(){
  img = loadImage('images/car' + k + '.jpg');

}


function setup() {
  createCanvas(720, 400);  
}


function draw() {
  image(img, 0, 0, width, height);
}

```

<https://editor.p5js.org/kdoodoo/sketches/H1n6OITn7>

## createCapture()

It will create separate DOM element&#x20;

```
<canvas>
</canvas>

<video>
</video>
```

## Simply ADD Video as an DOM element

```
  createCapture(VIDEO);
```

<https://editor.p5js.org/kdoodoo/sketches/rkoa9npnX>

### You can add your video DOM on to the Canvas with image();

```
var video;

  function setup() {
  createCanvas(320, 240);
  video = createCapture(VIDEO);
  video.size(320,240);  
}


function draw() {
  background(220);
  image(video, 0, 0,320,240);
}
```

<https://editor.p5js.org/kdoodoo/sketches/SkiGXTThQ>

## tint()

<https://editor.p5js.org/kdoodoo/sketches/SJi3mp627>

```
var video;
function setup() {
  createCanvas(320, 240);
  video = createCapture(VIDEO);
  video.size(320,240);  
}

function draw() {
  tint(255,0,255);
  image(video, 0, 0,320,240);
}
```

### hide()

```
video.hide();
```

### Http VS Https&#x20;

https is necessary for your website to access your camera.&#x20;

## Simple Snapshot Function

```
var video;

  function setup() {
  createCanvas(320, 240);
  background(255,255,255);  
  video = createCapture(VIDEO);
  video.size(320,240);  
  button = createButton("Shot!!");  
  button.mousePressed(takeashot);
    
}

function takeashot(){
 image(video, 0, 0,320,240);

}

function draw() {
  
 //  image(video, 0, 0,320,240);
  
}
```

<https://editor.p5js.org/kdoodoo/sketches/SyaDMA6hX>

### Snapshot in an Array

<https://editor.p5js.org/kdoodoo/sketches/SJVVFRa2m>

```
var video;
var button;
var snapshots = [];

function setup() {
  createCanvas(480, 240);
  background(255,255,255);  
  video = createCapture(VIDEO);
  video.size(320,240);  
  button = createButton("Shot!!");  
  button.mousePressed(takeshot);    
}

function takeshot() {
  snapshots.push(video.get());
}
 
function draw() {
  var x = 0;
  var y = 0; 
  var w = 80;
  var h = 60;
  
  for(i=0;i<snapshots.length;i++) {
    image(snapshots[i], x, y, w, h);
    x = x + w;
    if(x > width){
      x = 0;
      y = y + h;
    }
  }
  
}





```

### Other Example

<https://editor.p5js.org/kdoodoo/sketches/ryujhCpnX>

```
var video;
var button;
var snapshots = [];
var counter = 0;
var vScale = 4;
var total;

function setup() {
  createCanvas(800, 300);
  background(51);
  video = createCapture(VIDEO);
  video.size(320, 240);
  // button = createButton('snap');
  // button.mousePressed(takesnap);
}

function draw() {
  var w = 80;
  var h = 60;
  var x = 0;
  var y = 0;

  // How many cells fit in the canvas
  total = floor(width / w) * floor(height / h);

  snapshots[counter] = video.get();
  counter++;
  if (counter == total) {
    counter = 0;
  }

  for (var i = 0; i < snapshots.length; i++) {
    //tint(255, 50);
    var index = (i + frameCount) % snapshots.length;
    image(snapshots[index], x, y, w, h);
    x = x + w;
    if (x >= width) {
      x = 0;
      y = y + h;
    }
  }
}


```

## Audio

### AudioIn()

<https://editor.p5js.org/kdoodoo/sketches/H1Z-0Cahm>

```

var mic;

function setup() {
  createCanvas(500, 500);

  // 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();
  fill(255,0,255);
  stroke(0);

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

```

## Simple Music Player

<https://editor.p5js.org/kdoodoo/sketches/ry9RJJAhQ>

```
var music;

function setup() {
  song = loadSound('sound/intmus3.mp3');
  createCanvas(400,400);
  background(255,0,255);
}

function mousePressed() {
  if ( song.isPlaying() ) { // .isPlaying() returns a boolean
    song.stop();
    var r = random(0,255);
    var b = random(100,255);
    
    background(r,0,b);
  } else {
    song.play();
    background(100,100,100);
  }
}

```

## Face Tracker

<https://editor.p5js.org/kdoodoo/sketches/HksKmt0h7>

<https://github.com/auduno/clmtrackr>

## Assignment: Either Video OR Sound

<https://goo.gl/forms/HXuxh1lnSbdwoLh03>