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

**URL:** https://discourse.processing.org/t/code-works-correctly-in-p5-but-translation-to-processing-outputs-weird-results/24508
**Category:** Coding Questions
**Created:** [October 11, 2020, 6:14am UTC](https://discourse.processing.org/t/code-works-correctly-in-p5-but-translation-to-processing-outputs-weird-results/24508 "2020-10-11T06:14:30Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![pablohotsauce](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/pablohotsauce/32/10113_2.png) [@pablohotsauce](https://discourse.processing.org/u/pablohotsauce)
#### Post date: [October 11, 2020, 6:14am UTC](https://discourse.processing.org/t/code-works-correctly-in-p5-but-translation-to-processing-outputs-weird-results/24508/1 "2020-10-11T06:14:30Z")

</div>

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:

```auto
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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/d/db125cefc425c39fcf1ec80b81568f5ca84d8ff1.jpeg)

* * *

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.

```auto
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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/f/ffcaa4117d92ffef2029ea78a0a930fc03e8c245.jpeg)

 ![java_circles_02](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/6/64b0cb1da889da45e74392e0980a45f932524b33.jpeg)

---

<div class="post-metadata">

### Author: ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)
#### Post date: [October 11, 2020, 6:32am UTC](https://discourse.processing.org/t/code-works-correctly-in-p5-but-translation-to-processing-outputs-weird-results/24508/2 "2020-10-11T06:32:17Z")

</div>

> [@pablohotsauce](#):
>
> it outputs nonsense.

Seems like p5js’ [**arc()**](https://p5js.org/reference/#/p5/arc) isn’t compatible w/ Processing’s [**arc()**](https://processing.org/reference/arc_.html): 🙄

> <https://github.com/processing/p5.js/issues/2919>
>
> \<!--
> Hi there! 
> 
> PLEASE NOTE: The github issues are for bugs and feature requ…ests for the p5.js library itself. If you have a general question or bug programming with p5.js please post it in the p5.js forum: https://forum.processing.org/two/.
> 
> To check any option, replace the "\[\]" with a "\[x\]". Be sure to check out how it looks in the Preview tab! Feel free to remove any portion of the template that is not relevant for your issue.
> \--\>
> 
> I noticed some weird behavior in the arc function when the start and stop angles are the same. It will render a full circle from 0 up to 90 degrees, beyond that it begins to render a 180degree~ arc that rotates, and then around degree 300 the arc starts to flash on and off.
> 
> What is the intended behavior when the values are the same? I was imagining that nothing would be drawn. I'm wondering if this line is causing some of the weirdness https://github.com/processing/p5.js/blob/5f6b4ab7e1c1a680186e52a9a1ac3f63450e8406/src/core/2d\_primitives.js#L100-L103 
> 
> \#### Nature of issue?
> 
> \- \[X\] Found a bug
> \- \[\] Existing feature enhancement
> \- \[\] New feature request
> 
> \#### Most appropriate sub-area of p5.js?
> 
> \- \[\] Color
> \- \[X\] Core/Environment/Rendering
> \- \[\] Data
> \- \[\] Events
> \- \[\] Image
> \- \[\] IO
> \- \[\] Math
> \- \[\] Typography
> \- \[\] Utilities
> \- \[\] WebGL
> \- \[\] Other (specify if possible)
> 
> \#### Which platform were you using when you encountered this?
> 
> \- \[\] Mobile/Tablet (touch devices)
> \- \[X\] Desktop/Laptop
> \- \[\] Others (specify if possible)
> 
> \#### Details about the bug: 
> 
> \- p5.js version: 0.6.1
> \- Web browser and version: Firefox 60
> \- Operating System: Linux Ubuntu 16.04
> \- Steps to reproduce this: Set the same value for start and stop in arc(). Here's an example: https://alpha.editor.p5js.org/aferriss/sketches/SkpGgyaCf

---

<div class="post-metadata">

### Author: ![pablohotsauce](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/pablohotsauce/32/10113_2.png) [@pablohotsauce](https://discourse.processing.org/u/pablohotsauce)
#### Post date: [October 11, 2020, 11:16pm UTC](https://discourse.processing.org/t/code-works-correctly-in-p5-but-translation-to-processing-outputs-weird-results/24508/3 "2020-10-11T23:16:54Z")

</div>

> [@GoToLoop](#):
>
> Seems like p5js’ [**arc()**](https://p5js.org/reference/#/p5/arc) isn’t compatible w/ Processing’s [**arc()**](https://processing.org/reference/arc_.html): 🙄

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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/73ae5245f8740cac00fc659eaf79599c6052ab7e.gif)

---

<div class="post-metadata">

### Author: ![tony](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tony/32/949_2.png) [@tony](https://discourse.processing.org/u/tony)
#### Post date: [October 12, 2020, 6:39am UTC](https://discourse.processing.org/t/code-works-correctly-in-p5-but-translation-to-processing-outputs-weird-results/24508/4 "2020-10-12T06:39:06Z")

</div>

Great motion! Love the look so far