could anyone help me converting this code into Processing please?
thanks
what exactly do you mean by “help” ? It reads like you are asking someone to do it for you… it’s not a long code, and while converting the js “function” to java class may be a bit tricky but you can definitely start with drawing the axes as a starting point.
(by the way I’m a fan of the author, especially their collective - they make amazing visuals)
1 Like
read this
1 Like
and this
1 Like
I program using my phone. I would like to help, but without the source code, it is very difficult. This sounds very fun. Please supply your source code and I will work on a tool to convert it.
thankyou!
this is the p5js coded by the author:
var rotx;
var roty;
var rotz;
var axisx;
var axisy;
var axisz;
var line_system;
function setup () {
pixelDensity (displayDensity ());
createCanvas (windowWidth, windowHeight, WEBGL);
colorMode (RGB, 256);
background (0);
rotx = 0.0;
roty = 0.0;
rotz = 0.0;
axisx = 0;
axisy = 0;
axisz = 0.0;
drawing = false;
line_system = new LineSystem ();
}
function draw () {
background (0);
translate (axisx, axisy, axisz);
rotateX (rotx);
rotateY (roty);
rotateZ (rotz);
rotx += 0.06;
roty += 0.00;
rotz += 0.00;
line_system.update ();
line_system.render ();
strokeWeight (2);
stroke (255, 0, 0);
line (-960, 0, 0, 960, 0, 0);
stroke (0, 255, 0);
line (0, -540, 0, 0, 540, 0);
}
function mousePressed () {
drawing = true;
line_system = [];
line_system = new LineSystem ();
}
function mouseReleased () {
drawing = false;
}
function LineSystem () {
var line_create = [];
var x = (mouseX - (width / 2)) * cos (roty);
var y = (mouseY - (height / 2)) * cos (rotx);
var z = (mouseX - (width / 2)) * cos ((PI / 2) - roty) - (mouseY - (height / 2)) * cos ((PI / 2) - rotx);
line_create.push (new LineCreate (x, y, z));
var targetx = 0.0;
var targety = 0.0;
var targetz = 0.0;
easing = 0.1;
create = true;
this.update = function () {
targetx = (mouseX - (width / 2)) * cos (roty);
targety = (mouseY - (height / 2)) * cos (rotx);
targetz = (mouseX - (width / 2)) * cos ((PI / 2) - roty) - (mouseY - (height / 2)) * cos ((PI / 2) - rotx);
x += (targetx - x) * easing;
y += (targety - y) * easing;
z += (targetz - z) * easing;
if (drawing == true) {
line_create.push (new LineCreate (x, y, z));
}
}
this.render = function () {
for (var i = 0; i < line_create.length; i++) {
if (i > 0) {
var line_prev = line_create[i - 1];
var line_next = line_create[i];
stroke (255, 255, 255);
strokeWeight (dist (line_prev.x, line_prev.y, line_prev.z, line_next.x, line_next.y, line_next.z) / 4.0);
line (line_prev.x, line_prev.y, line_prev.z, line_next.x, line_next.y, line_next.z);
}
}
}
}
function LineCreate (ax, ay, az) {
this.x = ax;
this.y = ay;
this.z = az;
}
and this is my attempt to convert it into a processing code:
float rotx;
float roty;
float rotz;
int axisx;
int axisy;
float axisz;
LineSystem line_system;
void setup () {
pixelDensity (displayDensity ());
createCanvas (windowWidth, windowHeight, WEBGL);
colorMode (RGB, 256);
background (0);
rotx = 0.0;
roty = 0.0;
rotz = 0.0;
axisx = 0;
axisy = 0;
axisz = 0.0;
drawing = false;
line_system = new LineSystem ();
}
void draw () {
background (0);
translate (axisx, axisy, axisz);
rotateX (rotx);
rotateY (roty);
rotateZ (rotz);
rotx += 0.06;
roty += 0.00;
rotz += 0.00;
line_system.update ();
line_system.render ();
strokeWeight (2);
stroke (255, 0, 0);
line (-960, 0, 0, 960, 0, 0);
stroke (0, 255, 0);
line (0, -540, 0, 0, 540, 0);
}
void mousePressed () {
drawing = true;
ArrayList<LineSystem> line_system = new ArrayList<LineSystem>();
line_system = new LineSystem ();
}
void mouseReleased () {
drawing = false;
}
class LineSystem {
ArrayList<LineCreate> line_create = new ArrayList<LineCreate>();
float x = (mouseX - (width / 2)) * cos (roty);
float y = (mouseY - (height / 2)) * cos (rotx);
float z = (mouseX - (width / 2)) * cos ((PI / 2) - roty) - (mouseY - (height / 2)) * cos ((PI / 2) - rotx);
line_create = append(line_create, new LineCreate (x, y, z));
float targetx = 0.0;
float targety = 0.0;
float targetz = 0.0;
easing = 0.1;
create = true;
void update () {
targetx = (mouseX - (width / 2)) * cos (roty);
targety = (mouseY - (height / 2)) * cos (rotx);
targetz = (mouseX - (width / 2)) * cos ((PI / 2) - roty) - (mouseY - (height / 2)) * cos ((PI / 2) - rotx);
x += (targetx - x) * easing;
y += (targety - y) * easing;
z += (targetz - z) * easing;
if (drawing == true) {
line_create.push (new LineCreate (x, y, z));
}
}
void render () {
for (int i = 0; i < line_create.length; i++) {
if (i > 0) {
LineCreate line_prev = line_create[i - 1];
LineCreate line_next = line_create[i];
stroke (255, 255, 255);
strokeWeight (dist (line_prev.x, line_prev.y, line_prev.z, line_next.x, line_next.y, line_next.z) / 4.0);
line (line_prev.x, line_prev.y, line_prev.z, line_next.x, line_next.y, line_next.z);
}
}
}
}
class LineCreate{
LineCreate (ax, ay, az){
this.ax = ax;
this.ay = ay;
this.az = az;
}
}
type or paste code here
It may take me a few hours. But I am working on it now. Thats a good idea you had.
2 Likes
there are small points that had to be fixed and I thought it’s easier to show the fix rather than explaining each points so I just give you the “answer” 
float rotx;
float roty;
float rotz;
int axisx;
int axisy;
float axisz;
LineSystem line_system;
boolean drawing = false;
void setup () {
size (800, 800, P3D);
colorMode (RGB, 256);
background (0);
rotx = 0.0;
roty = 0.0;
rotz = 0.0;
axisx = 0;
axisy = 0;
axisz = 0.0;
line_system = new LineSystem ();
}
void draw () {
background (0);
translate(width / 2, height / 2);
translate (axisx, axisy, axisz);
rotateX (rotx);
rotateY (roty);
rotateZ (rotz);
rotx += 0.06;
roty += 0.00;
rotz += 0.00;
line_system.update ();
line_system.render ();
strokeWeight (2);
stroke (255, 0, 0);
line (-960, 0, 0, 960, 0, 0);
stroke (0, 255, 0);
line (0, -540, 0, 0, 540, 0);
}
void mousePressed () {
drawing = true;
line_system = new LineSystem ();
}
void mouseReleased () {
drawing = false;
}
class LineSystem {
ArrayList<LineCreate> line_create = new ArrayList<LineCreate>();
float x = (mouseX - (width / 2)) * cos (roty);
float y = (mouseY - (height / 2)) * cos (rotx);
float z = (mouseX - (width / 2)) * cos ((PI / 2) - roty) - (mouseY - (height / 2)) * cos ((PI / 2) - rotx);
float targetx = 0.0;
float targety = 0.0;
float targetz = 0.0;
float easing = 0.1;
boolean create = true;
LineSystem () {
line_create.add(new LineCreate (x, y, z));
}
void update () {
targetx = (mouseX - (width / 2)) * cos (roty);
targety = (mouseY - (height / 2)) * cos (rotx);
targetz = (mouseX - (width / 2)) * cos ((PI / 2) - roty) - (mouseY - (height / 2)) * cos ((PI / 2) - rotx);
x += (targetx - x) * easing;
y += (targety - y) * easing;
z += (targetz - z) * easing;
if (drawing == true) {
line_create.add (new LineCreate (x, y, z));
}
}
void render () {
for (int i = 0; i < line_create.size(); i++) {
if (i > 0) {
LineCreate line_prev = line_create.get(i - 1);
LineCreate line_next = line_create.get(i);
stroke (255, 255, 255);
strokeWeight (dist (line_prev.x, line_prev.y, line_prev.z, line_next.x, line_next.y, line_next.z) / 4.0);
line (line_prev.x, line_prev.y, line_prev.z, line_next.x, line_next.y, line_next.z);
}
}
}
}
class LineCreate {
float x, y, z;
LineCreate (float ax, float ay, float az) {
this.x = ax;
this.y = ay;
this.z = az;
}
}
3 Likes
great work and nice too
1 Like
I know someone already answered, but I am working on a program to do this automatically. I’ll post it tomorrow when I’m done.
1 Like
Can you convert it to processing? Thank you very much
(z = 0),
(x = 99),
(draw = (a) => {
for (z || createCanvas((w = 400), w, WEBGL), background(0), i = 22; i–; )
(p = (-i * w + (z % w) * 2) / 290),
L(250 * p, x + cos(p / 5) * sin(z / 3e3) * p * 50),
(x = -x);
z += 15;
}),
(L = (p, a) => {
push(),
translate(a, 25, p),
circle(0, -200, 15),
spotLight(w, 220, 190, a, 1.8 * -w, p, 0, 1, 0),
pop(box(w, 2, w, 50));
});