Would be very grateful for some help with this conversion!

Processing Libraries
1

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

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

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();
  }
}
2

Hello,

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…

:)

1 Like
3

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