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

Chrisir

Absolutely, I share the same opinion. (gotoloop probably not)

But in the case of necessity of translation, it’s handy.

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

Definitely better for beginners!

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

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

That’s lovely - one day I will get there

I have read the list in the post above, but I am not able to translate the last sketch.

Where can I learn more?

It is written like that intentionally.

There are others here:

https://twitter.com/tweetprocessing

`:)`

Hello,

Adding to topic…

Check out this topic:

What does the following syntax do? =_=>

Tiny Tips 'n Tricks:

https://www.openprocessing.org/sketch/683375/

`:)`

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

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

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.

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

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, #tweetjam, and #TweetTweetJam, which are PICO-8 (Lua) games and demos that fit into a tweet or two.

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

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

Processing version:

And P5.js version of this:

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

`:)`

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

Thanks for that link. I followed it right away! I was surprised that in the type of syntax compare list 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)

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

The way you did the shorthand here actually doesn’t appear confusing at all. It looks even cleaner.

Same version with semicolons and single line:

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

Same character count!

Enjoying the topic and your @noel posts here.

`:)`