# How can we draw a graphe from a video capture ?!

**URL:** <https://discourse.processing.org/t/how-can-we-draw-a-graphe-from-a-video-capture/17286>\
**Category:** Libraries\
**Created:** [January 23, 2020, 4:24pm UTC](https://discourse.processing.org/t/how-can-we-draw-a-graphe-from-a-video-capture/17286 "2020-01-23T16:24:58Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Azdn](https://avatars.discourse-cdn.com/v4/letter/a/bc8723/32.png) [@Azdn](https://discourse.processing.org/u/Azdn)\
**Post date:** [January 23, 2020, 4:24pm UTC](https://discourse.processing.org/t/how-can-we-draw-a-graphe-from-a-video-capture/17286/1 "2020-01-23T16:24:58Z")

</div>

Hi !!  
I want to draw a graph that processes data from a video capture  
something like RGB values ​​based on pixel location or brightness based on pixel location …  
My project is blocked in this step so i will be so thankful for ur help🙏🏼

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [January 24, 2020, 4:31am UTC](https://discourse.processing.org/t/how-can-we-draw-a-graphe-from-a-video-capture/17286/2 "2020-01-24T04:31:53Z")

</div>

you can use the  
[https://processing.org/reference/loadPixels\_.html](https://processing.org/reference/loadPixels_.html)  
[https://processing.org/reference/pixels.html](https://processing.org/reference/pixels.html)

on the image ( not only on the canvas )

but possibly start with a picture first instead with a cam stream

---

<div class="post-metadata">

**Author:** ![Azdn](https://avatars.discourse-cdn.com/v4/letter/a/bc8723/32.png) [@Azdn](https://discourse.processing.org/u/Azdn)\
**Post date:** [January 24, 2020, 10:19am UTC](https://discourse.processing.org/t/how-can-we-draw-a-graphe-from-a-video-capture/17286/3 "2020-01-24T10:19:23Z")

</div>

I need to draw a graph with this informations about pixels … this is my problem  
Anyway thx a loot ! 🙂

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [January 24, 2020, 11:04am UTC](https://discourse.processing.org/t/how-can-we-draw-a-graphe-from-a-video-capture/17286/4 "2020-01-24T11:04:01Z")

</div>

after above 2 steps ( getting the color ‘c’ of all pixels ( in a FOR loop ) over all ( OF THE IMAGE ) )  
you can read out from that color red(c ) green(c ) blue(c ) or hue(c ) brightness(c ) saturation(c )  
compare it with limits and do statistic on it …  
when you have that resulting array of information, you can show your code here  
if you need help about doing a graph from it.

can you already give a example how that data you want to graph could look like?

* * *

does the PDE examples give you some idea?  
PDE / File / Examples / Libraries / Video / Capture /

- BrightnessTracking
- HsvSpace

---

<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:** [January 24, 2020, 2:04pm UTC](https://discourse.processing.org/t/how-can-we-draw-a-graphe-from-a-video-capture/17286/5 "2020-01-24T14:04:34Z")

</div>

Hello,

If you know the pixel location and have some data (RGB or HSV) you can plot some nice graphs; x, y for pixel location and z for data and then rotate this graph to view it.

[https://processing.org/](https://processing.org/) is a good place to start and has tutorials, references, examples and lists books available.

YouTube:

> **[The Coding Train](https://www.youtube.com/channel/UCvjgXvBlbQiydffZU7m1_aw)**
>
> All aboard! The Coding Train is on its way with creative coding video tutorials on subjects ranging from the basics of programming languages like JavaScript to algorithmic art, machine learning, simulation, generative poetry, and more. Choo choo!

🙂

---

<div class="post-metadata">

**Author:** ![Azdn](https://avatars.discourse-cdn.com/v4/letter/a/bc8723/32.png) [@Azdn](https://discourse.processing.org/u/Azdn)\
**Post date:** [January 24, 2020, 2:35pm UTC](https://discourse.processing.org/t/how-can-we-draw-a-graphe-from-a-video-capture/17286/6 "2020-01-24T14:35:37Z")

</div>

Yeah !  
I Need get something like that ( second image ) … ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/6/67021743545f4361ae469127d591098d96edcf61.jpeg)

Thanks a looot !

---

<div class="post-metadata">

**Author:** ![Azdn](https://avatars.discourse-cdn.com/v4/letter/a/bc8723/32.png) [@Azdn](https://discourse.processing.org/u/Azdn)\
**Post date:** [January 24, 2020, 2:49pm UTC](https://discourse.processing.org/t/how-can-we-draw-a-graphe-from-a-video-capture/17286/7 "2020-01-24T14:49:14Z")

</div>

Otherwise  
I need just the code who can get Brightness values for each pixel & draw a graph like : Brightnes values in x axis end pixel’s location in y

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [January 25, 2020, 2:09am UTC](https://discourse.processing.org/t/how-can-we-draw-a-graphe-from-a-video-capture/17286/8 "2020-01-25T02:09:01Z")

</div>

did you try already the 2 examples i show you?  
that gives you running ready code to start with?

but actually can start from basic example:  
GettingStartedCapture

and get like the pixel color of mouse position

```auto
/**
 * Getting Started with Capture.
 * 
 * Reading and displaying an image from an attached Capture device. 
 */

import processing.video.*;

Capture cam;
color onepix;

void setup() {
  size(640, 480);
  String[] cameras = Capture.list();
  if (cameras == null) {
    println("Failed to retrieve the list of available cameras, will try the default...");
    cam = new Capture(this, 640, 480);
  } if (cameras.length == 0) {
    println("There are no cameras available for capture.");
    exit();
  } else {
    println("Available cameras:");
    printArray(cameras);

    // The camera can be initialized directly using an element
    // from the array returned by list():
    cam = new Capture(this, cameras[0]); // select according list
    // Or, the settings can be defined based on the text in the list
    //cam = new Capture(this, 640, 480, "Built-in iSight", 30);
    // Start capturing the images from the camera
    cam.start();
  }
}

void draw() {
  if (cam.available() == true) {
    cam.read();
  }
  //image(cam, 0, 0, width, height);
  // The following does the same as the above image() line, but 
  // is faster when just drawing the image without any additional 
  // resizing, transformations, or tint.
  set(0, 0, cam);
  loadPixels();
  for ( int x = 0; x < pixelWidth;x++) {
    for ( int y = 0; y < pixelHeight;y++) {
      color c = pixels[x*y]; // read all
      if ( mouseX == x && mouseY == y ) onepix = c;
    }
  }
  println("x: ", mouseX," y: ", mouseY," brightness: ", brightness(onepix) );
}

```

---

<div class="post-metadata">

**Author:** ![Azdn](https://avatars.discourse-cdn.com/v4/letter/a/bc8723/32.png) [@Azdn](https://discourse.processing.org/u/Azdn)\
**Post date:** [January 25, 2020, 11:45am UTC](https://discourse.processing.org/t/how-can-we-draw-a-graphe-from-a-video-capture/17286/9 "2020-01-25T11:45:30Z")

</div>

thank you very much !  
that’s a bit what I’m looking for, I just have to plot these values ​​in a curve

I think that I must neglect the coordinates according to y and trace the brightness according to coordinate x

But i don’t know how 🤷🏻‍♂️

Thx again 🙏🏼