Generative Type Explorations

by Abdul Matin

A letter 'r' created via code made to look like a race-track.
Letter 'e' using text-to-point, replacing vector points with ellipses that respond to a sin wave (hence the wavy blobs of circles).
Loading otf file on p5 for custom fonts, rotating on x-axis and moving top-down with a tangent curve (hence the ease in-out).
Recreating Swiss-design poster on code using text and rectangles to create the effect of sub-dividing letters.
A recreated design inspired from Publicité 12, the sketch contains rotating 'i's that respond to mouse movements, zooms and drags. To view the sketch live, click here.
Screen grab of kinetic poster on bus-stop signage, courtesy of Unsplash user, Bram Naus.

Kinetic Poster Maker

Inspired by Instagram user, @kiel.d.m, I sought to create a poster making tool that made use of typography on 3D objects that when mixed together form interesting non-fixed positions of content.

The code allows users to increase or reduce the number of main title element, as well as change the text. Buttons allow them to switch between pre-determined shapes and change orientations to a certain degree—the code does most of the guesswork and the user provides small tweaks to their tastes.

A range of sketches from start to end of workshops!

  • Poster Remake A sketch to warmup our coding skills during the first day of workshop.

  • Type in 3D Sketch showcases uploading custom fonts and animating them in 3D space.

  • Barebones Original sketch that inspired the final project outcome, courtesy of the ever-amazing Andreas.
  • Poster Maker Repurposing project output into custom posters, please feel free to duplicate and try it out yourself!
  • Touchpoint Then record and upload the video / gif into this sketch for the mockup!