STUDIO 2 COMMUNICATION DESIGN 2021
A TO THE K STUDENT KNOWLEDGE OBJECT Reflection by Daniel Pipolo s3839479
ISSUE 1
“The mind does not enter into the alphabet or the printed book or the computer so much as the alphabet or print or the computer enters the mind, producing new states of awareness there.” – Walter Ong
4 - Introduction Course outline and project summaries 6 - Hour of Code A crash course into the program Processing and the coding language P5.js 8 - PROTOTYPETYPE Making a modular typeface without the use of a computer 10 - Major Project Font creation using FontForge and coding an interactive type sampler 12 - Reflection A look back at the semster and its learnings
INTRODUCTION When looking through the list of available electives for Studio 2 I knew immediately after reading the class description, and seeing that It was run by Andy and Karen, that A to the K was for me. What intrigued me about the class was how cutting edge it seemed to be, promising to push typography into the next frontier with topics of variable typography and the design and coding of fonts. Having an interest in both technology and typography I was excited to learn more. Also known as Computational Typography, the class offers two projects and a Student Knowledge Object. The first project, titled PROTOTYPETYPE, introduces the idea of modular typography, in which I was tasked with creating a typeface without the use of a computer, and instead with materialistic things that can be found in the real world. The second project, was the Major Assignment that PAGE 4
we would spend majority of our time in this course working on. We would be tasked with the creation of our own font, this time using a computer, and coding an interactive, web-based, type sampler to display and advertise our new font. On top of working on these projects, Karen ran a weekly ‘hour of code’, in which we were given a crash course into the coding language P5.js, which we would use in our Major Project. The final task was the Student Knowledge Object (SKO), which collates my learning, research, and progress which was initially documented in a Tumblr Blog between classes. This Tumblr was a reflective task where I assumed the persona of an internet blogger, regularly posting my development of class projects. Those posts have been reworked into the publication in which you are reading now.
Hour of Code Next Page
PROTOTYPETYPE Page 8
Gummy Bear Regular
MAJOR PROJECT
ABCDEFGHIJKLMN OPQRSTUVWXYZ abcdefghiklmno pqrstuvwxyz!?.,:;* 0123456789<>/\ @#$%&=+-×÷
Page 10
Daniel Pipolo
PAGE 5
HOUR OF CODE I found the Hour of Code sessions to be both challenging and rewarding. The quick pace of these classes forces you to think fast to identify problems so as to not be left behind. While stressful at times when code doesn’t work as intended, solving the problem can be the most fun aspect of the tasks. The language used was P5.js, which has its roots in JavaScript and HTML, while having an interface that is more tailored to designers. Our first task was to learn how to code and display shapes in a web page, as well as the use of colour in the shape fills and the background. After learning about modular typography, and creating our initials using shapes, we were challenged to recreate these initials in P5. The next Hour of Code we started to learn some functions such as ‘mousePressed’, ‘keyPressed’ and mapping colours to the mouse. These functions allowed us to change colours based on a series of inputs such as when the mouse is clicked or when a key on the keyboard is clicked. We were also taught how to use the mouse like a paintbrush, leaving behind colour wherever the curser is located. In the third session we started to learn how to import a font and display it in a webpage as well as changing its rotation and size by mapping to the mouse. This was an important skill to learn as we eventually PAGE 6
Top: Initial design of my intials using modular tyopgraphy Middle: The same initals recreated with P5, and including funtions such as mousePressed and mapping to paint colour across the screen Bottom: The same sketch, with mouseClicked activated changing the colour of the initials, showing the diversity of imagery you can achieve with the code
Top: Sketch that places letters at random locations on the screen at random sizes that fade away over time Middle: Sketch that spins a word based on the location of your mouse, changing rotation and size, while having a delayed background refresh Bottom: Setting a paragrah using my Major Project font
needed to display our own fonts in our sampler for the Major Project. The next few classes added to our knowledge of using type in P5 where we learned how to display letters at random places on the screen over time and also how to set type in a paragraph. Setting type in a paragraph was an important function for me to learn as I hoped to set all of my glyphs out for my sampler. The remaining classes were spent on catering to the needs of the class and what they wanted to learn to use for their type samplers. Two major takeaways from these sessions for me were the functions ‘keyTyped’ and using sound. ‘keyTyped’ allows you to type words across the screen like you would in a Word document, only this would work in a web page. Sound was tricky for me to learn as you had to ensure the sound file was in the correct folder locations, as well as having the sound library linked in the HTML source code. Although there was a lot of content to go through in a short amount of time I think the Hour of Code classes did a good job in making me feel confident enough to pull off my type sampler. The rapid pace kept the classes energetic and exciting which was good as coding tends to get laborious at times.
PAGE 7
PROTOTYPETYPE The first assignment of the semester challenged us with the creation of a modular typeface (maximum 26 glyphs) without using a computer. This pushed us into using found objects that could connect together to make the letterforms, and photograph these outcomes to serve as the typeface. In the early stages it took some time to decide on my material or objects and I trialled many different items that I had found. These items included cassette tapes, guitar picks, batteries and PlayDoh. Although I initially liked the guitar picks and cassette tapes I ultimately decided against them as I was concerned that It would lead me to make a bitmap typeface. Ultimately, I decided to use PlayDoh as I liked the diversity that it offers in both colour and materiality. The PlayDoh also gave me the freedom of form as I could mould it into anything I wanted. My initial experiments with PlayDoh consisted of moulding the letters out of the clay, but after being reminded that the project had to be modular I reconsidered my ideas and started to ponder the potential of a modular PlayDoh typeface. I began to create a plan for the typeface and designed a set of shapes that could be built into the letters. I also created a set of rules for how the shapes could be connected. These rules ensured that I could only PAGE 8
use a maximum of 5 straight pieces and two curved pieces. The maximum height of the letters was the total distance of two vertical and two horizontal pieces, and a minimum height of two vertical pieces. The maximum length of the letters was the distance of two horizontal pieces, with no minimum. Additional rules were that the shapes could only be rotated at right angles but were free to connect at any point. I then drew the outlines of my shapes on a piece of A4 paper, and started to model the clay within the outlines to create my pieces, ensuring every shape was the same size. The final step was to photograph my assembled letters one at a time, then using Photoshop I removed the backgrounds of the shapes and arranged them onto an A3 page to display the entire alphabet. I wanted to keep the process as natural as possible and there was no digital tampering with the letters, ensuring that each letter was to scale with each other. Some letters naturally appear a bit taller than others which helps add to the playful aesthetic of the outcome. My feedback for this assignment stated that I could have been more experimental with the chosen material and was urged to go out of my comfort zone for the next assignment. It was from here that I started to conceive my ideas for the Major Project.
Top Left: Rough Sketch that shows instructions and rules for how to form and build the letters Top Right: Image of the modular pieces being molded Bottom: Final outcome
PAGE 9
MAJOR PROJECT For the Major Project we were given a great deal of time to develop our typeface and code our type sampler. To assist in the creation of our fonts Andy introduced us to the program FontForge. FontForge allows you to import designed letters and generate them into a .OTF file, which are used to install and use fonts on your computer. Andy also supplied us with an Illustrator template where we could design our letters then export as .SVG’s to open in FontForge. As an initial experiment with the programs, I created a font using just rectangles, called Cyclops. The font was quite simple but it allowed me to develop the toolchain that I would use to create the font that would be submitted for the final submission. I knew from the beginning that I wanted to continue my ideas of a font that offered playfulness in its design and drew up many iterations of letters that appeared soft and bubbly. When struggling to come up with an Idea this way I decided to try another modular font, this time creating the shapes in Illustrator. I started assembling letters using just two shapes, a square and a quadrant, but wanted to add extra curve to my shapes and used a macaroni shape that was two squares high. Once my shapes were established, and I started to design letters, I realised the forms PAGE 10
Top: Initial sketches Middle: Concept Inspiration Bottom: Diagram showing how letters are assembled
of the letters reminded me of lollies or gummy bears. From here I decided to explore this idea further to serve as an underlying concept for my typeface. It was at this point that I chose the title of the font as Gummy Bear and started to consider ideas of how I could explore the concept of a candy font within my web based type sampler. After seeing the capabilities of P5 during the Hour of Code sessions, I began dreaming up ideas of how my typeface could be interactive. Initial ideas consisted of letters that were squishy and could be pushed in, however I decided to make letters that like candy, could be picked out of a bag and eaten. The eating function would be achieved by placing a bite mark shape wherever the letter was clicked, simultaneously playing a “chomp” sound effect. I also wanted the letters to be displayed with a candy-like pastel colour, that would randomise based on a palette. Once I had set my goals I began to research and find bits of code that would help make my dream a reality. The final outcome achieved what I set out to do, however if I had extra time I would also have liked to make the letters shine and wiggle like jelly. Overall I am very satisfied with both my font and my sampler, I feel like my design skills have come a long way just from working on this project.
Gummy Bear Regular
ABCDEFGHIJKLMN OPQRSTUVWXYZ abcdefghiklmno pqrstuvwxyz!?.,:;* 0123456789<>/\ @#$%&=+-×÷ Daniel Pipolo
Top: Final Font with all glyphs Middle: Final interactive type sampler Bottom: “Hero Image” of project
PAGE 11
REFLECTION This semester in A to the K of Computational Typography gave me many new skills that I hope to build upon and use in the future. The main one being the digital creation of a typeface. Knowing how to use FontForge as well as how to set bearings for kerning will be a skill that holds value to employers and I hope to one day create fonts not only professionally but also for personal enjoyment. Although I had a very basic understanding of coding, this class helped advance my skills to new levels. While coding may not be for me, I’m glad that I took this class as it gave me a fun challenge and opportunity to problem solve. A skill that I did not expect to gain from this course was better documentation of my own work. I realised that my class folders on my laptop had many more files of research, scanned sketches and PAGE 12
versions of projects of than previous semesters. My Tumblr also had a greater quantity of posts, with more detailed writing and images than last semester. I believe that this class has made me not only a better designer in the way that I produce outcomes, but also in the process of collating ideas to back up my finals. As a whole I am very glad that I chose this class as I got a lot out of it. I am very thankful to my teachers Andy and Karen who put in a lot of effort to create a class that is not only fun but informative and inspirational.
2021, Daniel Pipolo, s3839479, A TO THE K OF COMPUTATIONAL TYPOGRAPHY Visit https://www.tumblr.com/blog/danfutura to access the Tumblr blog
