Current level: Code-Scavenger. Update in progress (1/14)...

ICM Assignment 1

Status report:

The task, which I chose to accept, was to use the primitive shapes of p5js and to create a screen drawing of my liking.

The constraints that I set on myself for this assignment were:

  • To use the limits of the videosit as a constraint instead of using concepts which I know of (loops, variables etc.) to make my life easier.

  • To focus on understanding the limitations of the shapes for creating an image and where it can get really hairy. One of the first questions in my mind was how would shapes could be parallel, perpendicular or aligned to each other when it was difficult to calculate the exact dimensions of its vertices. (For example: A rectangle which is perpendicular/ parallel to a hypotenuse of a triangle).

While I was thinking of shapes, I started thinking of Monument valley and how pretty the game was but built on repeating shapes and patterns. It seemed like a good enough template to try things with. Also, the player is tasked with recovering ‘sacred geometry’ in the game which fits into the theme of the assignment quite well. =)

So pretty!

I spent some time playing the game again (Hey! It was ‘research’ *Ahem*) and looking at it as a collection of basic shapes was quite illuminating. I also immediately realised the problem with creating isometric shapes with only co-ordinate values without using math-magic and vectors. Needless, I decided to press ahead and see where it would take me.

As test subjects, I decided to focus on the main character of the game, Ida and her awesome, mute side-kick, Totem. I felt that they had the right amount of curves and shapes that would make it a challenging trial.

I decided to start with the Totem first because he(?) is awesome. I immediately decided to not do it in an isometric view and go with a flat view instead. In the spirit of the challenge, I decided to focus on the shapes on Totem’s body on the left side as they would be more challenging to pull off.

It started out pretty well…


The first 2 shapes were very simple. I discovered the beginShape() function which made it a breeze. Though, the process of finding out the coordinates was quite onerous. I haven’t done counting like that since I was in High School!

My initial plan was to make the whole grid of boxes of the Totem which can be then printed and shaped into a 3-D paper object. The best laid plans of mice and men…

Seemingly satisfied with my progress, I decided to tackle the shape pattern inside the 2nd box. And the limitations of using a basic coordinate system were immediately laid bare.

  Align weird shapes, they said. It will be easy, they said…

Align weird shapes, they said. It will be easy, they said…



I could not, for the life of me, figure out how to maintain a consistent distance at an angle between two shapes. Well, not that much of a hacker, I guess.

The failed sketch can be found at: Link

However, I could not leave Totem unfinished! He(?) has already been through a lot. Since I had 4 surfaces to choose from, I chose a relatively easier one and finished the sketch.

Screenshot 2018-09-12 05.30.09.png


The sketch can be found at: Link

I gave the curve functions a spin and I thought that I understood them. But when it came to re-creating Ada or anything with specific, controlled curves, I failed miserably. I have no idea how to control the curves to flow into shapes that I want.

Ada will have to wait. But, I shall be back!

Major learnings:

  • I might be missing something but shapes seem to not be useful without a relative coordinate system. We invented computers so that we don’t have to manually figure out coordinates. But I have no idea how to do that.

  • I have no idea how to use the curve functions to form any kind of a remotely controlled curve. My respect for the programmers who wrote Illustrator’s Pen tool went up by a 100.

  • Must learn curves.



Confidence: +1

Ego: -5

Missions: 1/2

Secrets: 1

Currently listening: Tycho-Awake