Otherwhere Collective

Browser Support

Lab

Work in development and informal experiments to satisfy an inquisitive mind.Work in development and informal experiments to satisfy an inquisitive mind.

Lab

Work in development and informal experiments to satisfy an inquisitive mind.Work in development and informal experiments to satisfy an inquisitive mind.
Only on desktop. Desktop only. Only on desktop. Desktop only.

Toolbar Key

Adventures in Creative Code

04/24

An initial experiment playing with some p5.js code… drag the cursor around the canvas, have a scribble. Hit reset, start again. Hit save, and keep the image for yourself or share it with a color loving friend.

Test One

AI Generated Type

04/24

Experiments generating readable styled text within an image and as a graphic in Midjourney v6. 

Subtitles in Color

04/24

Subtitle fonts have a dark outline or an outer glow to make sure the text is readable on the moving picture. Is that an effect they have to apply to a regular font? No one knows, but it could be achieved in one pass with color font technology.

Here’s a proof of concept test with a two layer color font—one color for the outline one for the fill—using Mikola Outline Bold 100 as a base.

This could be handy when specifying text on image in brand guidelines… 

Readability

Readable headline

And some 16pt lorem ipsum dummy to test readability of smaller text for extended body copy.

[Indistinct chatter]

Colors

Tested palettes but unlimited combinations possible ♥ Tested palettes but unlimited combinations possible ♥

“There are more things in heaven and earth, Horatio, than are dreamt of in your philosophy.”

3D Scan Test

02/24

Technology is moving fast and it’s exciting to explore new applications at an early stage and see potential uses for brands and products in the near future. I was going to take a still photo of this for a new web page but it’s almost easier to make an actual 3D version of it instead. I have no history in 3D at all and creating this (albeit rough model) a year ago wouldn’t have been something I even considered. 

More and more new technologies are empowering individuals to create things out of their traditional skill set and technical abilities. And if you don’t mind having a logo in the corner, this can be done almost entirely for free

Kiri / Blender / Spline

Interactive Everything

Isometric Color Font Exploration

11/23

Left: Using the combination of 7(!) variable axes on a layered color font with a rollover control to emulate viewing a 3D object from multiple angles. 

Right: Non-interactive animation of a single axis font – text says Bloom.

NB these tiles appear blank in Safari (BOOO) on desktop until v17.2 is released. 

Rollover

A

Animated

bloom

When is a font not a font? When it’s a bunch of random blocks…
Experimenting with a single axis variable font to increase apparent volume of 2D layers drawn on an isometric grid (2D3D). Finding beauty in limitations, and opportunity for potential brand applications.

The shapes aren’t representative of specific letters and colors and are randomly assigned. Side-bearings and position of blocks relative to the baseline is random to give a sense of them being naturally scattered. The result is playful with an architectural sophistication. 

ss01 reveals the relevant letter of the alphabet assigned to each shape. 

Type Tester

dfgsyi

Dynamic Static Multicolor Mono

10/23

This started as a daydream of being able to cycle through shape and color as if a sprite was repeatedly hitting a block in an 8bit video game. 

This has graduated and is
NOW LIVE HERE

POLY MONO Daydream

An evolution of PRIXEL Mono this is an experiment in interaction, and giving choice with limitation—taking out a level of logic to encourage play and discovery. Just hit some keys and see what comes out. In terms of potential application it illustrates how a brand can be more than a single signature color as the consistent combination of many colors creates a recognizable cohesion.

POLYcolor
MONOspace

Keep hitting the same key to reveal color and orientation variations of the same glyph. 
Hypen, comma, and period freeze a block in space. 
Space is a space.
Shift + Return to drop a line.
Only alphabet and numbers have assigned shapes.
.notdef def not working in browser for some reason. 

POLY MONO Type Tester

PPPPPOOOOOOOOLLLLLYY
MMOOOOOOONNNNNNNNOOO

Dynamic Symbols

11/23

In updating Format Sans to be a variable font, the extensive symbol set seemed suddenly passive. This presented an opportunity to explore how the axis can be used to animate and make things more engaging. 

Animated

lENejvg1

The set is an exhaustive study of how interpolation between two shapes can be used in different ways and to varied effect. This is all a font file. 

Rollover Overview

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890®

Potential application could be for animating logos, adding dimension to symbols or telling a story. The benefit being they can be baked into a brand font and altered and implemented by the user (size / color) in the same way they do text.

Logo

S
o

Dimension

A
i

Story

V
k

Cursor Follow

09/23

This, and many other websites, use a rollover control to activate variable font axes. This was an experiment to see how this function could be used (with two axes) outside of the alphabet to do something playful—in this case to follow the cursor around.

Rollover

AA