Processing code to p5.js code

p5.js Coding Questions
1

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;
}

2

Hello @carol,

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

This may help:

:)

3

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:

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

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

      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.

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:

stroke(0, 0, 0, 2556);

Is 2556 what you really wanted there?