adventures in programmatic branding – how to design with algorithms and how to tame metaballs? by...

36

Upload: exove

Post on 21-Jan-2018

103 views

Category:

Design


1 download

TRANSCRIPT

Page 1: Adventures In Programmatic Branding – How To Design With Algorithms And How To Tame Metaballs? by AKI-VILLE PÖYKIÖ
Page 2: Adventures In Programmatic Branding – How To Design With Algorithms And How To Tame Metaballs? by AKI-VILLE PÖYKIÖ

Metaballs, isosurfaces & black boxesAdventures in programmatic branding

Aki-VilleExove Design

Page 3: Adventures In Programmatic Branding – How To Design With Algorithms And How To Tame Metaballs? by AKI-VILLE PÖYKIÖ

www.womenintech.sg

Page 4: Adventures In Programmatic Branding – How To Design With Algorithms And How To Tame Metaballs? by AKI-VILLE PÖYKIÖ

Women Technology

Page 5: Adventures In Programmatic Branding – How To Design With Algorithms And How To Tame Metaballs? by AKI-VILLE PÖYKIÖ

Diversity

Technology

Page 6: Adventures In Programmatic Branding – How To Design With Algorithms And How To Tame Metaballs? by AKI-VILLE PÖYKIÖ

Diversity

Technology

Movement

Dynamic

EvolvingChange

Interactive

Page 7: Adventures In Programmatic Branding – How To Design With Algorithms And How To Tame Metaballs? by AKI-VILLE PÖYKIÖ

Techy but organic

Programmed but freeform

Diverse, not dualistic

Page 8: Adventures In Programmatic Branding – How To Design With Algorithms And How To Tame Metaballs? by AKI-VILLE PÖYKIÖ

Brand = Code

Page 9: Adventures In Programmatic Branding – How To Design With Algorithms And How To Tame Metaballs? by AKI-VILLE PÖYKIÖ

Isosurfaces.

Page 10: Adventures In Programmatic Branding – How To Design With Algorithms And How To Tame Metaballs? by AKI-VILLE PÖYKIÖ

An isosurface is a surface created by applying one or more functions onto a 3d space or a 2d plane.

An isosurface is a level set of this function.

Page 11: Adventures In Programmatic Branding – How To Design With Algorithms And How To Tame Metaballs? by AKI-VILLE PÖYKIÖ

F(x,y) = (x - x0)^2 + (y - y0)^2 = R^2

Page 12: Adventures In Programmatic Branding – How To Design With Algorithms And How To Tame Metaballs? by AKI-VILLE PÖYKIÖ
Page 13: Adventures In Programmatic Branding – How To Design With Algorithms And How To Tame Metaballs? by AKI-VILLE PÖYKIÖ

Metaballs.

Page 14: Adventures In Programmatic Branding – How To Design With Algorithms And How To Tame Metaballs? by AKI-VILLE PÖYKIÖ

Metaballsare a subset of isosurfaces. And also

organic-looking n-dimensional objects.

Page 15: Adventures In Programmatic Branding – How To Design With Algorithms And How To Tame Metaballs? by AKI-VILLE PÖYKIÖ
Page 16: Adventures In Programmatic Branding – How To Design With Algorithms And How To Tame Metaballs? by AKI-VILLE PÖYKIÖ
Page 17: Adventures In Programmatic Branding – How To Design With Algorithms And How To Tame Metaballs? by AKI-VILLE PÖYKIÖ

F(x,y) = (x - x0)^2 + (y - y0)^2 = R^2

v

M(x,y) = R / sqrt( (x-x0)^2 + (y-y0)^2 )

Page 18: Adventures In Programmatic Branding – How To Design With Algorithms And How To Tame Metaballs? by AKI-VILLE PÖYKIÖ

CC BY-SA 3.0 https://commons.wikimedia.org/w/index.php?curid=5237220

Page 19: Adventures In Programmatic Branding – How To Design With Algorithms And How To Tame Metaballs? by AKI-VILLE PÖYKIÖ

1. Iterate through every pixel on the screen

2. Iterate through every Metaball in the world

3. Calculate that Metaball's function for the currentpixel, and add it to that coordinate's current value.

Page 20: Adventures In Programmatic Branding – How To Design With Algorithms And How To Tame Metaballs? by AKI-VILLE PÖYKIÖ

Processing.org

Page 22: Adventures In Programmatic Branding – How To Design With Algorithms And How To Tame Metaballs? by AKI-VILLE PÖYKIÖ

Done!

Page 23: Adventures In Programmatic Branding – How To Design With Algorithms And How To Tame Metaballs? by AKI-VILLE PÖYKIÖ

Not so fast...

Page 24: Adventures In Programmatic Branding – How To Design With Algorithms And How To Tame Metaballs? by AKI-VILLE PÖYKIÖ
Page 25: Adventures In Programmatic Branding – How To Design With Algorithms And How To Tame Metaballs? by AKI-VILLE PÖYKIÖ

What happen?In > > Out

“Black box”

Page 26: Adventures In Programmatic Branding – How To Design With Algorithms And How To Tame Metaballs? by AKI-VILLE PÖYKIÖ

Client > Designer > Algorithm > Result

Page 27: Adventures In Programmatic Branding – How To Design With Algorithms And How To Tame Metaballs? by AKI-VILLE PÖYKIÖ

Client > Designer > Algorithm > Result

Page 28: Adventures In Programmatic Branding – How To Design With Algorithms And How To Tame Metaballs? by AKI-VILLE PÖYKIÖ

Client > > Algorithm > Result?

Page 29: Adventures In Programmatic Branding – How To Design With Algorithms And How To Tame Metaballs? by AKI-VILLE PÖYKIÖ

Client > > Algorithm > Result

Page 30: Adventures In Programmatic Branding – How To Design With Algorithms And How To Tame Metaballs? by AKI-VILLE PÖYKIÖ

Client > Designer > Algorithm > Result

Page 31: Adventures In Programmatic Branding – How To Design With Algorithms And How To Tame Metaballs? by AKI-VILLE PÖYKIÖ

Client > Designer > > Algorithm > Result?

Page 32: Adventures In Programmatic Branding – How To Design With Algorithms And How To Tame Metaballs? by AKI-VILLE PÖYKIÖ

Client > Designer > UI > Algorithm > Result

Page 35: Adventures In Programmatic Branding – How To Design With Algorithms And How To Tame Metaballs? by AKI-VILLE PÖYKIÖ

Thanks for listening.

Aki-Ville PöykiöDesign DirectorExove Design

[email protected] 5917871

Page 36: Adventures In Programmatic Branding – How To Design With Algorithms And How To Tame Metaballs? by AKI-VILLE PÖYKIÖ