Note: This is the third (and last) part of a tutorial, read first part and second one in case you haven’t.

What didn’t make it

Before focusing on minimizing the size of the finished 1k notebook design, I made several experiments on different methods of texture generation to try to simulate the paper. Unfortunately neither of them was enough small and give good visual results at the same time. So I decided to explain it here, next one was the best style looking of all the ones I tried.

The texture generation

The algorithm is based on a different step sequence applied in order. First step is to generate a bunch of black to white random gradient covering the whole canvas. Each one is copied to a second canvas with a ‘difference’ brush applied. This means, before pasting the gradient to the canvas, check the destination and origin pixels and compare them, store the absolute difference between the two on the destination canvas. The code to do this is really small.

var Q=a.createImageData(W,H);
var O=Q.data;
for (var j=9;j--;) {
 var G=a.createLinearGradient(
    Math.random()*W,
    Math.random()*H,
    Math.random()*W,
    Math.random()*H);
 G.addColorStop(0,'#FFF');
 G.addColorStop(1,'#000');
 a.fillStyle=G;
 a.fillRect(0,0,W,H);
 I=a.getImageData(0,0,W,H).data;
 for(i=n;i--;)
   O[i]=(i+1)%4?Math.abs(O[i]-I[i]):255;
}

The single gradient generated on every iteration is like this one.

By repeating this with the difference brush, we got the texture step on the left. The next step is to apply several emboss filters in sequence (2 in this case). After this, the paper texture is generated. The result is on the right.

The emboss filter is applied by using the 2 canvas and the emboss matrix filter, with different weight value on each case.

[0  0  0]
[0  1  0]
[0  0 -0.5]  // Emboss filter matrix

// p & q are Imagedata.data
// r is the weight value

j=W*4+16;
for (i=0; i<n; i+=4,j+=4) {
 q[i]=q[i+1]=q[i+2]=r-(p[i]-p[j]*.5);
 q[i+3]=255
}

Once the paper is generated, the blue and red lines are drawn using alpha blending. The top holes are made by drawing black circles and the texture is complete.

Unfortunately, the whole code size for this generator is too much to fit together with the font data and rendering algorithm. That’s why was not included in the submitted version to the contest.