Anaibuk
1
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
}
1 Like
kll
2
you should start here to see the differences
esp:
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
3
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
4
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
5
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
6
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.
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;
}
2 Likes
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
2 Likes
Anaibuk
9
Nice one Thank you so much for your time and help!
