Converting Processing to Processing.js... please help?

Quinny · July 26, 2020, 10:32am

Hello,

I’m trying to convert a sketch made in Processing.js to standard Processing so I can port it as a canvass, using screen broadcast, onto surfaces in Unity.

I’ve made all the obvious changes like var to int etc., but i’m struggling to convert a function preload section of the code, getting an “unexpected token: {” error on line 29 of my code.

I have tried to research a solution but while there are lots of resources for converting Processing to Processing.js, there are relatively few the other way around because it’s uncommon practise.

Could you please give me a steer on this conversion?

Or perhaps i’m barking up the wrong tree and there is an easier way to achieve what i’m aiming for?

Any help would be appreciated - thank you!

Here is the original Processing.js code:

//Main sketch

'use strict';

// image is whatever I found online. I didn't make it.

let segments = [];
let numSegments = 60;
let segmentResolution = 400;
let segmentLength;
let segmentSpacing;
let heightScale = 150;
let fadeIn = 0;
let speed = 0.51;
let mp = false;
let mouseIsDown = false;

let loaded = false;
let img;
let tt = 0;
let glitchFreq = 0.5;

let now, lastTime = 0;

function preload() {
  loadImage('img.jpg', function(_img) {
    img = _img;
    img.loadPixels();
    loaded = true;
    segmentSpacing = (img.height / numSegments);
    segmentLength = img.width;

    for (let i = 0; i < numSegments; i++) {
      segments.push(new Segment({
        pos: { x: 0, y: i },
        len: segmentLength
      }));

    }
  });
};

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

function update(dt) {
  segments.forEach(
    s => {
      s.update(dt)
    }
  );
}

function mousePressed(){
	mouseIsDown = true;
	glitchFreq = 0.3;
}

function mouseReleased(){
	mouseIsDown = false;
	glitchFreq = 0.5;
}

function draw() {	
  if (!loaded) return;

  let dt = (millis() - lastTime) / 1000;
  lastTime = millis();
  tt += dt;

  update(dt);

	fill(0, 250);
	noStroke();
	rect(0,0, windowWidth, windowHeight);

  let gridHeight = numSegments * segmentSpacing;	

  push();
	heightScale = 60 + (sin(millis()/1000) / TAU) * 50;
  translate(windowWidth / 2 - img.width, windowHeight / 2 - img.height / 2 - 100);
  scale(2, 2);
	
	if(mouseIsDown){
		tint(55,0,0);
		image(img, 0, 0);
	}
	else{
		tint(255);
	}
  
  let trans = false;

  let ss = 0;

  segments.forEach(s => {
    ss++;
    // let n = noise(millis()/200 + s.dist/500);
    let n = 0;

    if (ss > 30) {
      n = noise(millis() / 200);
			// ss / numSegments
    }

    /*if (n > glitchFreq && trans === false) {
      push();
      translate(40, 0);
      trans = true;
    }*/
		
    s.draw();
  });

  if (trans) {
    pop();
  }

  pop();
}


//Tab 2


let id = 0;

class Segment {
  constructor(cfg) {
    Object.assign(this, cfg);

    this.t = 0;
    this.dist = 0;
    this.id = id++;
    this.nextNoise = 0;
    // [x,y, x,y, ...]
    // add 2 for a point starting at the very start of the viewport and one of the end.
    this.vertices = new Float32Array(segmentResolution * 2 + 2);

    this.update(0);
  }

  update(dt) {
    this.t += dt * 1;
    fadeIn += dt * .008;
    fadeIn = constrain(fadeIn, 0, 1);

    let xSpacing = this.len / segmentResolution;

    this.pos.y -= dt * speed;
    this.dist += dt * speed;
    //if (this.pos.y > img.height / segmentSpacing) {
    //  this.pos.y -= img.height / segmentSpacing;
    //}
    if (this.pos.y < 0) {
      this.pos.y += img.height / segmentSpacing;
    }

    for (let i = 0; i < this.vertices.length; i += 2) {

      let x = (i / 2) * xSpacing;
      let y = this.pos.y * segmentSpacing;

      if (mp) {
        let d = dist(x, y, (mouseX - windowWidth / 2 + windowWidth / 4 + 50) / 2, (mouseY - windowHeight / 2 + windowHeight / 4 + 250) / 2);
        if (d < 40) {
          let a = (8 / d) * 8;
          y += (a > 50) ? 50 : a;
        }
      }

      let col = img.get(x, y);
      let intensity = col[0] / 255;

      this.vertices[i + 0] = x;
      this.vertices[i + 1] = y - (intensity) * heightScale;
    }

  }

  draw() {
    strokeWeight(1);

    let waves = (sin(this.pos.y / 2.0 + this.t ) / PI) + 0.5;
    let vignette = sin(this.pos.y * segmentSpacing / img.height * PI);
    stroke(255, 255 * fadeIn * waves * vignette + 50 * vignette);
    // fill(0);
    noFill();

    beginShape();
    for (let i = 0; i < this.vertices.length; i += 2) {
      if (i === 0) {
        vertex(-1000, this.vertices[i + 1]);
      } else if (i + 2 === this.vertices.length) {
        vertex(10000, this.vertices[i + 1]);
      } else {
        vertex(this.vertices[i + 0], this.vertices[i + 1]);

        if (this.id < numSegments - 1) {
          let s = segments[id + 1];
          vertex(this.vertices[i + 0], this.vertices[i + 1]);
        }
      }
    }
    endShape();

    //    beginShape(LINES);
    //    if(this.id < numSegments-1){
    //      let nextSeg = segments[this.id+1];

    //      for (let i = 0; i < this.vertices.length; i += 2) {
    //         vertex(this.vertices[i + 0], this.vertices[i + 1]);
    //        vertex(nextSeg.vertices[i + 0], nextSeg.vertices[i + 1]); 
    //      }
    //     }
    //    endShape();
    //    stroke(45,255);
    //    push();
    //    translate(7, 7);
    //    beginShape();
    //     for (let i = 0; i < this.vertices.length; i += 2) {
    //       vertex(this.vertices[i + 0], this.vertices[i + 1]);
    //     }
    //     endShape();
    //    pop();
  }
}

And this is my conversion to Processing so far:

//Main sketch

int[] segments;
int numSegments = 60;
int segmentResolution = 400;
int segmentLength;
int segmentSpacing;
int heightScale = 150;
int fadeIn = 0;
float speed = 0.51;
boolean mp = false;
boolean mouseIsDown = false;

boolean loaded = false;
int img;
int tt = 0;
float glitchFreq = 0.5;

int now, lastTime = 0;


void setup() {
  size (500, 500);
};

function preload() {
    loadImage("img.jpg", function(_img) {
    img = _img;
    img.loadPixels();
    loaded = true;
    segmentSpacing = (img.height / numSegments);
    segmentLength = img.width;

    for (let i = 0; i < numSegments; i++) {
      segments.push(new Segment({
        pos: { x: 0, y: i },
        len: segmentLength
      }));

    }
  });
};


void update(dt) {
  segments.forEach(
    s => {
      s.update(dt)
    }
  );
}

void mousePressed(){
  mouseIsDown = true;
  glitchFreq = 0.3;
}

void mouseReleased(){
  mouseIsDown = false;
  glitchFreq = 0.5;
}

void draw() {  
  if (!loaded) return;

  int dt = (millis() - lastTime) / 1000;
  lastTime = millis();
  tt += dt;

 void update(dt);

  fill(0, 250);
  noStroke();
  rect(0,0, width, height);

  int gridHeight = numSegments * segmentSpacing;  

  push();
  heightScale = 60 + (sin(millis()/1000) / TAU) * 50;
  translate(width / 2 - img.width, height / 2 - img.height / 2 - 100);
  scale(2, 2);
  
  if(mouseIsDown){
    tint(55,0,0);
    image(img, 0, 0);
  }
  else{
    tint(255);
  }
  
  boolean trans = false;

  int ss = 0;

  segments.forEach(s => {
    ss++;
    // let n = noise(millis()/200 + s.dist/500);
    int n = 0;

    if (ss > 30) {
      n = noise(millis() / 200);
      // ss / numSegments
    }

    /*if (n > glitchFreq && trans === false) {
      push();
      translate(40, 0);
      trans = true;
    }*/
    
    s.draw();
  });

  if (trans) {
    pop();
  }

  pop();
}


//Tab 2:


int id = 0;

class Segment {
  constructor(cfg) {
    Object.assign(this, cfg);

    this.t = 0;
    this.dist = 0;
    this.id = id++;
    this.nextNoise = 0;
    // [x,y, x,y, ...]
    // add 2 for a point starting at the very start of the viewport and one of the end.
    this.vertices = new Float32Array(segmentResolution * 2 + 2);

    this.update(0);
  }

 void update(dt) {
    this.t += dt * 1;
    fadeIn += dt * .008;
    fadeIn = constrain(fadeIn, 0, 1);

    int xSpacing = this.len / segmentResolution;

    this.pos.y -= dt * speed;
    this.dist += dt * speed;
    //if (this.pos.y > img.height / segmentSpacing) {
    //  this.pos.y -= img.height / segmentSpacing;
    //}
    if (this.pos.y < 0) {
      this.pos.y += img.height / segmentSpacing;
    }

    for (int i = 0; i < this.vertices.length; i += 2) {

      int x = (i / 2) * xSpacing;
      int y = this.pos.y * segmentSpacing;

      if (mp) {
        let d = dist(x, y, (mouseX - width / 2 + width / 4 + 50) / 2, (mouseY - height / 2 + windowHeight / 4 + 250) / 2);
        if (d < 40) {
          int a = (8 / d) * 8;
          y += (a > 50) ? 50 : a;
        }
      }

      int col = img.get(x, y);
      int intensity = col[0] / 255;

      this.vertices[i + 0] = x;
      this.vertices[i + 1] = y - (intensity) * heightScale;
    }

  }

  void draw() {
    strokeWeight(1);

    float waves = (sin(this.pos.y / 2.0 + this.t ) / PI) + 0.5;
    int vignette = sin(this.pos.y * segmentSpacing / img.height * PI);
    stroke(255, 255 * fadeIn * waves * vignette + 50 * vignette);
    // fill(0);
    noFill();

    beginShape();
    for (let i = 0; i < this.vertices.length; i += 2) {
      if (i === 0) {
        vertex(-1000, this.vertices[i + 1]);
      } else if (i + 2 === this.vertices.length) {
        vertex(10000, this.vertices[i + 1]);
      } else {
        vertex(this.vertices[i + 0], this.vertices[i + 1]);

        if (this.id < numSegments - 1) {
          int s = segments[id + 1];
          vertex(this.vertices[i + 0], this.vertices[i + 1]);
        }
      }
    }
    endShape();

    //    beginShape(LINES);
    //    if(this.id < numSegments-1){
    //      let nextSeg = segments[this.id+1];

    //      for (let i = 0; i < this.vertices.length; i += 2) {
    //         vertex(this.vertices[i + 0], this.vertices[i + 1]);
    //        vertex(nextSeg.vertices[i + 0], nextSeg.vertices[i + 1]); 
    //      }
    //     }
    //    endShape();
    //    stroke(45,255);
    //    push();
    //    translate(7, 7);
    //    beginShape();
    //     for (let i = 0; i < this.vertices.length; i += 2) {
    //       vertex(this.vertices[i + 0], this.vertices[i + 1]);
    //     }
    //     endShape();
    //    pop();
  }
}

Quinny · July 26, 2020, 10:35am

I can only post one image per post so here is the first one used in this sketch:

Quinny · July 26, 2020, 10:36am

dickbw2

Quinny · July 26, 2020, 10:36am

Quinny · July 26, 2020, 10:37am

ARNAV_A_GUPTA · July 26, 2020, 12:17pm

@Quinny, welocme to the forum. Actually you’ve done some problems with brackets in the preload function.

Quinny · July 26, 2020, 12:57pm

Thanks @ARNAV_A_GUPTA!!!

Could you give me any more to go on please? These are how the brackets are formatted in the original code.

Thanks again

ARNAV_A_GUPTA · July 26, 2020, 3:10pm

I think this would be correct. Try this.

Quinny:

function preload() {
    loadImage("img.jpg", function(_img) {
    img = _img;
    img.loadPixels();
    loaded = true;
    segmentSpacing = (img.height / numSegments);
    segmentLength = img.width;

    for (let i = 0; i < numSegments; i++) {
      segments.push(new Segment({
        pos: { x: 0, y: i },
        len: segmentLength
      })
)
};

    }
};

slow_izzm · July 26, 2020, 3:11pm

Processing loadImage() takes a filename and extension (String,String) … don’t think a callback func is going to work.

Also, you still have function keyword, needs void … and no preload() in Processing.

ARNAV_A_GUPTA · July 26, 2020, 3:12pm

and delete closing parenthesis

“)”

too

Quinny · July 26, 2020, 4:10pm

Thanks, @slow_izzm.

Yeah, it looks like the only way I can use a callback in Processing is with Java Reflection which, apparently, is to be avoided at all costs by anyone who isn’t an advanced developer; which clearly I am not.

Might need to explore a new path. Thanks again

Topic		Replies	Views
Converting my Processing sketch to a Processing.js sketch Coding Questions	2	305	August 7, 2019
Translate p5js code to processing code? Coding Questions	8	1273	December 11, 2018
P5.js to Processing conversion Coding Questions	2	444	June 5, 2019
How to get processing java sketch onto a webpage? Libraries	4	3831	August 18, 2018
Problems with converting a P5.js sketch to Processing Coding Questions homework	4	554	June 29, 2021

Converting Processing to Processing.js... please help?

Related topics