Continuation of Day 1 CascadiaCSS talks. Here’s the second part of the morning.
Gregor Adams: Exploring Fractals in CSS
Examples in nature e.g. Nautilus, Lightning, Tree, Romanesco Broccolli
Background pictures are all based on fractals using CSS.
What is a Fractal?
A natural phenomenon or mathematical set, that exhibits a reapting pattern, that displays at every sacle. If ther replication is exactly the same at every scale, it is called a self similar pattern.
e.g. Mandelbrot set
Implementations
Implementations of the Mandelbrot algorithm in nearly every programming language on Rosettacode.
All demos live in browser.
Mandelbrot Set in CSS
Wrote it in SASS. Live compiling using box shadows.
Can do in greyscale or colour. Different zoom, zoom point.
Cantor Set in CSS
German mathematician inventor of set theory, and introduced Cantor set
Koch Curve in CSS
gave his name to the famous fractal known as the Koch snowflake, one of the earliest fractal curves.
Instead of removing lines, added lines. Repeated a three part line. THe more you repeat, the more detailed, and the more it looks like a snowflake
Barnsley Fern
researcher and entrepreneur who was worked on fractal compressions, he hold several patents on the technology
Takes random numbers, and runs it through algorithm. The more iterations, the more details. The result looks like a fern leaf.
Fractal Systems
- IFS: iterated function system –
- L-System: Lindenmeyer System
Sierpinski Triangle in CSS
pattern of triangles drawn inside triangles. Can be drawn inside or outside.
The CSS never changes, just the variables.
Rep-tile in CSS
3/4 square repeated
L-system Example
intersecting lines that make up hexagons
Circle Fractal in CSS
circle with four smaller circles overlapping on each side
Can turn into the Sierpinski Triangle by removing one of the smaller circles.
Pythagoras Tree in CSS
Can do very artistic things with it. e.g. tree shape with gradient orange colouring
Can do in 3D. Takes a lot of DOM, and very hard to nest, so can crash the browser.
General
Can do with any shape. Can do artistic fractals
Take a shape and position them one on top of each other with transformations.
Started doing simple animations with it. Change colour based on nesting. Change animation speed based on depth.
Connected it with music and audio visualizer.
http://slides.pixelass.com/cascadiafest2015
Ricardo Vazquez: On the Power of Emotion and Delight: Microinteractions
The experiences we create everyday.
Used to watch his grandpa practice his trombone. He would always ask “Did you listen to the soundwaves go into your chest?”
I was feeling all the emotions when I was listening.
When you feel, the brain blinks.
Study where participants were asked to do normal things (e.g. read), found that alpha and beta waves were transmitted which is normal, but also theta waves, which are normally closely related to aspirational.
They dreamed while they were awake. THey learned better. They remembered better. Because, an adoration for the details. e.g. how the physical item felt, narrative.
“The details are not the details. They make the design.” – Charles Eames
Internet
The web had quite a rocky start. It wasn’t met for us when it first started.
Emotion and memory is important for us to remember. Recall is hard.
When something derails our train of thought, like the unicorn, we forget.
How do we improve our memory? Charge them with emotions.
The Emotional Interface
We form the bond as babies by crying and having something fulfilled, which then sends calming signals through our body.
Every single person want to share what we build, create, design.
“Attrative things make people feel good, which in turn makes them think more creatively. How does that makes something easier to use? simple, by making it easier for people to find solutions to the problems they encounter.” – Donald Norman
Micro-interactions
Atomic Design: What is the smallest thing we can do or change that has the biggest impact?
Sometimes it’s all just a crazy experiment.
It’s all about the interaction between the product and the human being.
Principles
- Visual Polish: carefully crafted, beautiful interface, stunning, beatiful stuff essentially
- personality: we’ve all experience that bizarre emtional connection that humans can have with an inanimate object. Irrational, but we are emtional beings & thrive off of it. e.g. Firefox, Mailchimp, hipmunk
- Humour & microcopy: little snippets of helpful text. Provides a really simple way to assist users as they interact with your product. They blend the line between the obstruction and the suggestion. e.g. Sleepbot app – have you really not slept in 7 days? ; Can releave a lot of frustration.
- purposeful transition: feed back is very important. on the web, we rely, on clear, tactical feedback. e.g. the more you spend the happier the slide icon
- its’ in the details: intelligently hidden little surprise throughout interface provide a layer of fun that ultimately delight our users. e.g. Google Maps different icons, basecamp signup form where finger points at form fields and face changes when error is made
How can we microinteract? Where do we start?
Build something you love.
Continue improving on your craft, and let your passion just ooze out.
You always start at zero. Let’s not stop at 1, it works. Where is my smile? where is the giggle? Where is the surprise? Where is your happiness?
Go to your favourite websites, find what you love. Find those micro-interactions.
Find your love and don’t let it go.
“It is not enough that we build products that function, that are understand and usable, we also need build products that give joy, excitement, and even beauty into people’s lives.” – Donald Norman
John Brown: spare the art, spoil the nth-child()
This is about creative coding (code art, expressive programming, generative art, visual mathing).
Exploring CSS and see what can be visualized.
No usable code, but lots of usable ideas.
Why Make Art? Why make art with code?
- Learning is more fun.
- Freedom: you can do whatever you want. The art is yours.
- different problems to solve with art e.g. transition
100 Days Challenge
What could you do with 100 days of making?
Tried to make 100 Pure CSS Animations, ended up with 82.
Inspiration from Ana Tudor (CSSConf EU 2013), Google I/O Genesis project, John Brown (CSSConf EU 2014)
Ground Rules & Basics
- no JavaScript
- no SVGs
- has to move
- no nesting, no ids or classes
- number of divs, number of days
- a lot of SASS and a smack of Haml
- #100daysofndivs
Report
Everyday just make something that’s fun and interesting.
Fun, but would not do it again with the same constraints. Should you try it? Maybe?
Reasons to Art in CSS
- you already know it.
- you can do it anywhere
- discrete objects that can live in the canvas that you’re using
- pretty devent 3D (you can nest them)
- learn your craft in a really interesting way
- no matter what, there is always an output and can transcend the medium
Freedom to Explore
Didn’t do cross-browser testing or optimization. It worked in Chrome on the laptop in use at the time. Done.
The 3 C’s
- copy – start by copying someone else
- change – keep pushing and changing
- chance – happy accidents are all over the place
- combine – taking all three
Homework
Go make art!
2 hours at most
- Option #1 – go to codepen and for something
- Option #2 – go to PDF Creative coders / find a local group
- Option #3 – A Lonely Square – can do anything as long as it returns to being a black square by itself in a field of white. #alonelysquare / http://alonelysquare.com – make something and we’ll connect them all together
Slides
http://bit.ly/cascadia-css-art
Break Time
