2 Type Manual: Grids

We started by looking at systems. Lots of maths. Lots. It made me glad I took Mathematics 131. We talked about the Fibonacci sequence and the Golden Ratio (and it’s overuse by nature…) and looked at different uses of them in pages. The system of squares was one thing that confused me. The fact that you have to create a point from the centre of a square to another edge using an arc, to divide the system in another square, which can be divided further using the same method. Just putting it in a sentence makes it sound confusing. Looking at illustrations helped to see the spiral that was being created.  Other systems we looked at was the root 2 sequence, Den system, Rule of thirds, root 3  and root 5 sequence. The root 4 sequence was a very simple system (since root 4 is simple 2).

We had to create page systems using the root 2, 3, 5 and Golden Ratio, (not root 4…because it’s too simple—even though I really wanted square pages…). A way to start was by simply picking a unit of measurement. It could be a number you make up or a measurement you take (which can be more meaningful conceptually). Using this and the rules, I could decide my page dimensions and then move on to the grid (how many columns and rows I want, depending on my system). For example, a system of root 5 would go up in factors of 5, system of Golden Ratio would use the Fibonacci sequence etc.

I started by using a line measure as a unit. I made a paragraph with average measure of 55-75 characters and used that as my unit:

typeography00021 typeography00024
 used Golden Ratio

^ Realised that the grid was too big for an A3 page, we were recommended to keep it inside A3, so I cut the grid size down.

Using this method I was able to create a relatively square book. After experimenting with paragraphs as units for page systems  I used my hand measurements. I experimented with the width, span and height of my hand. I also Googled the size of an average male hand and used that…because my manual wasn’t just for me.

The Root 3, Root 2 and Root 5 sequences were the ones that I focused on the most. Especially root 3 and root 5 because they gave my finer grids, so more flexibility on where to position objects.
I used 0.4 and 0.5 cm as gutters, because apparently there was a way to decide gutters, which we hadn’t gone over yet:

 Apart from my hand height, I also looked at my mug for a unit of measurement. Doing this made me notice how things in general are designed while keeping aspects like hand size in mind. My mug height gave me very similar results to my hand height. What really struck me was my lunchbox, it’s dimensions were almost identical to my hand.

By the end of it I ended up having around 20 grids

These were some of my main grids that I liked.

^ It was after the class discussion that I realised that I did these wrong. The grid wasn’t divided enough to give me enough ways to position my type. There were only 2 columns in one and 3 in the other.

The discussion also made me realise that more detailed wasn’t necessarily better. The grids that are too fine won’t even be perceivable. A common thing that everyone in the class did was make tiny pages. We all wanted cute books, I argued that they were like pocket dictionaries. But then we weren’t making pocket dictionaries.

This was a ‘grid’ that I had made, that I didn’t print out, mostly because I had a feeling that it was messed up. I had talked about having a grid that wasn’t like an even grid, but more like a brick like grid or honeycomb grid. Going through our discussion and thinking it through made me realise that the grid wouldn’t work:

 How would I arrange my columns of type and images on such a weird grid? Now that I look at it, it looks so impossible. Don’t know why I thought it made sense earlier.


Arduino – Displaying them and Introduction to circuits

We ended up spending and entire lesson trying to display our work. Eman and I had to look at the wirings and got a brief explanation of how the positive/live socket and ground worked. Since power supply cables were limited we had to figure out how to wire all our arduinos in such a way to maximise the use of the cables. Solutions involved reprogramming our boards (Amira and Amreen)…it was either that or soldering forked wires. Reprogramming was a simple step of changing the (7-y) in a single line of code.


Final Result

They didn’t sync as perfectly as we had imagined. The reason was that we all had different numbers of frames. However, the imperfection grew on us. The concept of the dancefloor was enhanced when Wall.e would dance with Abu or when Eve would dance with the Genie, instead of their proper partners.


The second lesson was fun. We got a refresher of high school physics and the concepts of sensors. We moved on from working with Rainbowduinos to working with Arduinos. This involved looking more at the circuitry and the effect of programming the hardware on the readings and outputs. We revisited concepts like using the serial monitor to see how the code was being read.

