Code works correctly in p5, but translation to Processing outputs weird results

p5.js Coding Questions
1

I threw something together in p5, and it works as intended. Then I tried to translate it to (Java) Processing, and although it runs, the results are weird. I’ve checked everything I can think of, and I’m not sure what the problem is.

Here is the p5 code, followed by a sample screenshot of the expected results:

new p5();

let gap = 16.0; // gap between consecutive circles
let numCircles = 60; // number of circles
let diamInner = 10.0; // diameter of inner circle

let roam = 60.0; // angle to roam from previous rando
let color1 = color(200, 0, 0);

function setup() {
	createCanvas(1000, 600);
	background(30);
	
	noLoop();
}

function draw() {
	let arrRands = new Array(numCircles + 1);
	
	for (let i = 0; i < arrRands.length; i++) {
		arrRands[i] = random(360);
		if (i > 1) {
			arrRands[i] = random(arrRands[i - 2] - roam, arrRands[i - 2] + roam);
		}
	}
	
	stroke(color1);
	strokeWeight(2);
	noFill();
	
	for (let i = 0; i < numCircles; i++) {
		let diamTemp = diamInner + (i * gap * 2.0);

		push();
		
		translate(width / 2.0, height / 2.0);
		
		let x = cos(radians(arrRands[i + 1])) * ((diamTemp / 2.0) + (gap / 2.0));
		let y = sin(radians(arrRands[i + 1])) * ((diamTemp / 2.0) + (gap / 2.0));
		
		if (i % 2 != 0) { // if i is odd
			arc(0, 0, diamTemp, diamTemp, 
					radians(arrRands[i]), radians(arrRands[i + 1]) );
			
			arc(x, y, gap, gap, radians(arrRands[i + 1]), radians(arrRands[i + 1] + 180));
			
		} else { // else if i is even
			arc(0, 0, diamTemp, diamTemp, 
					radians(arrRands[i + 1]), radians(arrRands[i]) );
			
			arc(x, y, gap, gap, radians(arrRands[i + 1] + 180), radians(arrRands[i + 1]));
		}
		
		pop();
	}
}

p5_circles_01
p5_circles_011000×600 130 KB

And here is the Processing translation of the above, followed by sample screenshots of some of the unexpected results. I basically copied my p5 code, pasted it into the Processing IDE, changed the syntax over to Java, and … it outputs nonsense.

float gap = 16.0; // gap between consecutive circles
int numCircles = 60; // number of circles
float diamInner = 10.0; // diameter of inner circle

float roam = 50.0; // angle to roam from previous rando
color color1 = color(200, 0, 0);

void setup() {
    size(1000, 600);
    background(30);
    
    noLoop();
}

void draw() {
    float[] arrRands = new float[numCircles + 1];
    
    for (int i = 0; i < arrRands.length; i++) {
        arrRands[i] = random(360);
        if (i > 1) {
            arrRands[i] = random(arrRands[i - 2] - roam, arrRands[i - 2] + roam);
        }
    }
    
    stroke(color1);
    strokeWeight(2);
    noFill();
    
    for (int i = 0; i < numCircles; i++) {
        float diamTemp = diamInner + (i * gap * 2.0);
        
        push();
        
        translate(width / 2.0, height / 2.0);
        
        float x = cos(radians(arrRands[i + 1])) * ((diamTemp / 2.0) + (gap / 2.0));
        float y = sin(radians(arrRands[i + 1])) * ((diamTemp / 2.0) + (gap / 2.0));
        
        if (i % 2 != 0) { // if i is odd
            arc(0, 0, diamTemp, diamTemp, 
                    radians(arrRands[i]), radians(arrRands[i + 1]) );
            
            arc(x, y, gap, gap, radians(arrRands[i + 1]), radians(arrRands[i + 1] + 180));
            
        } else { // else if i is even
            arc(0, 0, diamTemp, diamTemp, 
                    radians(arrRands[i + 1]), radians(arrRands[i]) );
            
            arc(x, y, gap, gap, radians(arrRands[i + 1] + 180), radians(arrRands[i + 1]));
        }

        pop();
    }
}

java_circles_01
java_circles_011000×599 9.69 KB

java_circles_02
java_circles_021000×599 41.3 KB

1 Like
2

Seems like p5js’ arc() isn’t compatible w/ Processing’s arc(): :roll_eyes:

2 Likes
3

Thanks. All right, I figured out the quirks in Processing’s version of arc(), after looking over some of those notes and a whole lot of trial and error:

  • The start angle has to be smaller than the stop angle, meaning the arc has to be drawn clockwise or it won’t draw at all.
  • Angles over 360 are OK to use (e.g., drawing an arc from 320 to 400 is fine), but having the degrees from start to finish add up to more than 360 means Processing will draw a full circle, instead of a slice.

Anyway, evolving this sketch in Java:

circles_01
circles_01700×420 2.76 MB

5 Likes
4

Great motion! Love the look so far

1 Like