Generative Design [4]

2018 - 2019

  • Librairie de dessin dans le browser
  • Version web de Processing
  • Rendu dans un canvas
  • Gère des rendus 2D ou 3D

Setup

function setup (){
  createCanvas(windowWidth, windowHeight);
}

function draw () {
  circle(width / 2, height / 2, 50);
}
body {
  margin: 0;
  overflow: hidden;
}

https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js

Interaction

function setup (){
  createCanvas(windowWidth, windowHeight);
}

function mouseClicked() {
  circle(mouseX, mouseY, 30);
}

Random

function mouseClicked() {
  var size = random([10, 50, 100]);
  var x = random(0, windowWidth);
  var y = random(mouseY, windowHeight);
  circle(x, y, size);
}

Colors

function setup (){
  createCanvas(windowWidth, windowHeight);
  noStroke();
}

function mouseMoved() {
  fill(random(0, 255), 100, 100);
  circle(mouseX, mouseY, 50);
}

Color mode

function setup (){
  createCanvas(windowWidth, windowHeight);
  colorMode(HSL);
}

var colorHue = 0;
function mouseMoved() {
  colorHue++;
  fill(colorHue % 360, 100, 50);
  circle(mouseX, mouseY, 50);
}

Window resize

function windowResized () {
  resizeCanvas(windowWidth, windowHeight);
}

EXERCICE 1

Rotate

function setup (){
  createCanvas(windowWidth, windowHeight);
  angleMode(DEGREES);
}

var angle = 0;
function draw () {
  rotate(angle++);
  square(width/2, height/2, 100);  
}

Translate

var angle = 0;
function draw () {
  translate(width/2, height/2);
  rotate(angle++);
  var size = height / 2;
  square(-size/2, -size/2, size);
}

Rect Mode

function setup (){
  createCanvas(windowWidth, windowHeight);
  angleMode(DEGREES);
  rectMode(CENTER);
}

var angle = 0;
function draw () {
  translate(width/2, height/2);
  rotate(angle++);
  rect(0, 0, height / 2, height);
}

EXERCICE 2

  • Faire tourner un carré autour de la souris
  • Changer de taille au click
  • Définir la couleur par rapport à la position en X

Clear

function setup (){
  createCanvas(windowWidth, windowHeight);
  stroke(150);
  strokeWeight(10);
}

function draw () {
  clear();
  line(0, 0, mouseX, mouseY);
}

Ghost technique

function setup (){
  createCanvas(windowWidth, windowHeight);
  noStroke();
  colorMode(HSL);
}

function draw () {
  fill(0, 0, 0, 0.05);
  rect(width/2, height/2, width, height);

  fill((millis() * 0.1) % 360, 50, 50);
  circle(mouseX, mouseY, 50);
}

4 - Generative Design [2018-2019]

By Louis Hoebregts

4 - Generative Design [2018-2019]

  • 53
Loading comments...

More from Louis Hoebregts