Creative Coding

www.luisferreira.space About me • Luis Ferreira • 32 years old WHO AM I? • Portuguese • Masters in Computer Engineering

• Creative Technologist 2

www.luisferreira.space

Personal Projects

Light Canvas Flint Stratumseind Living Lab Programming (coding) Is a way to instruct the computer to perform a task WHAT IS • Each instruction is very simple • Written in a language that the computer understands CODING? • Many simple instructions can perform a complex task • Ex: result = add(firstNumber, secondNumber); 3

PVector v0 = shape.getVertex(0); PVector v1 = shape.getVertex(1); PVector v2 = shape.getVertex(2);

PVector dist01 = PVector.sub(v0, v1); PVector dist12 = PVector.sub(v1, v2); PVector dist20 = PVector.sub(v2, v0);

Technology is present in almost every aspect of everyday life Programming is how you take control of it Creative Coding Art that is created through programming WHAT IS • Expression is more important then function CREATIVE • Tool to create automated and intelligent Art CODING? • Does a painting have a function?

4 Luis Ferreira, Light Canvas

Generative Art / Algorithmic Art “Art that in a whole or part has been created with the use of an autonomous system”, Wikipedia

Pattern Seeing, Public square Heatmaps How does Creative

Coding compare to 5 traditional art? Calculator COMPUTER Performs sequential actions VS CALCULATOR 1st 2nd Operation Result Operator Operator 6

Computer Performs conditional actions Do this

A = B ?

Ex: Is it weekend? Do that Classic media creation tools are like the calculator CLASSIC MEDIA • Expected behavior VS • Sequential steps CREATIVE CODING • Playback, repeat • Photoshop, Inkscape, Blender, Paint 7

Creative Coding tools are like the computer • Conditional • Interactive • Different input generates different output • Emergent behavior

Universal Everything 2020 Reel INTRODUCTION VIDEOS

The Art of Creative Coding

What is creative coding? How to draw with code? The digital creative process 9 Traditional Art • Creative process AUTOMATED • Use lines ART • Create 1. Inspiration

2. Draw first line 10 3. Draw second line 4. Draw third line

Generative Art A F • Creative process C • Use lines D • Create E B 1. Read data 2. Draw all lines C E A F D B Input Process Output

• Datasets • The creative • Projection THE PROCESS • Randomness process • 3D Printing • Mouse • Instructions • Music • Keyboard • Transform input • Print • Sensors into output • Motors 11

• Different Input provides different starting points • The Process is fixed but depends on the input • The Output can take many forms independent of the input • Black box model

Patrik Hübner, Schwanensee More processing power Evolution of portable devices HOW IT GREW: • Calculations reduced from • Laptops, smartphones and TECHNOLOGICAL hours to 60 times per second wearables DEVELOPMENT • More complex scenes • Pretty and interactive • Moore’s Law app/website gets more attention 12

2D to 3D and further Artificial Intelligence • Virtual, Augmented and Mixed • Ease of use realities • Intelligence • FHD and 4K projectors • Physical computing (motors and sensors)

Rick Barraza, AI, Mixed Reality, and the New Software Landscape Georg Nees Schotter (Gravel) 1968 HOW IT GREW: NEW USES Education Art • Visual learning • New type of tool • Interactivity and feedback • Mix it up 13 • Generative art + Print • Algorithmic shape + 3D Print

Engineering Sensors • Function & looks • Depth cameras • Intelligence & expression • Natural interaction • Simulations • Facial expression • Body Tracking Flavors of Creative

Coding 14 • Real-time • Interactive • Immersive • Audio-reactive POPULAR Generative • Projection mapping • Data-driven Art TECHNIQUES • Holographic • LED

Artificial Light Art Intelligence Creative Coding

AV (audio- Physical visual) computing Performance • Motors • Sensors • Pen-plotters • Robotics TECHNIQUES: GENERATIVE ART

The Dot is Black, Breathe Raven Kwok, Autotroph In Breathe Out

Studio Krom, ChopChopChair TECHNIQUES: PEN PLOTTERS

Kjetil Golid Geoffrey Daniel Feles Bradway STYLES: DATA- VISUALIZATION

Washington Post, Why outbreaks Pattern Seeing, Visualizing an like… epidemic

Nadieh Bremer, Intangible Cultural Heritage

Interactive version TECHNIQUES: INTERACTIVE

Roelof Knol

Seong Hyeon Kim TECHNIQUES: PROJECTION MAPPING

Paul Lacroix, PARTED

Eindhoven GLOW 2019, Colour Symphony TECHNIQUES: PHYSICAL- COMPUTING

Jason Cook, Water Light Graffiti

Luis Ferreira, Light Canvas STYLES: IMMERSIVE

Refik Anadol, The Aether Project

Raven Kowk, time++ STYLES: HOLOGRAPHIC

Tundra, ROW

Joanie Lemercier, No-logram STYLES: AUDIO-VISUAL PERFORMANCE

Lacid Digital, Tensia

Algorave (algorithm + rave) STYLES: AUDIO REACTIVE AND GENERATIVE

Gyula Bodonyi

JeongHo Park, SketchSynth STYLES: ARTIFICIAL INTELLIGENCE

Lulu Ixix

Trevor Paglen & Kronos Quartet, Sight Machine Does Creative Coding have a “value” or is it just a hobby thing? 27 “One overly simple but useful definition is that generative art is art IS IT ART? programmed using a computer that intentionally introduces randomness as part of its creation process. This often brings up two common but misguided viewpoints that hold people back from appreciating the beauty and nuance of generative art. 28 Myth One: The artist has complete control and the code is always executed exactly as written. Therefore, generative art lacks the elements of chance, accident, discovery, and spontaneity that often makes art great, if not at least human and approachable.

Myth Two: The artist has zero control and the autonomous machine is randomly generating the designs. The computer is making the art and the human deserves no credit, as it is not really art.

The truth is that generative artists skillfully control both the magnitude and the locations of randomness introduced into the artwork.”

Jason Bailey, Why love generative art PROFESSIONAL Marketing Branding VALUE • Personalized media creation • Unique and recognizable

tools content 29 • Content generation • Graphics generated based on data

Entertainment Education • AV Performances • Interactive learning tools • Algoraves • Learn programming like a • Light Shows second language • Specialized Art galleries • Logical thinking Graphical frameworks LANGUAGES • Processing (Java) AND TOOLS • P5.js (JavaScript) • three.js (JavaScript) • OpenFrameworks (C++) 30 • Unity (C#) • TouchDesigner (block programming, python) • VVVV (block programming) • Cables.gl (block programming, online) Audio frameworks • Max/MSP/Jitter • Sonic Pi • SuperCollider • Tidalcycles • PureData • SuperCollider • Foxdot TUTORIALS Processing & P5js

• Daniel Shiffman, The Coding Train • Daniel Shiffman, The Nature of Code 31

Unity

• Rick Barraza, Creative Coding with Unity

TouchDesigner

• Derivative • Simon Alexander • Matthew Ragan FIBER (Amsterdam) COMMUNITIES

Creative Coding Utrecht 32

Creative Coding Amsterdam

Art + Tech Society (Eindhoven)

Creative Coders Eindhoven THANK YOU FOR WATCHING

Hope you were inspired by what you 33 saw.

Follow the links to research each project, learn with the tutorials and keep up to date with the communities