Creating Apollo

1. Creating shapes array, each shape is an object with type, position and size:

shapes = [
    ... , 
    {
        type: "circle",
        x: 500,
        y: 500, 
        r: 250, 
        color: color/pattern/empty
    }, 
    ...
]

2. Drawing some pencil-like strokes over the shapes borders. These strokes are actually a lot of dots with dynamic size.

3. Iterating over the pixels on screen and creating intersections dictionary:

intersections = {
    ... ,
    "shapeID_shapeID": color/pattern/empty
    ...
}

This dictionary is crucial to know which intersection we are in while drawing, and to give each intersection a single fill.

This is achieved by checking if the pixel we are in is inside some of the shapes array. Actually, we are creating this dictionary on the fly, while picking colors for the intersections and draw them at the same time.

intersectionsSizes is a another dictionary which created while the first run over the pixels:

intersectionsSizes = {
    ... ,
    "shapeID_shapeID": {
        xMin: 100, 
        xMax: 200, 
        yMin: 300, 
        yMax: 400
    },
    ...
}

This dictionary key is again “shapeID_shapeID” and the value is a size object. The size object got some properties but the most important ones are: xMin, xMax, yMin, yMax. These size props enable me to know the actual size of each intersection, and to draw the grain texture with a fade effect.

4. Iterating second time over the pixels on screen and completing empty spots with the grain texture. If we are in empty mode - there will be intersections who don’t get filled with the grain texture.

5. Drawing again some pencil-like strokes over the shapes borders, this time only inside the frame.