Translating Syntax Shorthand for Beginners?

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.

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

Hope this form is the right amount of expansion:

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);
        }
    }
}
2 Likes
3 Likes

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

3 Likes

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

3 Likes

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

1 Like

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

1 Like

Definitely better for beginners!

2 Likes

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

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)}}
2 Likes

That’s lovely - one day I will get there :slight_smile:

1 Like

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

#つぶやきProcessing

:)

1 Like

Hello,

Adding to topic…

Check out this topic:
What does the following syntax do? =_=>

Tiny Tips 'n Tricks:
https://www.openprocessing.org/sketch/683375/

:)

3 Likes

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);
        }
    }
}
2 Likes

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)}}
4 Likes

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.

5 Likes

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

:)

3 Likes

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

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.

2 Likes

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);}}}
3 Likes