Generative Design [3]

Inspirations

1.0. Perlin noise

1.1. One dimension

Random()

Perlin()

1.1. One dimension

1.0. The script

1.2. Two dimensions

1.2. Two dimensions

1.3. Two dimensions + timing

1.4. Three dimensions

1.4. Three dimensions

1.5. Exercice

1.6. Wobble

2.0. Draw image


ctx.drawImage(image, x, y);

2.1. Preload

  • Si l'image n'a pas encore été chargée, le Javascript ne va rien dessiner
    ⚠️ Le cache peut vous jouer des tours
     
  • Il faut donc détecter quand l'image est prête !
var img = new Image();
img.onload = init;
img.src = "http://url.jpg";

2.2. Positionnement

#1
ctx.drawImage(img, dest.X, dest.Y);

#2
ctx.drawImage(img, dest.X, dest.Y, dest.Width, dest.Height);

#3
ctx.drawImage(img, src.X, src.Y,
                   src.Width, src.Height,
                   dest.X, dest.Y,
                   dest.Width, dest.Height
);

2.3. Transformations

ctx.save();
ctx.translate(ww*0.5, wh*0.5);
ctx.rotate(Math.PI);
ctx.scale(1,2);
ctx.drawImage(img, -img.width*0.5, -img.height*0.5);
ctx.restore();

2.4. Exercice

3.0. Le faux arc()


ctx.arc(x, y, radius, startAngle, endAngle);
#vs
ctx.drawImage(canvas, x, y);

Le principe :

  • Dessiner un cercle dans un canvas caché
  • Réutiliser ce canvas plutôt que la fonction arc()

3.0. Let it snow

Generative Design [3] [2016-2017]

By Louis Hoebregts

Generative Design [3] [2016-2017]

  • 515
Loading comments...

More from Louis Hoebregts