Translate p5js code to processing code?

[Anaibuk]

Hello everyone,

I’m just having a wild crash curse of processing (generative Design) at university. As we haven’t enough time, we are just learning to code with processing and not with p5js. Unfortunaly most of the example codes witch inspire me at the internet are for web processing. I found one that I really would like to work with and I want to ask if you might help me to translate it to orders for processing? I know that function is void for example and I know the lenguages are quiet similar, but for me as a absolut beginner it is to difficult to find the right translation for all “variables” for example. As the code is not to long you might could help me please? I would appreciate that a lot!!! Tank you!

The p5js-code:

var prevPos = {}
var pos = {}
var dir = 1
var radius = 1
var angle = 0
var pg

function setup() {  
	createCanvas(600, 600);
	background(255);
	
	prevPos = {x: width/2, y: height/2}
	pos = {x: width/2, y: height/2}
	strokeWeight(1)
}

function draw() {
	angle += 1/radius*dir
	
	pos.x += cos(angle) * radius
	pos.y += sin(angle) * radius
	if(get(round(pos.x), round(pos.y))[0] < 255 || pos.x < 0 || pos.x > width || pos.y < 0 || pos.y > height){
		dir *= -1
		radius = random(1, 20)
		angle += PI * dir
	}
	line(prevPos.x, prevPos.y, pos.x, pos.y)
	
	prevPos.x = pos.x
	prevPos.y = pos.y
}

[kll]

you should start here to see the differences

Reference

esp:

PVector / Reference

should it look like this? ? you like that? ( i am more the neon type )

sorry , was not that easy for me to get the color thing

c < 255

is wrong

you see the small change?

	if(get(round(pos.x), round(pos.y))[0] < 255 || pos.x < 0 || pos.x > width || pos.y < 0 || pos.y > height){

translates to

  color c = get(round(pos.x), round(pos.y));    // get color from new position and use only red of RGB
  if ( red(c) < 255 || pos.x < 0 || pos.x > width || pos.y < 0 || pos.y > height) {  // 

[Anaibuk]

Hey, thank you for your advises!
I already tried on my one to advance through the reference in my understanding of processing and p5sj-codes, but as I am at the very beginning and I have only short time it is too complex. I’m just starting to manage a little bit of processing and it is very confusing for me to go directly over to p5sj and spend a lot of time to understand the translation thing.
The effect of the code I’m interested on is these one: https://www.openprocessing.org/sketch/624877

Best Wisches

[kll]

as you copy that code from the link you just provided,
i have to inform you that you violate copyright of the original coder.

// https://www.openprocessing.org/sketch/624877
/*
Bouncing Circular Random Walker
by
Vamoss
(CC BY-SA 3.0)
*/

pls. keep this info in the header of your code

[Anaibuk]

Hey thank you so much … incredible! That looks exactly like the original. I see what you mean with the if included in color c. I will copy the code to make him more understandable for me by changing things. Thank you so much for your help, great job!

[Anaibuk]

And thanks for the advice, but it is just for praxis and understanding at university classes, I will not use it for any publication or other important thing.

[GoToLoop]

I did my own Java Mode conversion of the p5js sketch:
OpenProcessing.org/sketch/643550

/**
 * Bouncing Circular Random Walker (v1.0.1)
 *
 * p5js original version by Vamoss (2018/Nov/09)
 * https://OpenProcessing.org/sketch/624877
 *
 * Java Mode conversion by GoToLoop (2018/Dec/11)
 * https://OpenProcessing.org/sketch/643550
 *
 * https://Discourse.Processing.org/t/translate-p5js-code-to-processing-code/6505/7
 */

static final color BG = -1, COLORS = 45;
static final float BOLD = 1.0, FPS = 60.0;
static final int RAD_MIN_STEP = 1, RAD_MAX_STEP = 20, LIM = 50;

final PVector prevPos = new PVector(), currPos = prevPos.get();

float ang, rad, dir;
boolean paused;

void setup() {
  size(600, 600);
  smooth(3);
  frameRate(FPS);
  colorMode(HSB, COLORS, 1, 1);

  strokeCap(ROUND);
  strokeJoin(ROUND);
  strokeWeight(BOLD);

  restart();
}

void draw() {
  ang += dir/rad;
  currPos.add(cos(ang) * rad, sin(ang) * rad);

  int x = round(currPos.x), y = round(currPos.y);

  if (x < 0 || x >= width || y < 0 || y >= height) {
    bounce();

    x = constrain(x, -LIM, width  + LIM);
    y = constrain(y, -LIM, height + LIM);

    currPos.set(x, y);
  } else if (get(x, y) != BG)  bounce();

  line(prevPos.x, prevPos.y, currPos.x, currPos.y);
  prevPos.set(currPos);
}

void mousePressed() {
  if (mouseButton == LEFT)
    if (paused ^= true)  noLoop();
    else                 loop();
  else restart();
}

void bounce() {
  rad = random(RAD_MIN_STEP, RAD_MAX_STEP);
  ang += PI * (dir *= -1);
}

void restart() {
  background(BG);
  stroke(random(COLORS), 1, 1);

  prevPos.set(width>>1, height>>1);
  currPos.set(prevPos);

  rad = dir = 1;
}

[GoToLoop]

As a bonus, a Python Mode conversion too:

"""
 * Bouncing Circular Random Walker (v1.0.1)
 *
 * p5js original version by Vamoss (2018/Nov/09)
 * https://OpenProcessing.org/sketch/624877
 *
 * Python Mode conversion by GoToLoop (2018/Dec/11)
 * https://OpenProcessing.org/sketch/643550
 *
 * https://Discourse.Processing.org/t/translate-p5js-code-to-processing-code/6505/8
"""

BG, COLORS = -1, 45
BOLD, FPS = 1.0, 60.0
RAD_MIN_STEP, RAD_MAX_STEP, LIM = 1, 20, 50

prevPos = __pvector__()
currPos = prevPos.get()

ang = 0.0
paused = False

def setup():
    size(600, 600)
    smooth(3)
    frameRate(FPS)
    colorMode(HSB, COLORS, 1, 1)

    strokeCap(ROUND)
    strokeJoin(ROUND)
    strokeWeight(BOLD)

    restart()


def draw():
    global ang
    ang += dir/rad
    currPos.add(cos(ang) * rad, sin(ang) * rad)

    x = this.round(currPos.x)
    y = this.round(currPos.y)

    if x < 0 or x >= width or y < 0 or y >= height:
        bounce()

        x = constrain(x, -LIM, width  + LIM)
        y = constrain(y, -LIM, height + LIM)

        currPos.set(x, y)
    elif get(x, y) != BG: bounce()

    line(prevPos.x, prevPos.y, currPos.x, currPos.y)
    prevPos.set(currPos)


def mousePressed():
    global paused

    if mouseButton == LEFT:
        paused ^= True
        noLoop() if paused else loop()
    else: restart()


def bounce():
    global ang, rad, dir
    rad = random(RAD_MIN_STEP, RAD_MAX_STEP)
    dir *= -1
    ang += PI * dir


def restart():
    background(BG)
    stroke(random(COLORS), 1, 1)

    prevPos.set(width>>1, height>>1)
    currPos.set(prevPos)

    global rad, dir
    rad = dir = 1

[Anaibuk]

Nice one Thank you so much for your time and help!