Le Havre – Ocean / kinetic typography
A variation on a tutorial from #tim_rodenbroeker. Made with Processing.

#lehavre #madtoucans #processing #kinetic #typography

PGraphics pg;
PFont font;

void setup() {
    
font = createFont("./ASSETS/BarlowSemiCondensed-SemiBold.ttf", 600);
  size(800, 800, P2D);
  pg = createGraphics(800, 800, P2D);
}

void draw() {
  background(0); 
  pg.beginDraw();
  pg.background(#29A6A6);
  pg.fill(0);
  pg.textFont(font);
  pg.textSize(300);
  pg.pushMatrix();
  pg.translate(width/2, height/2-150);
  pg.textAlign(CENTER, CENTER);
  pg.text("Le", 0, 0);
  pg.fill(#ededed);
  pg.text("Havre",0,120);
  pg.popMatrix();
  pg.endDraw();


  int tilesX = 20;
  int tilesY = 20;

  int tileW = int(width/tilesX);
  int tileH = int(height/tilesY);

  for (int y = 0; y < tilesY; y++) {
    for (int x = 0; x < tilesX; x++) {

      // WAVE
      int wave = int(sin((frameCount + ( x*y )) * 0.04) * 200);
      int wavey = int(sin((frameCount + ( x*y )) * 0.03) * 300);
     
      // SOURCE
      int sx = x*tileW + wave;
      int sy = y*tileH + wavey;
      int sw = tileW +20;
      int sh = tileH;

      // DESTINATION
      int dx = x*tileW;
      int dy = y*tileH;
      int dw = tileW;
      int dh = tileH;
      
      copy(pg, sx, sy, sw, sh, dx, dy, dw, dh);
     }
  }
}

A P5js experiment. I begin to “translate” AS3 experiments into P5js sketch, from the book Flash Math Creativity edited by friendsofed. This first experiments is based on Glen Rhodes’s Flowers. There is no interaction in this sketch.

function setup() {
  createCanvas(900, 900);
  angleMode(DEGREES);
  colorMode(RGB);
  background(255);
}

function draw() {
  let from = color(237, 189, 45, 200);
  let to = color(247, 227, 128, 20);
  translate(width / 2, height / 2);
  //Draw flower
  for (var i = 0; i < 120; i++) {
    push();
    flower_color = lerpColor(from, to, i / 120);
    rotate((1440 * i) / 120);
    translate(2 * i / 2, 2 * i / 2);
    noStroke();
    fill(flower_color);
    scale(i / 120 + 2);
    ellipse(0, 0, 30, 120);    
    pop();
  }
}