Arduino – has input and output (input sensor or other info – can be analogue or digital, output light/movement/other action – again can be analogue or digital:

input > arduino > output -led (light)

-sensors -servo (movement)
-button -motor (movement)
-touch -speaker (sound)
-sound -screen (visual)
-potentiometer <<<
-tilt/accelerometer <<<

The best part? This look at the arduino would be Interactive!

Circuit – if it’s not complete, then nothing will work

wise words…

The basic idea was that there were 13 digital pins? And that we could program the pins directly, for example: ‘turn on pin 13’
^ every single one pin is 5V and can be controlled directly.

Something to remember is that of those pins, 6 were analog pins? (the ones with ~ next to them). This meant that sensors could be attached to them, and it could be programmed with instructions like: ‘analog IN’…It related to the concept of a pwm – pule width modulation. We could use code like:

analogeWrite(pin, value) – to send a  virtual analogue signal. (pwm?)


Instead of working independently, we all worked together on a first experiment:

We learnt how to light up an LED. Long one in 5v, short one in ground, this needed a resistor since too much current can result in burnouts.

resistance is key to circuits – restrict amount of energy to prevent burnout

V = IR

I = V/R

R = V/I

Like how we programmed our Rainbowduinos, we have to set the pinMode in the setup – only need to write it once. We used the main Arduino website as a reference again:

pinMode (pin, mode);
pin – pin number
modes – input, output, input_pullup

high = on
low = off

I/O – input output

Screen Shot 2016-01-18 at 4.35.52 PM 1y3Fu Screen Shot 2016-01-18 at 4.51.48 PM

pinnacle of our learning – randomly blinking lights


Next lesson we really looked at how to read analogue readings (from an input). We ended the previous lesson trying to unsuccessfully do this. The problem was simply reading the pin as

A0 instead of just 0:

Screen Shot 2016-01-20 at 10.34.12 AM

power (+5v) >> photoresistor (control amount of flow) > gnd

^ Personally I didn’t get this concept. How could we see if our code works or not without a physical output? Turns out we use the serial monitor as an output.

>>  > A0 input (act like another gnd)

We learnt the details of how printing worked. Serial print will print a character in a continuous line:

current = constrain(current,0,9)

^ constraining readings from raw readings of 0-1023 to a desired range (1-10 or 0-8 or 0-5…you get the idea) allows us to set an output for a specific range. Say the reading is small, then the fan will go slow (pretend I put a fan as an output). The speed of the fan will go up on the scale of 0-5. The thing with these numbers is that they could be used to play frames as well, frames 0-8, depending on which reading is being sensed…

The homework was to read chapters in the Arduino book about these concepts, to help us learn more about circuits.

The Martian

I was looking at how I liked the ‘space-like’/futuristic feel of the type on the book cover of The Martian that I thought of using this as one of my inspirations.


Not only do I like it, but I also think it’s a good typeface choice (at least for it’s current purpose). Good, because it fits the context of the story, it fits into the kind of types that are always associated with technology and space. Why I like it is probably because of the same reason. It looks like something that belongs on a NASA space station. A typeface that you’d find on the exterior of a spaceship.

The inner concept of the type was also to do with telling a futuristic story (the way the D in Andy is the only letter with a serif, adds to this). The concept behind the design and it’s unconventional (in the sense that it’s not very common in an everyday situation) look was what caught my eye in the first place.

Arduino: Final collaborative characters

For the final phase of animating on the arduinos the four of us (Eman, Amreen, Amira and I) decided to collaborate again. Concepts we considered were trains going from a screen to the next, characters running from screen to screen. We realised that trying to make things sync that way wouldn’t really work very well. We came with the idea of creating simple characters, 1 on 2 screens that are dancing next to each other.

I controlled the bottom half of wall.e  and genie while Amreen controlled the top half. We had to work together to make the animation look somewhat synced, if not perfectly.

 I was planning on making his tail move, but instead it just looked disjointed and looked like too much with the genies hands dancing AND the lamp blinking. I focused on just making the lamp blink quickly.

 Our next plan was to give the characters context, otherwise they just looked like they were floating in emptiness. It sounds simple. But creating a dancefloor was a big issue.

dance floor issues:

Initially it wasn’t possible to play the two (character and the dance floor) at the same time. I would draw the floor, but it would disappear when I wanted to add the character:



I asked my sister if she could suggest any solutions. She suggested that I do a search on threads . I wasn’t sure what she meant,  but it was meant to bypass the coding issue (playing two things at the same time wasn’t working). But in the end it turned out that Arduino didn’t support threads?

In the end, she worked with me, giving me a crash course in  coding and refreshing my high school maths: “What is a modulus???” – her

We tried using the concept of the modulus to make the two animations play at the same at such a fast speed that it looked as if they were playing together (details in the comments of the code):

arduino00046 arduino00049

^ The percentage sign here wasn’t a percentage, it was a check against the number we gave.


In the end she figured it out…I figured that she was playing the two at the same time in the areas where the screen was blank (if i=0x000000):


I added an extra line of code to limit that to the last line



^ As you can see it still wasn’t seamless. The characters animation would play over itself…

In the end the Professor helped:

arduino00056 arduino00057

^ I still need to get an explanation of how he achieved this so simply……….

Arduino: Looking at Generative design

We discussed how boolean datatypes (1’s and 0s) can be used to reduce using storage since a lot of us were running out of storage again. The problem was that this datatype could only be used if we were using only 2 colors/variables in our arrays.

We looked at other ways to create images. Other, more spontaneous ways such as generative/procedural design [random? systems]. Watching a video about Conway’s Game of Life gave us an idea of what generative design was:

Stephen Hawkings The Meaning of Life (John Conway’s Game of Life segment)

We talked about emergent systems and how these, IT and mathematics related to game design:

a set of simple rules are created > the results are unpredictably complex.

We used this to create random functions to draw ‘random’ shapes. But then added on ‘limits’ or max and min ranges to the functions to somewhat control the randomness.


Once we all got the basics of generative design we were left to make something cool with it (or with any other thing we learned in the past few weeks) for the rest of the lesson.

Eman, Amira, Amreen and I decided to do something that we wanted to for a while now (ever since the LED matrices were introduced to us). We made a generic window scene, each controlling a square of the window. we planned to place the screens next to each other with even gaps to make it look like the window pane. Amira decided the colour of the sky and animated the sun, Eman animated the flower and Amreen and I tried to sync an apple falling from the top of the tree on her screen to the ground on mine.

The coding part was simple, we used arrays, it was choosing the delays that was complicated. In the end we synced them, but after a few loops, the screens would go out of sync for a while, then loop back to sync again.


Even though we couldn’t sync them properly, we were able to create a harmonious scene because we shared the exact hexadecimals of colours and matched shapes that flowed from on screen to another (grass and tree and sky).

Arduino: Animations

Using any means we wanted (arrays, loops anything we learned so far) We had to create a few animations loosely based around the topics:
typography (fonts)
famous work of art

Keeping in mind the concept of ‘story’

Ideas I had:

famous work of art: The Scream, The Great Wave
Flag and food to show story  of the works of art? Country and background of artists?

I decided to start with my personal favourite, The Scream by Edvard Munch:

My idea evolved through the process. I made the first frame to begin with.


The painting was not clear at such a small scale (because of the teensy screen and limited number of bits) so I got the idea to zoom. I zoomed and needed features to appear from nothing. The thought of making them appear in a sequence came next. I could show the eyes first, then lips then the mouth opens bit by bit. This would emphasise the scream!


I used what we learned about frame sequences to alter the timings of how I wanted the frames to appear.

I wrote comments to show my thought processes in the code itself:
 a clearer explanation is that I stored different frame sequences : e.gtotalFrames0, totalFrames and totalFrames2 with the different frames (zooming in and mouth opening). This was so that I could alter the speed with which each sequence took place.



Next I decided to animate a scrolling flag of Norway (Edvard Munch was from Norway). The problem was that even though the flag was a simple cross, getting the correct thickness and proportions in the correct spot was difficult, again because of the limited number of pixels and the square matrix.

I tried different styles, finally settling on the one on the far left (top row):


I made a spaceship next because I had the thought of zooming into the mouth so much that it reveals a spaceship inside…some kind of zany animation. I didn’t do that part, but made an animation of a ufo bobbing around while stars whizz past it.


initially I had a delay so that the UFO pauses after bobbing in a circle once, but it just looked unnatural and I got rid of the pause.


My last step was to try to figure out how to make the stars fly by at a faster speed than the hovering spaceship:

arduino00019 arduino00020

^^^  Using this method I couldn’t get the stars to play separately from ship. But I got the ship to play alone with the top and bottom rows being blank…I  changed y=0 to y=1 and changed the dimensions of the array. Still need to figure out how to add on the stars.

1 Type Manual: Introduction and Research

Beginning of another grueling semester. Beginning of another Type project. The introduction sounded simply, yet daunting. Especially since apparently this is possible the most challenging/complex project of the semester for this course. I hope that starting with the most difficult is a good idea. Moving on to the project:

We need to make a type manual. Setting the type into pages (with systems and grids and all things professional). What sounds like fun is having our own (personally created by ourselves–binding and all) reference manual for typography lingo. What sounds scary is the first part (the grids and professional part).  I only did get the basics of how to use a grid near the very end of the Type 1 class. Anyway, beginning the project was relatively simple:

Find definitions of all the keywords (around 60), using a variety of sources (preferably books and not Wikipedia).

After a while of going back and forth through the index I had the bright idea of organizing the words in alphabetical order (Microsoft Excel, alphabetical sort…), like a dictionary, made it easier to look the words up.

^This gave me the idea to consider sorting my keywords in alphabetical order in my system to make it quicker to look through.

As I was looking through my sources, I noticed that one of my books (which was a manual itself) wrote the explanation of a word IN and example. For example, there was an explanation of what justification was, it’s pros, cons and uses, the writer chose to use  the explanation for the text INSIDE a justified paragraph as an example of justified text. Explanationception.


I noted this down as an idea  of having my definition text as the example as a possible part of my system (something I would definitely want to explore), because it seems like it would result in a more compact and efficient manual (efficient use of space/paper/medium).

Another ‘ingenious’ thing that happened was that it was only after I had exhausted myself finding most of the words (and gotten very demotivated because it was a  simple but not very fun task), did me and my friends have the bright idea to split the words between ourselves. I told them the words that I hadn’t found. It was better to do it this way since I had focused on two sources, ensuring that I didn’t miss any definitions or examples present in them and that my friends didn’t waste their time looking in those sources for definitions that weren’t there.