Creative Coding

#CodePenOrebro

Johan Karlsson

  • Nerd
  • Math, physics, tech
  • Computers

Turbo Pascal

program Hello;
begin
  writeln ('Hello, world.');
  readln
end.

🌈

🌊

Ï€

Msc Computer Engineering

Text boxes over data.

 

W00T!?

  • Fun
  • Creativity
  • Patterns
  • Animations
  • Math
  • Direct feedback
  • That's why we are here tonight!

CodePen, what is it?

Takeaways

  • Trust in JS
  • From: wannabe language
  • To: something powerful, odd but beautiful  

T-shirts 

and 

3 months CodePen Pro

Canvas

  • x, y
  • Lines, rectangles, circles
  • Animation by changing a variable and redraw
  • Native support in browsers
  • p5.js (to me): does the plumbing and provides nice helper libs like Perlin Noise and vectors

Live coding!

Brownian Motion

  • Robert Brown
  • Albert Einstein
  • Jean Perrin

Takeaways, Brownian Motion

  • Vague idea
  • Just run with it
  • You never know what you gonna get
  • Ok to throw away some creations

CSS

Styling, sure, but you can do some crazy stuff

 

Ana Tudor is the queen of CSS

 

#CodeVember

  • Create something (small) each day in November
  • I explored Sass
  • "Strange" for me, backwards
  • Durations and end positions instead of many absolute intermediate positions/values

Live coding!

button,
#button,
.button, 
input[type="submit"], 
input[type="button"]
{
  animation: rotate 4s linear infinite;
}

@keyframes rotate {
  to { transform: rotate(360deg);}
}

Takeaways, CSS, SCSS

  • Powerful programming language
  • You notice new things when you look at a problem from another angle (Duh!) 

A Fractal

 

  • Math...
  • Self-similar
  • Benoît Mandelbrot

beautiful, damn hard, increasingly useful. That's fractals.
- Benoît Mandelbrot

​​

Takeaways, Fractals

  • They are awesome, just kidding - I already knew

Resources

Made with Slides.com