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

**URL:** <https://discourse.processing.org/t/converting-processing-to-processing-js-please-help/22846>\
**Category:** Coding Questions\
**Created:** [July 26, 2020, 10:32am UTC](https://discourse.processing.org/t/converting-processing-to-processing-js-please-help/22846 "2020-07-26T10:32:15Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![Quinny](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quinny/32/9957_2.png) [@Quinny](https://discourse.processing.org/u/Quinny)\
**Post date:** [July 26, 2020, 10:32am UTC](https://discourse.processing.org/t/converting-processing-to-processing-js-please-help/22846/1 "2020-07-26T10:32:15Z")

</div>

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](https://github.com/lucascassiano/Processing-to-Unity), 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:

```auto
//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:

```auto
//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();
  }
}

```

---

<div class="post-metadata">

**Author:** ![Quinny](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quinny/32/9957_2.png) [@Quinny](https://discourse.processing.org/u/Quinny)\
**Post date:** [July 26, 2020, 10:35am UTC](https://discourse.processing.org/t/converting-processing-to-processing-js-please-help/22846/2 "2020-07-26T10:35:26Z")

</div>

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

 ![dickbw](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/1/1079a05913fe168478f32db8358b799a3fb43cc0.jpeg)

---

<div class="post-metadata">

**Author:** ![Quinny](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quinny/32/9957_2.png) [@Quinny](https://discourse.processing.org/u/Quinny)\
**Post date:** [July 26, 2020, 10:36am UTC](https://discourse.processing.org/t/converting-processing-to-processing-js-please-help/22846/3 "2020-07-26T10:36:01Z")

</div>

![dickbw2](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/b/b2bd91ca58a39e7e07b3fa1b8b02348e4bd1ed62.jpeg)

---

<div class="post-metadata">

**Author:** ![Quinny](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quinny/32/9957_2.png) [@Quinny](https://discourse.processing.org/u/Quinny)\
**Post date:** [July 26, 2020, 10:36am UTC](https://discourse.processing.org/t/converting-processing-to-processing-js-please-help/22846/4 "2020-07-26T10:36:34Z")

</div>

![img](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/3/38447a642278e6655dd86b7fc4d7d0e75369ecce.jpeg)

---

<div class="post-metadata">

**Author:** ![Quinny](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quinny/32/9957_2.png) [@Quinny](https://discourse.processing.org/u/Quinny)\
**Post date:** [July 26, 2020, 10:37am UTC](https://discourse.processing.org/t/converting-processing-to-processing-js-please-help/22846/5 "2020-07-26T10:37:05Z")

</div>

![img](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/2/2d5dbb3adefedf117d4012ec849e43d96d216fe8.png)

---

<div class="post-metadata">

**Author:** ![ARNAV\_A\_GUPTA](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/arnav_a_gupta/32/9660_2.png) [@ARNAV\_A\_GUPTA](https://discourse.processing.org/u/ARNAV_A_GUPTA)\
**Post date:** [July 26, 2020, 12:17pm UTC](https://discourse.processing.org/t/converting-processing-to-processing-js-please-help/22846/6 "2020-07-26T12:17:37Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Quinny](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quinny/32/9957_2.png) [@Quinny](https://discourse.processing.org/u/Quinny)\
**Post date:** [July 26, 2020, 12:57pm UTC](https://discourse.processing.org/t/converting-processing-to-processing-js-please-help/22846/7 "2020-07-26T12:57:35Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ARNAV\_A\_GUPTA](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/arnav_a_gupta/32/9660_2.png) [@ARNAV\_A\_GUPTA](https://discourse.processing.org/u/ARNAV_A_GUPTA)\
**Post date:** [July 26, 2020, 3:10pm UTC](https://discourse.processing.org/t/converting-processing-to-processing-js-please-help/22846/8 "2020-07-26T15:10:21Z")

</div>

I think this would be correct. Try this.

> [@Quinny](#):
>
> ```auto
> 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
> })
> )
> };
> 
> }
> };
> 
> ```

---

<div class="post-metadata">

**Author:** ![slow\_izzm](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/slow_izzm/32/5637_2.png) [@slow\_izzm](https://discourse.processing.org/u/slow_izzm)\
**Post date:** [July 26, 2020, 3:11pm UTC](https://discourse.processing.org/t/converting-processing-to-processing-js-please-help/22846/9 "2020-07-26T15:11:06Z")

</div>

> [@Quinny](#):
>
> ```auto
> function preload() {
> loadImage('img.jpg', function(_img) {
> 
> ```

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.

> **[loadImage() / Reference](https://processing.org/reference/loadImage_.html)**
>
> Loads an image into a variable of type PImage. Four types of images ( .gif, .jpg, .tga, .png) images may be loaded. To load correctly, images must be located in the …

---

<div class="post-metadata">

**Author:** ![ARNAV\_A\_GUPTA](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/arnav_a_gupta/32/9660_2.png) [@ARNAV\_A\_GUPTA](https://discourse.processing.org/u/ARNAV_A_GUPTA)\
**Post date:** [July 26, 2020, 3:12pm UTC](https://discourse.processing.org/t/converting-processing-to-processing-js-please-help/22846/10 "2020-07-26T15:12:11Z")

</div>

> [@Quinny](#):
>
> ```auto
> void update(dt) {
> segments.forEach(
> s => {
> s.update(dt)
> }
> );
> }
> 
> ```

and delete closing parenthesis

> “)”

too

---

<div class="post-metadata">

**Author:** ![Quinny](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quinny/32/9957_2.png) [@Quinny](https://discourse.processing.org/u/Quinny)\
**Post date:** [July 26, 2020, 4:10pm UTC](https://discourse.processing.org/t/converting-processing-to-processing-js-please-help/22846/11 "2020-07-26T16:10:06Z")

</div>

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 🙂