# Would be very grateful for some help with this conversion!

**URL:** <https://discourse.processing.org/t/would-be-very-grateful-for-some-help-with-this-conversion/32815>\
**Category:** Libraries\
**Created:** [October 13, 2021, 11:07pm UTC](https://discourse.processing.org/t/would-be-very-grateful-for-some-help-with-this-conversion/32815 "2021-10-13T23:07:39Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![YourLocalGrandma](https://avatars.discourse-cdn.com/v4/letter/y/c4cdca/32.png) [@YourLocalGrandma](https://discourse.processing.org/u/YourLocalGrandma)\
**Post date:** [October 13, 2021, 11:07pm UTC](https://discourse.processing.org/t/would-be-very-grateful-for-some-help-with-this-conversion/32815/1 "2021-10-13T23:07:39Z")

</div>

Hi guys, I am trying to get this effect going in .pde that I saw in .js, and have been struggling big time in making it work. I am pretty new at this so any help would be very much appreciated! Thanks

.js code

```auto
var img;

function preload() {
	// 500 x 500 px
	//img = loadImage("nasa_buzz.jpg");
}

function setup() {
	createCanvas(1280, 920);
	background(0);
	
	img = createCapture(VIDEO);
  img.size(1280, 920);
  img.hide();
}

function draw() {
	background(0);
	
	img.loadPixels(LINES);

	for (var y = 0; y < img.height; y += 8) {
		beginShape();
		for (var x = 0; x < img.width; x += 8) {

      var pixel = img.pixels[(y*img.width+x)*4];
			
			stroke(255);
			strokeWeight(2);
			noFill();
			var c = map(pixel, 0, 255, 0, 20);
			curveVertex(x, y-c);
		
		}
		endShape();
	}
}

```

My attempt so far in .pde

```auto
import processing.video.*;

Capture cam;

void setup() {
  size(displayWidth, displayHeight);
  cam = new Capture(this, displayWidth, displayHeight, 30);
  cam.start();
}

void draw() {

  cam.read();
  image(cam, 0, 0);

  cam.loadPixels();

  for (int y = 0; y < cam.height; y += 8) {
    beginShape();
    for (int x = 0; x < cam.width; x += 8) {

      int pixel = cam.pixels[(y*cam.width+x)*4];

      stroke(255);
      strokeWeight(2);
      noFill();
      float c = map(pixel, 0, 255, 0, 20);
      curveVertex(x, y-c);
    }
    endShape();
  }
}

```

---

<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:** [October 14, 2021, 12:19am UTC](https://discourse.processing.org/t/would-be-very-grateful-for-some-help-with-this-conversion/32815/2 "2021-10-14T00:19:27Z")

</div>

Hello,

```auto
import processing.video.*;

Capture cam;

void setup() 
  {
  size(640, 480);
  cam = new Capture(this, 640, 480);
  cam.start();
  
  stroke(255);
  strokeWeight(2);
  noFill();
  }

void draw() 
  {
  println(frameRate);  
  background(0);
  cam.read();

  cam.loadPixels();

  for (int y = 0; y < cam.height; y += 10) 
    {
    //beginShape();
    for (int x = 0; x < cam.width; x += 5) 
      {
      int pixel = cam.pixels[x + y*cam.width];
      float c = map(brightness(pixel), 0, 255, 0, 20); // Look this up!
      point(x, y + c);
      }
    //endShape();
    }
  }

```

Look up the tutorials, examples and references in p5.js and Processing to understand what I did here.

Still needs work…

`:)`

---

<div class="post-metadata">

**Author:** ![YourLocalGrandma](https://avatars.discourse-cdn.com/v4/letter/y/c4cdca/32.png) [@YourLocalGrandma](https://discourse.processing.org/u/YourLocalGrandma)\
**Post date:** [October 14, 2021, 1:05am UTC](https://discourse.processing.org/t/would-be-very-grateful-for-some-help-with-this-conversion/32815/3 "2021-10-14T01:05:18Z")

</div>

Amazing! Thank you so much for your help really appreciate it!