Generative Design [0]

Louis Hoebregts

Front-end developer @ Base

Ex - DWM

Ex - Front-end developer @Emakina

1. Generative Design ?

1. Generative Design ?

Generative design is not about designing the building – Its’ about designing the system that builds a building

Lars Hesellgren

  1. Code code code
  2. Aléatoire aléatoire aléatoire
  3. Résultats résultats résultats
  • Explorer une plus grande variété d'options
  • Générer des designs complexes
  • Gagner du temps

Ses avantages

Ses utilisations

  • Architecture
  • Création de nouveaux matériaux
  • Les recherches et la sciences (statistiques)
  • L'art
  • Les jeux vidéos
  • Le web

1. Generative Design ?

1. Generative Design ?

1. Generative Design ?

© Beijing National Aquatics Centre

1. Generative Design ?

1. Generative Design ?

© Apple

2. Web ?

2. Web ?

a. CSS + HTML

b. SVG + CSS

2. Web ?

c. SVG + Javascript

2. Web ?

d. Canvas 2D API

2. Web ?

e. WebGL

2. Web ?

3. Math ?

3. Math ?

a. Random

SASS

Javascript

$number: random();
var number = Math.random();

Génère un nombre aléatoire compris entre 0 et 1.

x = (random() - 0.5) * 2 * 30
x = random() * 60
x = ( random() * 40 ) + 20
x = ( random() * 40 ) + 20
if (random() > 0.5) {
  x *= -1
}

3. Math ?

b. Normalization

Converti un nombre en une valeur standard comprise entre 0 et 1 basée sur un minium et un maximum.

SASS

Javascript

$angle: 180deg;
$angleNormalized: ($angle / 360); // 0.5 
var angle = 180;
var angleNormalized = (angle / 360) // 0.5

Permet de travailler avec des nombres sans unité.
Ex: 360deg = 2πrad = 1

3. Math ?

c. Boucle For

Morceau de code qui s'exécute un nombre de fois défini sur une condition.

SASS

Javascript

@for $i from 0 through 5 {
  // Un peu de SASS
}
for (var i = 0; i <= 5; i++) {
  // Un peu de Javascript
}

3. Math ?

d. Arrondir un nombre

Permet de convertir un nombre décimal en un nombre entier.

SASS

Javascript

$i: 9.5;
round($i)
-> 10
$i: 9.2;
ceil($i)
-> 10
$i: 9.8;
floor($i)
-> 9
var i = 9.5;
Math.round(i);
-> 10
var i = 9.2;
Math.ceil(i);
-> 10
var i = 9.8;
Math.floor(i);
-> 9

3. Math ?

4. Exercices ?

a. La gamme chromatique

+ remplir tout l'écran

b. La roue chromatique

+ rendre la roue responsive

5. CSS FTW ?

5. CSS FTW ?

5. CSS FTW ?

5. CSS FTW ?

5. CSS FTW ?

6. Transanimation ?

6. Transanimation  ?

a. Transition

  • transition-duration
  • transition-delay
  • transition-property
  • transition-timing-function

6. Transanimation  ?

b. Timing-function

  • linear
  • ease
  • ease-in
  • ease-in-out
  • ease-out
  • steps(5)
  • cubic-bezier(.1,.7, 1, 1)

6. Transanimation  ?

6. Transanimation  ?

c. Animation

  • animation-name
  • animation-duration
  • animation-timing-function
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-fill-mode
  • animation-play-state

6. Transanimation  ?

7. Exercices ?

a. Tada

+ définir 4 couleurs et donner ces couleurs aléatoirement aux confettis

b. Loader

c. Pizza cube

0 - Generative Design [2017-2018]

By Louis Hoebregts

0 - Generative Design [2017-2018]

  • 243
Loading comments...

More from Louis Hoebregts