Shorthand code translation

p5.js Beginners
1

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};

2

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
3

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
4

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

5

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

6

Hi @Sunt,

Yes! I’d already found it on twitter …
What happens if you click here. (Just copy/pasted version of @J_Silva code running in p5js webeditor)

Cheers
— mnse

7

@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;
}
8

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

9

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
10

Hi @Sunt ,

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

Cheers
— mnse

11

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

setPointLight(c, arr);

and added the function:

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
12

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. :wink:

Cheers
— mnse

2 Likes