Generative Design [5]

2018 - 2019

Image

let img;
function preload() {
  img = loadImage('https://s3-us-west-2.amazonaws.com/s.cdpn.io/127738/joconde.jpg');
}
function setup() {
  createCanvas(img.width, img.height);
  image(img, 0, 0);
}

Cross origin

  • Aucune image ne peut être manipulée en canvas entre différents domaines
  • Mais cet accès peut être autorisé via des configurations serveurs 
  • N'importe quelle image peut être utilisée avec une balise <img> entre différents domaines
  • Mais cet accès peut être bloqué via des configurations serveurs 

Cross origin - Solutions

  1. Héberger ses images sous le même nom de domaine
     
  2. Autoriser l'accès aux images via le fichier .htaccess
     
  3. Convertir ses images en Base64 et les coller dans son code

Base 64

Ne pas convertir des images trop grandes !  (< 600px)

  • Coller son image dans l'HTML
  • Cacher son image en CSS
  • Charger son image dans P5 en récupérant la source de son

Image Base 64

var img;
function preload() {
  img = loadImage(document.querySelector('img').src);
}
function setup() {
  createCanvas(img.width, img.height);
  image(img, 0, 0);
}
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDA...
img {
  display: none;
}

Pixels

let img;
function preload() {
  img = loadImage('https://s3-us-west-2.amazonaws.com/s.cdpn.io/127738/joconde.jpg');
}
function setup() {
  createCanvas(img.width, img.height);
  image(img, 0, 0);
  loadPixels();
  noStroke();
  rectMode(CENTER);
}
function mouseMoved () {
  fill(get(mouseX, mouseY));
  square(mouseX, mouseY, 20);
}

Image responsive

Image responsive

// Si le ratio de l'image est plus horizontal que l'écran
if (windowWidth/windowHeight > img.width/img.height) {
  // On calcule sa largeur sur base du ratio de la hauteur
  var ratioWidth = Math.floor((windowHeight/img.height) * img.width);
  // On crée le canvas à 100% de hauteur, et à la largeur calculée
  createCanvas(ratioWidth, windowHeight);

// Si le ratio de l'image est plus vertical que l'écran
} else {
  // On calcule sa hauteur sur base du ratio de la largeur
  var ratioHeight = Math.floor((windowWidth/img.width) * img.height);
  // On crée le canvas à 100% de largeur, et à la hauteur calculée
  createCanvas(windowWidth, ratioHeight);
}
// On dessine l'image à 100% de notre canvas
image(img, 0, 0, width, height);

EXERCICE 5

Particules

Avancer

Freiner

Reculer

Klaxonner

Bleue

Orange

Verte

180km/h

60km/h

120km/h

Autoparking

Décapoter

En commun

Individuel

  • move()
  • draw()
  • isOut()
  • ...
  • x
  • y
  • speedX
  • speedY
  • color
  • ...

5 - Generative Design [2018-2019]

By Louis Hoebregts

5 - Generative Design [2018-2019]

  • 29
Loading comments...

More from Louis Hoebregts