# Webcam interaction (colour component)

**URL:** https://discourse.processing.org/t/webcam-interaction-colour-component/30577
**Category:** Coding Questions
**Created:** [June 8, 2021, 5:16pm UTC](https://discourse.processing.org/t/webcam-interaction-colour-component/30577 "2021-06-08T17:16:51Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![Sarahjjt](https://avatars.discourse-cdn.com/v4/letter/s/ec9cab/32.png) [@Sarahjjt](https://discourse.processing.org/u/Sarahjjt)
#### Post date: [June 8, 2021, 5:16pm UTC](https://discourse.processing.org/t/webcam-interaction-colour-component/30577/1 "2021-06-08T17:16:51Z")

</div>

Hi there, I’m working on an interactive webcam design, everything seems to be working okay except I’m stuck on how to get the local colours to reflect what’s on the camera. I’d really appreciate your help!

```auto

let video;

function setup() {
  createCanvas(windowWidth, windowHeight);

  // webcam capture (at the size of the window)
  video = createCapture(VIDEO);
  video.size(width, height);
  video.hide();
}

function draw() { 
  background(255);
  
  let gridSize = int(map(mouseX, 0,width, 15,50));

  // the video has pixels just like an image!
  video.loadPixels();
  for (let y=0; y<video.height; y+=gridSize) {
    for (let x=0; x<video.width; x+=gridSize) {
      
      // at the current position, get the red
      // value (an approximation for brightness)
      // and use it to create the diameter
      let index = (y * video.width + x) * 4;
      let r = video.pixels[index];
      let dia = map(r, 0,255, gridSize,2);
      
      // draw a circle at the current location
      // using the diameter we calculated
      fill(0);
      noStroke();
      circle(x+gridSize/2,y+gridSize/2, dia);
    }
  }
  
}

```

---

<div class="post-metadata">

### Author: ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)
#### Post date: [June 8, 2021, 5:38pm UTC](https://discourse.processing.org/t/webcam-interaction-colour-component/30577/2 "2021-06-08T17:38:22Z")

</div>

Hello,

I changed topic to p5.js category.

See example here:

> [@Alternative to get() for faster performance?](https://discourse.processing.org/t/alternative-to-get-for-faster-performance/30228/8):
>
> Hello, This topic inspired me! Something I worked on: 
> 
> > **Example of random tiling \< Click here to see code!**
> >
> > // Pixel Manipulation // v1.0.0 // GLV 2021-05-30 let img; let cap; function setup() { createCanvas(640, 480); // Set to video size img = createGraphics(width, height); pixelDensity(1); img.pixelDensity(1); cap = createCapture(VIDEO); cap.hide(); //d = pixelDensity(); // Future! See references. } function draw() { cap.loadPixels(); img.loadPi…

Example may be a bit complicated (moving tiles) but I had to sort out color for pixels and learned this recently.

References:  
[https://p5js.org/reference/#/p5.Image/pixels](https://p5js.org/reference/#/p5.Image/pixels)

Have fun!

`:)`

---

<div class="post-metadata">

### Author: ![Sarahjjt](https://avatars.discourse-cdn.com/v4/letter/s/ec9cab/32.png) [@Sarahjjt](https://discourse.processing.org/u/Sarahjjt)
#### Post date: [June 9, 2021, 7:57am UTC](https://discourse.processing.org/t/webcam-interaction-colour-component/30577/3 "2021-06-09T07:57:20Z")

</div>

Thank you so much! Your design is really cool 🙂