Experiments - SVG

Motion with SVG animation and Processing

experiments

Bauhaus

Exercise with Processing – Generative art workshop

Bauhaus Coding Workshop avec Tim Rodenbroeker.
https://timrodenbroeker.de

Geometric Typography.

#processing

Lines

Un exercice on Lissajous curves

#processing #kinetic #tlissajous curves

Le Havre / kinetic typography

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);
     }
  }
}

Flower v1

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();
  }
}