# Translating Syntax Shorthand for Beginners?

**URL:** <https://discourse.processing.org/t/translating-syntax-shorthand-for-beginners/24995>\
**Category:** Beginners\
**Created:** [October 29, 2020, 3:56am UTC](https://discourse.processing.org/t/translating-syntax-shorthand-for-beginners/24995 "2020-10-29T03:56:16Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![mnoble](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnoble/32/99_2.png) [@mnoble](https://discourse.processing.org/u/mnoble)\
**Post date:** [October 29, 2020, 3:56am UTC](https://discourse.processing.org/t/translating-syntax-shorthand-for-beginners/24995/1 "2020-10-29T03:56:16Z")

</div>

Hello Team Forum,

I found this cool sketch but it is reduced to programming shorthand I have no experience with. I keep trying to format in what I am used but keep failing.

```auto
t=0,draw=_=>{t++||createCanvas(w=720,w)+strokeWeight(5)
background(w,30)
for(i=99;i--;){x=(random(40)|0)*18;y=(random(40)|0)*18
for(j=40;j--;){d=((noise(x/w,y/w+t/w,dist(x,y,w/2,w/2)/w)*50|0)%4)*TAU/4
point(x+=cos(d)*6,y+=sin(d)*6)}}}

/* 
Help, what is the translation to beginner's syntax?

t=0;

function setup(){

}

function draw(){

}
*/

//created by https://twitter.com/ntsutae/status/1314664241048162304

```

---

<div class="post-metadata">

**Author:** ![tabreturn](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tabreturn/32/3697_2.png) [@tabreturn](https://discourse.processing.org/u/tabreturn)\
**Post date:** [October 29, 2020, 6:17am UTC](https://discourse.processing.org/t/translating-syntax-shorthand-for-beginners/24995/2 "2020-10-29T06:17:02Z")

</div>

Hope this form is the right amount of expansion:

```auto
let t = 0;
let w = 720;

function setup() {
    createCanvas(w, w);
    strokeWeight(5);
}

function draw() {
    t++;
    background(w, 30);

    for (let i = 99; i > 0; i--) {

        let x = int(random(40)) * 18;
        let y = int(random(40)) * 18;

        for (let j = 40; j > 0; j--) {
            n = noise(x / w, y / w + t / w, dist(x, y, w / 2, w / 2) / w);
            n *= 50;
            n = int(n);
            d = n % 4 * TAU / 4;
            x += cos(d) * 6;
            y += sin(d) * 6;
            point(x, y);
        }
    }
}

```

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [October 29, 2020, 6:42am UTC](https://discourse.processing.org/t/translating-syntax-shorthand-for-beginners/24995/3 "2020-10-29T06:42:08Z")

</div>

> **[25+ JavaScript Shorthand Coding Techniques - SitePoint](https://www.sitepoint.com/shorthand-javascript-techniques/)**
>
> Become a faster developer and check out this guide to shorthand JavaScript coding techniques, with longhand versions for comparison.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [October 29, 2020, 8:50am UTC](https://discourse.processing.org/t/translating-syntax-shorthand-for-beginners/24995/4 "2020-10-29T08:50:00Z")

</div>

The list is very nice!

But I have to say, with the initial code example I cringe. I think it’s written to confuse.

I am friend of explicit, longer code. I go for readability, for maintainability.

Not for shortness. If someone (or myself in 6 months) has to maintain my code, it should be readable.

That’s common knowledge, see [https://www.toptal.com/software/six-commandments-of-good-code](https://www.toptal.com/software/six-commandments-of-good-code)

Chrisir

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [October 29, 2020, 9:22am UTC](https://discourse.processing.org/t/translating-syntax-shorthand-for-beginners/24995/5 "2020-10-29T09:22:36Z")

</div>

> [@Chrisir](#):
>
> I am friend of explicit, longer code. I go for readability, for maintainability.

Absolutely, I share the same opinion. (gotoloop probably not)  
But in the case of necessity of translation, it’s handy.

---

<div class="post-metadata">

**Author:** ![mnoble](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnoble/32/99_2.png) [@mnoble](https://discourse.processing.org/u/mnoble)\
**Post date:** [October 29, 2020, 8:15pm UTC](https://discourse.processing.org/t/translating-syntax-shorthand-for-beginners/24995/6 "2020-10-29T20:15:02Z")

</div>

Wow @tabreturn I wasn’t even close to deciphering this! Thank you for unpacking this. Much appreciated.

---

<div class="post-metadata">

**Author:** ![mnoble](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnoble/32/99_2.png) [@mnoble](https://discourse.processing.org/u/mnoble)\
**Post date:** [October 29, 2020, 8:16pm UTC](https://discourse.processing.org/t/translating-syntax-shorthand-for-beginners/24995/7 "2020-10-29T20:16:33Z")

</div>

@noel  
This is really helpful too! I didn’t know what I was looking at!

---

<div class="post-metadata">

**Author:** ![mnoble](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnoble/32/99_2.png) [@mnoble](https://discourse.processing.org/u/mnoble)\
**Post date:** [October 29, 2020, 8:17pm UTC](https://discourse.processing.org/t/translating-syntax-shorthand-for-beginners/24995/8 "2020-10-29T20:17:42Z")

</div>

Definitely better for beginners!

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [October 29, 2020, 8:55pm UTC](https://discourse.processing.org/t/translating-syntax-shorthand-for-beginners/24995/9 "2020-10-29T20:55:33Z")

</div>

But in some way for us beginners it’s fun. 😇

```auto
y=0,f=(x,y,c=0)=>x*x+y*y>4?c:f(3/4-sin(x)*sin(y)*3,abs(y*y-x*x),c+4)
draw=_=>{y++||noStroke(createCanvas(w=960,h=540,WEBGL))+texture(T=createGraphics(w,h))
clear(rotate(PI/2)*rotateY(y/120));sphere(430)
if(y<h)for(x=w;x--;){T.stroke(f(x/w,y/w)).point(x,y)}}

```

---

<div class="post-metadata">

**Author:** ![mnoble](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnoble/32/99_2.png) [@mnoble](https://discourse.processing.org/u/mnoble)\
**Post date:** [October 29, 2020, 9:09pm UTC](https://discourse.processing.org/t/translating-syntax-shorthand-for-beginners/24995/10 "2020-10-29T21:09:31Z")

</div>

That’s lovely - one day I will get there 🙂

---

<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:** [October 30, 2020, 2:59pm UTC](https://discourse.processing.org/t/translating-syntax-shorthand-for-beginners/24995/11 "2020-10-30T14:59:25Z")

</div>

I have read the list in the post above, but I am not able to translate the last sketch.  
Where can I learn more?

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [October 30, 2020, 8:42pm UTC](https://discourse.processing.org/t/translating-syntax-shorthand-for-beginners/24995/12 "2020-10-30T20:42:15Z")

</div>

> [@Chrisir](#):
>
> But I have to say, with the initial code example I cringe. I think it’s written to confuse.

It is written like that intentionally.

There are others here:  
[https://twitter.com/tweetprocessing](https://twitter.com/tweetprocessing)

[#つぶやきProcessing](https://twitter.com/search?q=%23%E3%81%A4%E3%81%B6%E3%82%84%E3%81%8DProcessing&src=hashtag_click)

`:)`

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [October 30, 2020, 8:44pm UTC](https://discourse.processing.org/t/translating-syntax-shorthand-for-beginners/24995/13 "2020-10-30T20:44:02Z")

</div>

Hello,

Adding to topic…

Check out this topic:  
[What does the following syntax do? =\_=\>](https://discourse.processing.org/t/what-does-the-following-syntax-do/20927)

Tiny Tips 'n Tricks:  
[https://www.openprocessing.org/sketch/683375/](https://www.openprocessing.org/sketch/683375/)

`:)`

---

<div class="post-metadata">

**Author:** ![tabreturn](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tabreturn/32/3697_2.png) [@tabreturn](https://discourse.processing.org/u/tabreturn)\
**Post date:** [October 30, 2020, 9:17pm UTC](https://discourse.processing.org/t/translating-syntax-shorthand-for-beginners/24995/14 "2020-10-30T21:17:55Z")

</div>

Here’s an expanded version of the last listing, @J_Silva –

```auto
let y = 0;
let c = 0;
let w = 960;
let h = 540;
let T;

function f(x, y, c = 0) {

    if (x * x + y * y > 4) {
        return c;
    }

    let xarg = 3 / 4 - sin(x) * sin(y) * 3;
    let yarg = abs(y * y - x * x);
    return f(xarg, yarg, c + 4);
}

function setup() {
    createCanvas(w, h, WEBGL);
    T = createGraphics(w, h);
    texture(T);
    noStroke();
}

function draw() {
    y++;
    clear();
    rotate(PI / 2);
    rotateY(y / 120);
    sphere(430);

    if (y < h) {

        for (let x = w; x > 0; x--) {
            T.stroke(f(x / w, y / w));
            T.point(x, y);
        }
    }
}

```

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [October 30, 2020, 9:42pm UTC](https://discourse.processing.org/t/translating-syntax-shorthand-for-beginners/24995/15 "2020-10-30T21:42:03Z")

</div>

I do not recommend shorthand syntax, but like @glv said, “It seems to be on purpose”. In fact, I believe that people on OpenProcessing use it, to make it more difficult for someone to fork their sketch. I would not use setup() within draw(), because in the first place it does not give less code, and second the sketch can slow down substantially. I have made another sketch which I think is easier to understand and to translate. Note the dots used to write several functions on one line.  
But that being said, it still can be fun to write a nice sketch with as little code as possible.

```auto
x=y=z=0;setup=_=>{createCanvas(windowWidth,windowHeight,WEBGL)}
draw=_=>{background(0).noFill().stroke(255).rotateX(x).rotateZ(z).sphere(650)
for(i=0;i<12;i+=4){fill(0).stroke(255).rotateX(x+=.0003)
rotateZ(z+=.0007).rotateY(y+=.001).box(1200,200,200)}}

```

---

<div class="post-metadata">

**Author:** ![tabreturn](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tabreturn/32/3697_2.png) [@tabreturn](https://discourse.processing.org/u/tabreturn)\
**Post date:** [October 30, 2020, 10:35pm UTC](https://discourse.processing.org/t/translating-syntax-shorthand-for-beginners/24995/16 "2020-10-30T22:35:48Z")

</div>

I think this shorthand stuff is great for microblogging platforms. It’s a fun challenge trying to cram your program into a single tweet/micropost using code that prioritises economy over ‘best practice’.

For some more inspiration, you can check out [#tweetcart](https://twitter.com/hashtag/tweetcart), [#tweetjam](https://twitter.com/hashtag/tweetjam), and [#TweetTweetJam](https://twitter.com/hashtag/TweetTweetJam), which are PICO-8 (Lua) games and demos that fit into a tweet or two.

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [October 31, 2020, 12:27am UTC](https://discourse.processing.org/t/translating-syntax-shorthand-for-beginners/24995/17 "2020-10-31T00:27:02Z")

</div>

@mnoble Look at what you started! `:)`

This topic inspired me to make the maze in P5.js.

Processing version:

> [@10 print chr$(205.5+rnd(1)); : goto 10](https://discourse.processing.org/t/10-print-chr-205-5-rnd-1-goto-10/15483/18):
>
> A bit leaner: size(500,500);int x=0,y=0;while(y\<height){int r=int(random(2))\*25;line(x+r,y,x+25-r,y+25);x+=25;if(x\>width){y+=25;x=0;}} size(500, 500); int x=0, y=0; while (y\<height) { int r=int(random(2))\*25; line(x+r, y, x+25-r, y+25); x+=25; if (x\>width) { y+=25; x=0; } }slight_smile

And P5.js version of this:

```auto
// https://10print.org/
// P5.js version of:
// 10 PRINT CHR$(205.5+RND(1)); : GOTO 10

n=25
setup=_=>{createCanvas(w=500,w)
x=y=0
while(y<w){r=int(random(2))*n
line(x+r,y,x+n-r,y+n)
x+=n
if(x>w){y+=n;x=0}}}

```

I removed the semicolons and used a line feed instead; each counts as a character.  
The n=25 did not make it smaller (still the same size) but left it in there for this example.

`:)`

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/d/d5fa8b8403e2e1b085355f82574e874de1ea7836.png)

---

<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:** [October 31, 2020, 2:04am UTC](https://discourse.processing.org/t/translating-syntax-shorthand-for-beginners/24995/18 "2020-10-31T02:04:38Z")

</div>

Thank you @tabreturn for the translation, and everyone else for the help.

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [October 31, 2020, 10:10am UTC](https://discourse.processing.org/t/translating-syntax-shorthand-for-beginners/24995/19 "2020-10-31T10:10:42Z")

</div>

> [@tabreturn](#):
>
> which are PICO-8 (Lua) games

I had not heard of that yet. Fun stuff. Its free competitor TIC-80 allows using JS!  
I thought “That’s odd” because I expected JS much slower in graphs-drawing because it takes all numbers as a 64-bit floating-point format. I suspect that because JS introduced [typed arrays](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays) with all distinct numeric types; I believe for better raw data performance.  
Curious about that I compared a number-crunching mandelbrot sketch with java, and I must say it’s as fast. (or maybe slow). So P5.js is really a good choice because you can embed it everywhere. Even in Google’s free Blogger. (I just tested that)

Click to zoom, and type Home End to change colors.

https://editor.p5js.org/noelpil/present/t0qSoUiMa

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [October 31, 2020, 11:02am UTC](https://discourse.processing.org/t/translating-syntax-shorthand-for-beginners/24995/20 "2020-10-31T11:02:36Z")

</div>

> [@glv](#):
>
> There are others here:  
> [https://twitter.com/tweetprocessing](https://twitter.com/tweetprocessing)

Thanks for that link. I followed it right away! I was surprised that in the type of [syntax compare list](https://twitter.com/takawo/status/1320713691705212930) P.java is still winning. 45 to 33 I love those small sketches. It also is proof that knowing to code is not enough; you also need imagination. I admit that I often throw some geometric functions into draw(), just to see the outcome. But In the same twitter I found such a nice simple but at the same time elegant sketch from @Hau\_kun that clearly shows that he first imagined the sketch, and then coded it. It’s in java and just as shorthand training, I converted it to P5.js. (the dirty way, throwing setup in draw)

```auto
x=y=t=s=p=0;f=1;draw=_=>{createCanvas(w=400,w).strokeWeight(3)
t+=0.01;background(0);for(y=0;y<720;y+=90){f=-f;for(x=-9;x<729;x+=9){
stroke((s=sq(sin((x+y)*.05*noise(y,x*.001+t*.05)*.5+t*f)))*999);
line(x-9,y+(p=(pow(1-s,8))*90),x+9,y+p+25);}}}

```

https://editor.p5js.org/noelpil/present/Tu57C6KAZ

[Next page](https://discourse.processing.org/t/translating-syntax-shorthand-for-beginners/24995.md?page=2)