# 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>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://icl.doyoki.com/week-09.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.