1

I am trying to understand superficially the syntax in this pretty piece of coding posted here:

t=0,draw=e=>{for(t++||createCanvas(w=400,w,WEBGL),background(w),fill(x=0),rotateX(d=t/120),rotateY(d),rotateZ(d);x<1331;)push(r=r=>(r-5)*(10+w*(o=1-sin(t%120/240*PI)))),translate(r(a=x%11),r(b=x%121/11|0),r(c=x++/121|0)),pop(box(10+o*(666==x?90:-10)))};//

I think that because of Twitter's constraints in number of characters it was posted as one single line, and using some shortcuts for loops. The part I am asking about may be a loop. I tried unfolding the code into something more readable as follows:

t=0,draw=e=>{for(t++||
createCanvas(w = windowWidth,w,WEBGL), background(w), fill(x=0),
rotateX(d=t/120),
rotateY(d),
rotateZ(d);
x<1331;)
push(r=r=>(r-5) * (10 + w * (z = 1 - sin(t%120/240*PI)))),
  translate(r(a=x%11),
            r(b=x%121/11|0),
            r(c=x++/121|0)),
  pop(box(10+z*(666==x?90:-10)))};//

What is r=r=>(r-5) purpose? I have looked up push() and pop(), and I have a vague idea, but that expression is confusing.

Antoni Parellada
  • 4,253
  • 6
  • 49
  • 114
  • 1
    It's creating a function named `r` that does `(r-5) * (10 + w * (z = 1 - sin(t%120/240*PI))))`, it's used 3 times in the `translate` bit. eg. its like doing `const times2 = val => 2 * val; console.log(times2(2))` – Keith Dec 12 '22 at 13:50
  • @Keith Thank you! So is `r` the name of the function as well as and input for the actual calculation? If so where is the value fed into `r` extracted from? – Antoni Parellada Dec 12 '22 at 13:52
  • Yes, `r` is the function name, & `r` is the value been passed. `const r = r => r * 2` like in my other example. Reading compressed / obfuscated code is not fun.. :) – Keith Dec 12 '22 at 13:53
  • @Keith In your example, the `const` word seems to initiate a function, but in the original code that word is suppressed, yet it still works (I just tested it as in `r = r => r * 2; console.log(r(8))` yielding `16`. – Antoni Parellada Dec 12 '22 at 14:01
  • 1
    If you leave out `const` / `let`or `var`, you just end up creating a global variable instead. It is indeed identical in other respects, it's just I don't like using globals.. :) – Keith Dec 12 '22 at 14:03
  • 1
    The code you have shown has -> `r(a=x%11)`.. `a=x%11` is been passed to the function `r`, and and then `b=x%121/11|0` is been sent next etc. – Keith Dec 12 '22 at 14:05
  • @Keith Yes, I get it, it's the double role of `r` as the name of a function in `r(a=x%11)` and as a variable within the function `(r-5) * (10 + w * (z = 1 - sin(t%120/240*PI)))` that is the "aha" moment. I guess we see a similar syntactic line at the beginning defining a loop with a name `e` and `=>` (`draw=e=>{for(t++)`. – Antoni Parellada Dec 12 '22 at 14:11

1 Answers1

2

This whole callback starts at t=0,draw=e=> This e is probably an event, the letter e is often used for event

this is a callback function, which is assigned to 'r'

    r = (r) => (r * 5) * (10 + w * (z = 1 - sin(t%120/240*PI)))),
       translate(r(a=x%11),
                 r(b=x%121/11|0),
                 r(c=x++/121|0)),
       pop(box(10+z*(666==x'90:-10))};

it's something like

    number = (num) => num * 2
    number(4) // will multiply four by two
Douglas Fernandes
  • 104
  • 8
  • Thank you. I thought `e` was `2.71828...` and `r` was the radius, and `=>` was `equal or greater than`, so I'm making great progress quickly. – Antoni Parellada Dec 12 '22 at 14:16
  • thats correctly, good studies – Douglas Fernandes Dec 12 '22 at 14:20
  • Since you referenced the beginning of the code, how is it that in `fill(x=0)` the zero value is assigned to `x` and then, later on, `r(a=x%11)` still makes sense, since `a` will always be zero as long as `x` is zero? – Antoni Parellada Dec 12 '22 at 14:29
  • I also see `t=0, draw=_=>` in some posts. I guess, it the underscore also means an event. – Antoni Parellada Dec 12 '22 at 14:34
  • it's be'cause the `= (e) =>` its a callback functions and the (e) its a parameter of the function. Like this -> `const t = 0;` `const draw = (e) => { for (t++ || ... }` this E on parameter can be an element or an event. In this case i think it's a element of the canvas. – Douglas Fernandes Dec 12 '22 at 16:46
  • 1
    @AntoniParellada That is more legibly for you https://codepen.io/douglasfernandesdev/pen/rNKgKYR – Douglas Fernandes Dec 12 '22 at 16:58