Generative Design [4]

Des ressources

1. Animation

1. Animation

1. Animation

2. SVG

2. SVG

2. SVG

3. CSS

3. CSS

Des pixels.

1. Google

2. Photoshop

Maximum 70px de largeur !

3. Base 64

=

iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAMAAABFaP0WAAAADFBMVEX/AAAAAAD///8A/wBgcdEwAAAADklEQVQI12NgYGRgYgYAABEABy6Jt18AAAAASUVORK5CYII=

3. Base 64

div {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAMAAABFaP0WAAAADFBMVEX/AAAAAAD///8A/wBgcdEwAAAADklEQVQI12NgYGRgYgYAABEABy6Jt18AAAAASUVORK5CYII=);
}
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAMAAABFaP0WAAAADFBMVEX/AAAAAAD///8A/wBgcdEwAAAADklEQVQI12NgYGRgYgYAABEABy6Jt18AAAAASUVORK5CYII=" alt="Square of colors" />

4. Codepen

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAMAAABFaP0WAAAADFBMVEX/AAAAAAD///8A/wBgcdEwAAAADklEQVQI12NgYGRgYgYAABEABy6Jt18AAAAASUVORK5CYII=" alt="Square of colors" />
<canvas id="scene"></canvas>

5. Convert to particles

6. Scale

Image ratio = 1.0447

Screen ratio = 0.5578

Image ratio = 1.0447

Screen ratio = 1.7735

7. Center

8. Animer

9. Interactions

10. Optimization

11. Device Orientation

12. Halftone

12. Halftone

Color

= (red + green + blue) / 3

= (0.2126 * r) + (0.7152 * g) + (0.0722 * b)

13. Duotone

13. Alternatives

4 - Generative Design [2017-2018]

By Louis Hoebregts

4 - Generative Design [2017-2018]

  • 117
Loading comments...

More from Louis Hoebregts