# Shorthand code translation

Hi.
I found such lovely sketches on Twitter like this one below from @KomaTebe, but I can’t translate it into the usual (not shorthand) code.
Could anyone do this?

`f=0,draw=a=>{for(f||createCanvas(W=400,W,WEBGL),noStroke(background(0)),[-W,0].map(a=>pointLight([W],0,a,W)),i=0;i<TAU;i+=PI/2048)push(),rotateY(i-f),translate(120*sin(tan(i)),50*tan(atan(tan(i+f))),120*cos(tan(i))),sphere(3*cos(i+f),12),pop();f+=.01};`

Using a JS beautifier online service is a good start: Beautifier.io

``````f = 0, draw = a => {
for (
f || createCanvas(W = 400, W, WEBGL),
background(0).noStroke(),
[-W, 0].map(a => pointLight([W], 0, a, W)),
i = 0; i < TAU; i += PI / 2048)
push(), rotateY(i - f).translate(120 * sin(tan(i)),
50 * tan(atan(tan(i + f))), 120 * cos(tan(i))),
sphere(3 * cos(i + (f += .01)), 12).pop();
};
``````

Of course It still needs some work to make it an actual understandable code.

1 Like

Thank you for trying, but this code does not have the same outcome.
I only got this far.

``````let f = 0;

function setup() {
createCanvas((W = 400), W, WEBGL);
}

function draw() {
background(0);
noStroke();
for (
[-W, 0].map((a) => pointLight([W], 0, a, W)), i = 0;
i < TAU;
i += PI / 2048
) {
push();
rotateY(i - f);
let x = 120 * sin(tan(i));
let y = 50 * tan(atan(tan(i + f)));
let z = 120 * cos(tan(i));
translate(x, y, z);
sphere(3 * cos(i + f), 12);
pop();
}
f += 0.01;
}
``````
1 Like

Hi @J_Silva,

What do you mean by…

if I copy/paste your translated code in p5js webeditor or PDE4 (p5js mode) I got pretty the same as on tweet !?

Cheers
— mnse

@mnse
I get a different outcome also in web editor.
The tweet sketch in question is this one.

Hi @Sunt,

What happens if you click here. (Just copy/pasted version of @J_Silva code running in p5js webeditor)

Cheers
— mnse

@mnse

I managed this translation until now. But I still can’t simplify the following line
arr.map((a) => pointLight(c, 0, a, width));
to a common function. Can you?

``````let f = 0;

function setup() {
createCanvas(400, 400, WEBGL);
}

function draw() {
background(0);
noStroke();
let c = color(255);
let arr = [-width, 0];
arr.map((a) => pointLight(c, 0, a, width));
for (i = 0; i < TAU; i += PI / 2048) {
push();
rotateY(i - f);
let ti = tan(i);
let tif = tan(i + f);
let x = 120 * sin(ti);
let atif = atan(tif);
let y = 50 * tan(atif);
let z = 120 * cos(ti);
translate(x, y, z);
sphere(3 * cos(i + f), 12);
pop();
}
f += 0.01;
}
``````

@mnse
Yes, that runs the same outcome as on Twitter.
Although I have a reasonable graphics card the sketch runs a little bit slower.

It’s basically just …

``````let f = 0;
let W = 400;

function setup() {
createCanvas(W, W, WEBGL);
}

function draw() {
background(0);
noStroke();
pointLight(255,255,255, 0, -W, width);
pointLight(255,255,255, 0, 0, width);
for (i = 0; i < TAU; i += PI / 2048) {
push();
rotateY(i - f);
let ti = tan(i);
let tif = tan(i + f);
let x = 120 * sin(ti);
let atif = atan(tif);
let y = 50 * tan(atif);
let z = 120 * cos(ti);
translate(x, y, z);
sphere(3 * cos(i + f), 12);
pop();
}
f += 0.01;
}
``````

Cheers
— mnse

1 Like

Hi @Sunt ,

Not a graphics card issue…
The animated one from the tweet is pre-rendered as gif/webp etc. (means not real time)

Cheers
— mnse

Oh, thanks!
So the .map() function iterates through the array [-400, 0].
Thus I changed the line to:

setPointLight(c, arr);

``````function setPointLight(c, arr) {
for ( let i = 0; i < arr.length; i++)  pointLight(c, 0, arr[i], width)
}
``````

And that’s it.
But still… to say that I really understand the code?
How does one even come up with a piece like that?
You need a real good mathematical mind.

1 Like

Why?

doesn’t really matter, but actually that are only two instructions for this predefined array with two elements. Imho not necassary to do a loop for it.

To be honest, that’s not really any fancy high-level math, but rather just simple trigonometry…
The real point is, that someone thinks about what creative things can be done with it.

Cheers
— mnse

2 Likes