There are many ways to compress p5.js code created in the first part of this tutorial. I’ll show you the easiest. But before we start, let me ask you to forget everything about the rules of good JS programming. Your code is about to become dirty and unreadable! Don’t worry about warnings as long as your sketch works.

A̶n̶o̶t̶h̶e̶r̶ ̶g̶r̶e̶a̶t̶ ̶e̶d̶i̶t̶o̶r̶

There is a great online tool called つぶやきProcessing Editor.

Unfortunately, this editor doesn’t exist anymore :-(
You can use https://jscompress.com/ instead.

It is created by a guy named Naoto Heida. He managed to create an excellent helper tool for #つぶやきProcessing sketches. In essence, it is a code editor with options to compress JavaScript code, format the code, record animated gifs, and tweet directly from the editor. The minify & run (JavaScript compression) is the only option we are going to use in this tutorial.

Let’s copy & paste the following code into the つぶやきProcessing Editor.

function setup() {
  createCanvas(400, 400, WEBGL);
  noStroke();
}

function draw() {
  background(0);
  pointLight(255, 255, 255, 0, -400, 400);
  pointLight(200, 200, 200, 0, 0, 400);
  for (let i = 0; i < TAU; i += PI / 256) {
    push();
    rotateZ(i);
    translate(100, 0, 0);
    rotateY(i + frameCount / 50);
    box(30, 2, 30);
    pop();
  }
}

Click minify & run to compress the code.

If everything goes as expected then you should get the following result:

The compressed code is 283 characters long. It is not bad having in mind that the original code length is 354 characters!

Please keep in mind that the resulting, compressed, code includes 17 characters long //#つぶやきProcessing hashtag too!

Compression

The JavaScript compressor does a very good job. It compresses the code following its pre-defined rules like optimizing variable names or reformating code blocks. These rules are universal for all JS scripts. But our script always has unique lines and blocks of code which can be refactored and optimized for even better compression results. Using the compressor alone, we can reduce code up to one level. But it’s not intelligent. We must help him achieve better compression results.

Here is a list of changes we can do to our code to improve compression results:

One variable to conquer the setup() function

We don’t need setup() function!

If we have a code block meant to execute only once, we can do it the other way with a little help from a variable. Let’s name it f.

p5js based #つぶやきProcessing variables are global in 99% of cases. Using var, let or const can increase the number of characters.

f=0;
function setup() {
  createCanvas(400, 400, WEBGL);
  noStroke();
}

Now let’s move the whole setup() code block grouped as (createCanvas(400, 400, WEBGL), noStroke()) into draw() function like this:

f=0;
function draw() {
  f++||(createCanvas(400, 400, WEBGL), noStroke());
  background(0);
  pointLight(255, 255, 255, 0, -400, 400);
  pointLight(200, 200, 200, 0, 0, 400);
  for (let i = 0; i < TAU; i += PI / 256) {
    push();
    rotateZ(i);
    translate(100, 0, 0);
    rotateY(i + frameCount / 50);
    box(30, 2, 30);
    pop();
  }
}

(createCanvas(400, 400, WEBGL), noStroke()) is a comma operator expression wrapped in grouping parentheses. In our case, it executes every function separated by a comma (from left to right) and that is all you have to know about it. It is great for grouping functions in one line which is important for our script.

We are using logical OR (||) to execute our grouped code only once. If the variable f on the left can be converted to false, then it executes code on the right; else, it returns the value of f.

In short, at the beginning f is equal to zero which executes the code. With every draw cycle it increases by 1 (1,2,3,…) and the code on the right never gets executed again.

(f = 0 is treated as false. f > 0 is treated as not false. f++ is the same as f=f+1)

Let’s copy the code into the つぶやきProcessing Editor and compress it again.

It is 277 characters! Great! But this is just the beginning.

No frameCount property

Because the f variable gets incremented every frame we can use it to replace the frameCount property too:

f=0;
function draw() {
  f++||(createCanvas(400, 400, WEBGL), noStroke());
  background(0);
  pointLight(255, 255, 255, 0, -400, 400);
  pointLight(200, 200, 200, 0, 0, 400);
  for (let i = 0; i < TAU; i += PI / 256) {
    push();
    rotateZ(i);
    translate(100, 0, 0);
    rotateY(i + f / 50);
    box(30, 2, 30);
    pop();
  }
}

268 Characters!

Compress pointLight() parameters

If we have grayscale lights (all three redgreenblue values are the same) we can write rgb values as array with one value: pointLight(255, 255, 255, 0, -400, 400) as pointLight([255], 0, -400, 400).

f=0;
function draw() {
  f++||(createCanvas(400, 400, WEBGL), noStroke());
  background(0);
  pointLight([255], 0, -400, 400);
  pointLight([200], 0, 0, 400);
  for (let i = 0; i < TAU; i += PI / 256) {
    push();
    rotateZ(i);
    translate(100, 0, 0);
    rotateY(i + f / 50);
    box(30, 2, 30);
    pop();
  }
}

Copy the code into the つぶやきProcessing Editor and compress it… 256 characters!!!

No noStroke()

This one is cool. Our box(30,3,30) has three parameters for width, height, and depth. But we can add the fourth parameter which defines the number of triangle subdivisions in x-dimension. (we can also add the fifth parameter for subdivisions in y-dimension but it is not necessary)

Funny thing is — if we pass a number bigger than 4 as a fourth parameter We’ll get the following warning “Cannot draw stroke on box objects with more than 4 detailX or 4 detailY” but the object will still be rendered — without outlines! Which gives the same effect as the noStroke() function.

So, let’s delete noStroke() function and add the fourth parameter to our box(30,3,30). Another outcome of this action is that we don’t need parentheses for createCanvas(400, 400, WEBGL) because it is the only function to be executed in the case when f=0.

f=0;
function draw() {
  f++||createCanvas(400, 400, WEBGL);
  background(0);
  pointLight([255], 0, -400, 400);
  pointLight([200], 0, 0, 400);
  for (let i = 0; i < TAU; i += PI / 256) {
    push();
    rotateZ(i);
    translate(100, 0, 0);
    rotateY(i + f / 50);
    box(30, 2, 30, 5);
    pop();
  }
}

If you copy & paste in つぶやきProcessing Editor you’ll see that the compressed code is 245 characters long now!

No background()

Instead of using background(), we can use a big box() that can do the same job. It will cover the remains of the previous draw() cycle and fill the scene with black color because it is big and light can not light it properly.

Values bigger than 1000 will be represented by e-notation.
Example: 1000 = 1e3 (1 character gained).

f=0;
function draw() {
  f++||createCanvas(400, 400, WEBGL);
  pointLight([255], 0, -400, 400);
  pointLight([200], 0, 0, 400);
  for (let i = 0; i < TAU; i += PI / 256) {
    push();
    rotateZ(i);
    translate(100, 0, 0);
    rotateY(i + f / 50);
    box(30, 2, 30, 5);
    pop();
  }
  box(1000);
}

240 characters!!!

Put the same values into a variable

Value 400 appears in 5 places in the code! Let’s move it into variable W.

f=0;
function draw() {
  f++||createCanvas(W=400, W, WEBGL);
  pointLight([255], 0, -W, W);
  pointLight([200], 0, 0, W);
  for (let i = 0; i < TAU; i += PI / 256) {
    push();
    rotateZ(i);
    translate(100, 0, 0);
    rotateY(i + f / 50);
    box(30, 2, 30, 5);
    pop();
  }
  box(1000);
}

234 characters!!!

One character here… one character there…

• rotateZ() is the same as rotate()
• value 100 in the translate() function can be changed into 99 without any visible changes
• if the last translate(x,y,z=0) parameter is 0 you can omit it: translate(x,y)
• put box() into pop() as a parameter — it’ll execute before pop().
  (the same goes for any function passed as a pop() parameter)
• remove let i=0 in for loop and keep i=0 only

f=0;
function draw() {
  f++||createCanvas(W=400, W, WEBGL);
  pointLight([255], 0, -W, W);
  pointLight([200], 0, 0, W);
  for (i = 0; i < TAU; i += PI / 256) {
    push();
    rotate(i);
    translate(99, 0);
    rotateY(i + f / 50);
    pop(box(30, 2, 30, 5));
  }
  box(1000);
}

Copy & paste the code in つぶやきProcessing Editor and compress it. It is 225 characters long now!

Arrow function

Finally, we can use a new arrow function instead of the standard one. It has a shorter syntax which is great for code compression.

Instead of function draw() we can use draw=_=>.

f=0;
draw =_=> {
  f++||createCanvas(W=400, W, WEBGL);
  pointLight([255], 0, -W, W);
  pointLight([200], 0, 0, W);
  for (i = 0; i < TAU; i += PI / 256) {
    push();
    rotate(i);
    translate(99, 0);
    rotateY(i + f / 50);
    pop(box(30, 2, 30, 5));
  }
  box(1000);
}

This reduces the code to 219 characters!

Compromise

Our lights are set using the following values:

pointLight([255], 0, -W, W);
pointLight([200], 0, 0, W);

These values give the following result:

Looks like we can use the same light two times with only one different value:

pointLight([255], 0, -W, W);
pointLight([255], 0, W, W);

And get the slightly brighter result:

If the resulting animation looks good then we can do another optimization using the array map function. It iterates an array and passes the iterated value to our function. Like this:

pointLight([255], 0, -W, W);
pointLight([255], 0, W, W);

… changes into:

[-1,1].map(i=>pointLight([255], 0, W * i, W));

Each array value [-1,1] is passed as i to pointLight() function. And then used to position the light on the y-axis W * i.

Finish line

Our final, optimized, code looks like this:

f=0;
draw =_=> {
  f++||createCanvas(W=400, W, WEBGL);
  [-1,1].map(i=>pointLight([255], 0, W * i, W));
  for (i = 0; i < TAU; i += PI / 256) {
    push();
    rotate(i);
    translate(99, 0);
    rotateY(i + f / 50);
    pop(box(30, 2, 30, 5));
  }
  box(1000);
}

Compressed code looks like this:

f=0,draw=a=>{for(f++||createCanvas(W=400,W,WEBGL),[-1,1].map(a=>pointLight([255],0,W*a,W)),i=0;i<TAU;i+=PI/256)push(),rotate(i),translate(99,0),rotateY(i+f/50),pop(box(30,2,30,5));box(1e3)};//#つぶやきProcessing

The final code is 211 characters long (#つぶやきProcessing hashtag included!) which means that you have a whole 69 characters left to add your tweaks and changes to the code.

Be creative! Post your results on Twitter! And don’t forget to keep the #つぶやきProcessing hashtag in the compressed code. This will help people find you.

Cheers,
KT

The #つぶやきProcessing is Twitter hashtag used for indexing Processing (p5.js mostly) sketch code posted in a form of a tweet. The idea is to write code 280 characters long which creates a static or animated visual piece and to attach the result as an image or video respectively.

The #つぶやきProcessing topic requires a whole new article and I will probably cover it in one of the future posts. But for the time being, I suggest you check the hashtag and see all these beautiful pieces created by many talented artists and programmers.

What are we going to create?

In this tutorial, we’ll create a p5.js sketch, create a few visual variants, compress it, make 280 characters (or less) long code, and then leave it to you for further enhancements.

The only prerequisites you need are a text editor, a little JS knowledge, and a will to create a #つぶやきProcessing sketch.

Text editor

The fastest way to start coding #つぶやきProcessing sketch is to use p5js editor.

The editor is designed especially for p5.js sketches. It has integrated preview, syntax coloring, formatting tools, and many other useful options. It is small, fast and it costs nothing. The only thing you have to do is to register to use it.

For this tutorial it is enough to know these options:

1. Play (run the code)
2. Stop (stop playback of the code)

There is also the option to rename the sketch (3).

Let’s start

Select File > New in the editor menu, and you’ll get a basic sketch template:

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
}

Click Run to test it.

Beautiful!

The sketch

This is the result we are going to achieve:

The code

Most of the time simple and clean ideas result in simple code.

If you want to make a #つぶやきProcessing sketch, you must simplify your idea as much as possible. Always ask yourself what is the essence of the scene you want to make. Are all these objects necessary? Static or animated? Color or monochrome? Getting the balance between simplicity and visual richness is tough.

Code length limitation often kills enthusiasm and joy. Don’t worry. Limits boost creativity! You’ll return with a better solution later, tomorrow… or next month — it doesn’t matter when. And the feeling of accomplishment will be great!

This is the code that outputs the animation above:

function setup() {
  createCanvas(400, 400, WEBGL);
  noStroke();
}

function draw() {
  background(0);
  pointLight(255, 255, 255, 0, -400, 400);
  pointLight(200, 200, 200, 0, 0, 400);
  for (let i = 0; i < TAU; i += PI / 256) {
    push();
    rotateZ(i);
    translate(100, 0, 0);
    rotateY(i + frameCount / 50);
    box(30, 2, 30);
    pop();
  }
}

Copy & paste it into the p5.js editor and test.

The resulting scene has rich shading and relatively complex object. And yet the code is very simple.

Setup function

Our sketch is 400 pixels wide, and 400 pixels tall and it uses WEBGL renderer. These properties are set using createCanvas() function. They must be defined only once because creating canvas every frame is very slow and compute-intensive so we are putting the following code into the setup() function of the sketch. The setup() function executes only once — after a sketch starts.

function setup() {
  createCanvas(400, 400, WEBGL);
  noStroke();
}

By default, the edges of all objects are outlined with black lines. We don’t want these outlines. noStroke() disables drawing of them.

Draw function

Animation code goes into the draw() function. The draw() function executes 60 times each second which is perfect for animations. (the number of frames to be displayed every second is controlled with the frameRate() function)

Let’s deconstruct our draw() function.

function draw() {
  background(0);
  pointLight(255, 255, 255, 0, -400, 400);
  pointLight(200, 200, 200, 0, 0, 400);
  for (let i = 0; i < TAU; i += PI / 256) {
    push();
    rotateZ(i);
    translate(100, 0, 0);
    rotateY(i + frameCount / 50);
    box(30, 2, 30);
    pop();
  }
}

Our sketch has a black background(). This function refreshes the screen, clears everything from the previous draw cycle, and fills it with the desired color.

background(0);

Try to use the code without background() and you’ll get a picture of what it does.

There are two pointLight() lights positioned at coordinates which give good surface shading of our object.

pointLight(255, 255, 255, 0, -400, 400);
pointLight(200, 200, 200, 0, 0, 400);

The first three numbers are rgb color values:
pointLight(255, 255, 255, 0, -400, 400).

The last three numbers are xyz position values:
pointLight(255, 255, 255, 0, -400, 400).

Modeling by duplications

The twisted torus in this sketch doesn’t exist as a p5.js object. Custom geometry is also not an option because the final code can be huge. But we can go in the opposite direction and use the simplest p5.js 3d primitive!

A squashed box() object duplicated enough times to create an impression of a torus (and twisted for the final touch) can be represented through the following steps:

for (let i = 0; i < TAU; i += PI / 256) { // 4, 32, 256, ...

// For 4 boxes use 2 instead of 256
  // For 64 boxes use 32 instead of 256
  // For 512 boxes leave 256 as it is now
  // We are using TAU (2*PI) hence the number of duplicates / 2

push();
  rotateZ(i);
  translate(100, 0, 0);
  rotateY(i + frameCount / 50);
  box(30, 2, 30);
  pop();
}

As you can see, we used box() and turned it into a complex object in a few steps:

1. for loop duplicates the box desired number of times.
2. Each loop step starts by saving current global transformation values using the push() command. Every transformation from this point is local.
3. rotateZ() rotate the box around the Z axis by step defined in for loop.
4. translate() the box 100 units to the right (3d space placement is not represented in pixels. The unit value is relative).
5. rotateY() the box around the Y-axis using the current for loop step with a fraction of the current frame value (frameCount). This part animates the twisting of the torus.
6. Draw the box() on the screen. 30 units wide, 2 units tall, and 30 units deep.
7. Finally, use pop() to restore the saved global transformation values for the next for step.

Success!

If you run the code, you should get the following result:

Your turn

Now, let’s add some tweaks to the code. This is the part where you can include your visual improvements. The following variants are just examples of where you can go from here.

If you change the box(30, 2, 30) part of the code with one of the following variants you can get some interesting visual results:

box(s=abs(sin(i*6))*30,2,s,30)

box(s=abs(sin(i*2))*30,2,s,30)

box(s=abs(atan(PI-i))*30,2,s,30)

Every line of code between push() and pop() can be tweaked. I encourage you to play and experiment.

#つぶやきProcessing sketch

We have a sketch. But do we have a #つぶやきProcessing sketch?
Let’s count characters:

354 characters are way more than 280, which is the current Twitter limit. This code must be compressed.
I’ll show you how…

…in the next part of this tutorial 😁

Cheers,
KT