JAVASCRIPT • TYPOGRAPHY
GENERATIVE TYPOGRAPHY
A collection of coded typographic explorations using Javascript editor p5.js. All the works produced are generated through code. Lastly, a mini-project called TEXT-TURE, is being featured, where I will be exploring typographical forms as texture design.
TEXT-TURE, a series of code experimentations on typography generated textures.
In this project, I drew inspiration from Studio Dumbar's ‘Amsterdam Sinfonietta’ which works with typography as a graphical element. This inspired me to experiment with the use of letterform as a way to create pattern and texture.
Using the letterform of alphabets, I layered them with varying text sizes, colours and positions to create an illusion of a 3-dimensional form. To create texture within 2-dimensional limits, a range of text sizes are applied to form ridges that mimic material. This is further enhanced by creating a light source using a colour gradient that follows the movement of the waveform, to ensure the 'shadows' only fall between the ridges. The wave moves as a whole, with the animation of text sizes and colour in sync, to portray an effective illusion. The subtle animations resemble the kinetics of flowing material. The slow movement of the sketch makes the visual experience calming and pleasing to view.
An interactive version of this project, whereby users can generate their own texture and design. This section of the project serves to reveal the infinite possibilities in which typography can be used to create visuals. By clicking anywhere on the sketch, a random design is generated each time. This interaction allows users to explore and discover how different textures and patterns can be visualised through the use of text size, position, colour and movement.
Below are some designs that were generated through this interactive sketch. Scroll through the slider to see the various patterns made with type. Try finding these designs by clicking on different positions of the sketch on the left or click here.
