Generative Design [1]

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

Lars Hesellgren

  • méthode permettant de générer une infinité de résultats
  • on définit un résultat dans un algorithme et on ajoute des paramètres aléatoires
  • le programme tourne plusieurs fois et pouf, on obtient des résultats random

Ses avantages 

  • Explorer une plus grande variété d'options
  • Générer des designs complexes
  • Gagner du temps car un ordi est plus rapide qu'un humain

Ses utilisations

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

CSS

https://codepen.io/juliangarnier/full/idhuG/

SVG

Canvas 2D 

WebGL

1. Nesting

CSS

h1{
    color: blue;
}
h1 span{
    color: red;
}
h1{
    color: blue;

    span{
        color: red;
    }
}

PAS PLUS DE 3 NIVEAUX !!!!!

SCSS

.container{
    .row{
        .col{
            h2{
                span{
                    em{
                        font-weight:bold;
                    }
                }
            }
        }
    }
}

1.1. Nesting + &

CSS

h1{
    color: blue;
}
h1:hover{
    opacity:0.8;
}
h1{
    color: blue;
    
    &:hover{
        opacity: 0.8;
    }

    &.light{
        font-size: 18px;
    }
}

SCSS

2. Variables

$brandColor: #00ff00;
h1{
    color: $brandColor;
}

SCSS

$titleFont: Helvetica, Arial, sans-serif;
h1{
    font-family: $titleFont;
}

SCSS

$titleSize: 24px;
h1{
  font-size: $titleSize;
}
h2{
  font-size: $titleSize / 2;
}

SCSS

$white: #ffffff;
p{
    color: $white;
}

3. Mixins

@mixin mobile{
    @media (max-width: 996px){
        @content;
    }
}

h1{
    font-size: 24px;
    @include mobile{
        font-size: 20px;
    }
}

SCSS

@mixin border-radius($radius:0px){
    -moz-border-radius: $radius;
    -mos-border-radius: $radius;
    -webkit-border-radius: $radius;
    border-radius: $radius;
}

button{
    @include border-radius(5px);
}

4. Functions

lighten(color,percent)
darken(color,percent)
rgba(color,alpha)
round(number)
cos(angle)
[...]

SCSS

5. @for

div{
  border:1px solid #ff0000;
  height:10px;
}
@for $i from 1 through 10 {
    div:nth-child(#{$i}) {
        width: $i * 10px;
    }
}

SCSS

1. Transition-delay

2. La ligne chromatique

2.1. La ligne chromatique

avec 100 div exactement

3. La roue chromatique

3.1. La roue animée

4. Loader

4.1. et plus encore

5. The pizza dice

5.1. The dotted cube

6. Cercle

6.1. tourne tourne

7. Boule de Noël

Generative Design [1] [2016-2017]

By Louis Hoebregts

Generative Design [1] [2016-2017]

  • 290
Loading comments...

More from Louis Hoebregts