Typography Algorithm
- Gabriela Gor
- Apr 30, 2020
- 2 min read
The algorithm given is a Typography example of a song called “Take me to the riot” by Stars. In the algorithm there are different texts either center, baseline or left aligned. They consist of different fonts, sizes, and colors. When beginning to create this algorithm the first thing you do is function setup, this consists of canvas size and background color. In this case it is “function setup() { createCanvas(400, 400); colorMode(HSB); noStroke(); uptownColor=color (60, 100, 85); } and then function draw() { background (190, 30, 100). This makes the background a light blue like color with a Canvas shape of a square. After this, you use the Typography and events functions to continue making your algorithm. These functions consist of; KeyIsPressed, mouseIsPressed, textSize, textFont, text, fill and else;if.
When creating the first text you begin by using the syntax else; if in this case you write if(keyIsPressed) { then you continue with choosing the textSize in particular (78.2). Next step is where you want the text to be located, textAlign (CENTER, CENTER); this tells the algorithm that the text will be placed in the middle of the canvas. Next is choosing the color and font, when assigning a color the proper format would be, fill(‘insert color’) in this case fill(190, 30, 80); this makes the text a light grey fading type of color. The final step is choosing what you want to write, ultimately what the text will say. In this example it says, text("SATURDAY IN NEON LIGHTS SUNDAY IN A CELL",0,0,400,400). The finishing product should be the text “SATURDAY IN NEON LIGHTS SUNDAY IN A CELL” covering most of the canvas in the center, in a light grey color. If you continue this algorithm using the syntax else;if and the functions spoken about previously you should be able to continue the code creating new sentences or words in the color, size and font of your choice. In order to make the algorithm interactive you just add the function if(mouseIsPressed) and continue the previous steps below it, what this will do is that every time you press any key on the canvas it will change the color the text is currently to a new color of your choice and then revert to the original until you press it again.
This was an explanation of the typography algorithim code. Below is the code:
This is a flowchart I created after to further explain the algorithim:
Comments