# Processing code to p5.js code

**URL:** <https://discourse.processing.org/t/processing-code-to-p5-js-code/38250>\
**Category:** Coding Questions\
**Created:** [August 6, 2022, 2:54pm UTC](https://discourse.processing.org/t/processing-code-to-p5-js-code/38250 "2022-08-06T14:54:02Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![carol](https://avatars.discourse-cdn.com/v4/letter/c/9d8465/32.png) [@carol](https://discourse.processing.org/u/carol)\
**Post date:** [August 6, 2022, 2:54pm UTC](https://discourse.processing.org/t/processing-code-to-p5-js-code/38250/1 "2022-08-06T14:54:02Z")

</div>

Hey! I’m looking to change some Processing code into p5.js code. I tried the converter but it doesn’t seem to work on p5. I’m wondering if anyone can help transfer theProcessing code to p5.js. Please help! Thanks!

float x1, x2, y1, y2;

void setup() {  
size(800, 800);

background(0);

```
colorMode(HSB, 360, 256, 256);

x1 = width / 1.5;
x2 = width / 2;
y1 = height / 1.5;
y2 = height / 2;

noFill();
stroke(120, 64, 256, 200);
line(x1, y1, x2, y2);

```

}

void draw() {  
noStroke();

```
loadPixels();
for (int y = 0; y < height; y += 1) {
	int yy;
	if (y == 0) {
		yy = (height - 1) * width;
	} else {
		yy = (y % height) * width;
	}
	for (int x = 0; x < width; x += 1) {
		color p;
		if (x == 0) {
			p = pixels[yy + (width - 1)];
		} else {
			p = pixels[yy + (x % width)];
		}
		
		if (brightness(p) > 8 && brightness(p) < 64) {
			fill(0, 0, 255,128 - (frameCount + (x | y)) % 255);
			
			if (frameCount % 32 < 8) {
				ellipse(x, y, 4, 3);
				//ellipse(width - x, y, 4, 3);
			} else if (frameCount % 32 < 16) {
				ellipse(x, y, 2, 3);
			} else if (frameCount % 32 < 24) {
				ellipse(x, y, 3 , 3);
			} else if (frameCount % 32 < 32) {
				ellipse(x, y, 3, 2);
			}
		}
	}
}

// remove seed shape
noFill();
stroke(0, 0, 0, 2556);
if (frameCount == 1) {
	line(x1, y1, x2, y2);
}

```

}

Here is the code I can’t get to work in p5：

var x1, x2, y1, y2;

function setup() {  
initializeFields();  
createCanvas(800, 800);  
background(0);  
colorMode(HSB, 360, 256, 256);  
x1 = width / 1.5;  
x2 = width / 2;  
y1 = height / 1.5;  
y2 = height / 2;  
noFill();  
stroke(120, 64, 256, 200);  
line(x1, y1, x2, y2);  
}

function draw() {  
noStroke();  
loadPixels();  
for (var y = 0; y \< height; y += 1) {  
var yy;  
if (y == 0) {  
yy = (height - 1) \* width;  
} else {  
yy = (y height) \* width; } for (var x = 0; x \< width; x += 1) { var p; if (x == 0) { p = pixels[yy + (width - 1)]; } else { p = pixels[yy + (x width)];  
}  
if (brightness(p) \> 8 && brightness(p) \< 64) {  
fill(0, 0, 255, 128 - (frameCount + (x | y)) 255); if (frameCount 32 \< 8) {  
ellipse(x, y, 4, 3);  
} else if (frameCount 32 \< 16) { ellipse(x, y, 2, 3); } else if (frameCount 32 \< 24) {  
ellipse(x, y, 3, 3);  
} else if (frameCount % 32 \< 32) {  
ellipse(x, y, 3, 2);  
}  
}  
}  
}  
// remove seed shape  
noFill();  
stroke(0, 0, 0, 2556);  
if (frameCount == 1) {  
line(x1, y1, x2, y2);  
}  
}

function initializeFields() {  
x1 = 0;  
x2 = 0;  
y1 = 0;  
y2 = 0;  
}

---

<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:** [August 6, 2022, 3:16pm UTC](https://discourse.processing.org/t/processing-code-to-p5-js-code/38250/2 "2022-08-06T15:16:37Z")

</div>

Hello @carol,

Please format your code as per guide here:  
[https://discourse.processing.org/faq#format-your-code](https://discourse.processing.org/faq#format-your-code)

This may help:

> **[Processing transition · processing/p5.js Wiki](https://github.com/processing/p5.js/wiki/Processing-transition#converting-a-processing-sketch-to-p5js)**
>
> p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Proces...

`:)`

---

<div class="post-metadata">

**Author:** ![javagar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javagar/32/11434_2.png) [@javagar](https://discourse.processing.org/u/javagar)\
**Post date:** [August 8, 2022, 5:30pm UTC](https://discourse.processing.org/t/processing-code-to-p5-js-code/38250/3 "2022-08-08T17:30:50Z")

</div>

Hi @carol,

Because your p5.js code is not formatted for posting, it is nearly impossible to work with it. Therefore, I translated most of your Java code into p5.js, and have posted it below. It creates a fractal pattern of triangles.

Note that this line did not translate well:

```auto
		if (brightness(p) > 8 && brightness(p) < 64) {

```

Therefore, I substituted this conditional header for it instead in the p5.js code:

```auto
      if (true) { /* ***decide what to do with brightness(p)*** */

```

Of course, the condition in the above is always `true`. You’ll need to decide what to do with that condition.

```auto
let x1, x2, y1, y2;

function setup() {
  createCanvas(800, 800);

  background(0);

  colorMode(HSB, 360, 256, 256);

  x1 = width / 1.5;
  x2 = width / 2;
  y1 = height / 1.5;
  y2 = height / 2;

  noFill();
  stroke(120, 64, 256, 200);
  line(x1, y1, x2, y2);
}

function draw() {
  noStroke();

  loadPixels();
  for (let y = 0; y < height; y += 1) {
    let yy;
    if (y == 0) {
      yy = (height - 1) * width;
    } else {
      yy = (y % height) * width;
    }
    for (let x = 0; x < width; x += 1) {
      let p;
      if (x == 0) {
        p = pixels[yy + (width - 1)];
      } else {
        p = pixels[yy + (x % width)];
      }
      
      if (true) { /* ***decide what to do with brightness()*** */
        
        
        fill(0, 0, 255, 128 - ((frameCount + (x | y)) % 255));

        if (frameCount % 32 < 8) {
          ellipse(x, y, 4, 3);
          //ellipse(width - x, y, 4, 3);
        } else if (frameCount % 32 < 16) {
          ellipse(x, y, 2, 3);
        } else if (frameCount % 32 < 24) {
          ellipse(x, y, 3, 3);
        } else if (frameCount % 32 < 32) {
          ellipse(x, y, 3, 2);
        }
      }
    }
  }

  // remove seed shape
  noFill();
  stroke(0, 0, 0, 2556);
  if (frameCount == 1) {
    line(x1, y1, x2, y2);
  }
}

```

You have this line near the end of your Java code, which I left as is in the translation:

```auto
stroke(0, 0, 0, 2556);

```

Is `2556` what you really wanted there?