# Shorthand code translation

**URL:** <https://discourse.processing.org/t/shorthand-code-translation/38050>\
**Category:** Beginners\
**Created:** [July 22, 2022, 2:27am UTC](https://discourse.processing.org/t/shorthand-code-translation/38050 "2022-07-22T02:27:27Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sunt](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sunt/32/16827_2.png) [@Sunt](https://discourse.processing.org/u/Sunt)\
**Post date:** [July 22, 2022, 2:27am UTC](https://discourse.processing.org/t/shorthand-code-translation/38050/1 "2022-07-22T02:27:27Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [July 22, 2022, 2:48am UTC](https://discourse.processing.org/t/shorthand-code-translation/38050/2 "2022-07-22T02:48:52Z")

</div>

Using a JS beautifier online service is a good start: [Beautifier.io](http://Beautifier.io)

```auto
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.

---

<div class="post-metadata">

**Author:** ![J\_Silva](https://avatars.discourse-cdn.com/v4/letter/j/3d9bf3/32.png) [@J\_Silva](https://discourse.processing.org/u/J_Silva)\
**Post date:** [July 22, 2022, 3:22am UTC](https://discourse.processing.org/t/shorthand-code-translation/38050/3 "2022-07-22T03:22:08Z")

</div>

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

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

```

---

<div class="post-metadata">

**Author:** ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)\
**Post date:** [July 22, 2022, 5:40am UTC](https://discourse.processing.org/t/shorthand-code-translation/38050/4 "2022-07-22T05:40:05Z")

</div>

Hi @J_Silva,

What do you mean by…

> [@J\_Silva](#):
>
> not have the same outcome.

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

Cheers  
— mnse

---

<div class="post-metadata">

**Author:** ![Sunt](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sunt/32/16827_2.png) [@Sunt](https://discourse.processing.org/u/Sunt)\
**Post date:** [July 22, 2022, 5:53am UTC](https://discourse.processing.org/t/shorthand-code-translation/38050/5 "2022-07-22T05:53:00Z")

</div>

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

> <https://twitter.com/KomaTebe/status/1550221685248466944>

---

<div class="post-metadata">

**Author:** ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)\
**Post date:** [July 22, 2022, 6:01am UTC](https://discourse.processing.org/t/shorthand-code-translation/38050/6 "2022-07-22T06:01:47Z")

</div>

Hi @Sunt,

Yes! I’d already found it on twitter …  
What happens if you click [here](https://editor.p5js.org/mnse_forum/full/51rWez3o5). (Just copy/pasted version of @J_Silva code running in p5js webeditor)

Cheers  
— mnse

---

<div class="post-metadata">

**Author:** ![J\_Silva](https://avatars.discourse-cdn.com/v4/letter/j/3d9bf3/32.png) [@J\_Silva](https://discourse.processing.org/u/J_Silva)\
**Post date:** [July 22, 2022, 6:05am UTC](https://discourse.processing.org/t/shorthand-code-translation/38050/7 "2022-07-22T06:05:24Z")

</div>

@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?

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

```

---

<div class="post-metadata">

**Author:** ![Sunt](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sunt/32/16827_2.png) [@Sunt](https://discourse.processing.org/u/Sunt)\
**Post date:** [July 22, 2022, 6:15am UTC](https://discourse.processing.org/t/shorthand-code-translation/38050/8 "2022-07-22T06:15:29Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)\
**Post date:** [July 22, 2022, 6:15am UTC](https://discourse.processing.org/t/shorthand-code-translation/38050/9 "2022-07-22T06:15:55Z")

</div>

It’s basically just …

```auto
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

---

<div class="post-metadata">

**Author:** ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)\
**Post date:** [July 22, 2022, 6:19am UTC](https://discourse.processing.org/t/shorthand-code-translation/38050/10 "2022-07-22T06:19:53Z")

</div>

Hi @Sunt ,

> [@Sunt](#):
>
> Although I have a reasonable graphics card the sketch runs a little bit slower.

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

Cheers  
— mnse

---

<div class="post-metadata">

**Author:** ![Sunt](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sunt/32/16827_2.png) [@Sunt](https://discourse.processing.org/u/Sunt)\
**Post date:** [July 22, 2022, 6:42am UTC](https://discourse.processing.org/t/shorthand-code-translation/38050/11 "2022-07-22T06:42:19Z")

</div>

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:

```auto
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.

---

<div class="post-metadata">

**Author:** ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)\
**Post date:** [July 22, 2022, 7:09am UTC](https://discourse.processing.org/t/shorthand-code-translation/38050/12 "2022-07-22T07:09:13Z")

</div>

Why?

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

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.

> [@Sunt](#):
>
> 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.

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