Generative Design Systems: Type Morpher

Tools:

Type Morpher Flexible Motio Grid Rhythmic Glyphs

Type Morpher

Type Morpher is a generative design system that generates multiple motion textures out of type contours.

Type Morpher: Transformation

The transformation of the generative system Type Morpher is an interaction between 2 layers, where the front layer consists of a grid of shapes applied to a type character displayed in the back layer. The transformation has only two conditions: either the pixel’s gray value in the back layer is greater than 200, or less than 200. If it is greater than 200, display a shape on the front layer. If it is lower than 200, do not display anything

Relevating coding functions for a grid transformation

 
            var canvas;
            var speedRand;
            let font;
            let letter;
            var myColor;
            var strWg;
            var rotNum;
            
            function setup() {
              createCanvas(800, 800);
              constructGraphics();
              noStroke();
            }
            
            function constructGraphics() {
              canvas = createGraphics(600, 600);
              canvas.fill(0, 100)
              canvas.rect(0, 0, canvas.width, canvas.height);
              canvas.smooth(4);
              canvas.translate(canvas.width / 2, canvas.height / 2);
              canvas.fill(255);
              canvas.ellipse(0, 0, 400);
            }
            
            function draw() {
              background(0);
            
              strokeWeight(strWg);
            
              for (var x = 0; x < width + 25; x += 25) {
                for (var y = 0; y < height + 25; y += 25) {
                  myColor = canvas.get(x, y);
                  readCanvas();
            
                  ellipse(x, y, 25);
                }
              }
            }
            
            function readCanvas() {
              if (myColor[0] < 200) {
                fill(255);
              } else {
                noFill();
              }
            }

Open the sketch in the p5 editor ↗

 
            var canvas;
var speedRand;
let font;
let letter;
var myColor;
var strWg;
var rotNum;
var detect;

function setup() {
  createCanvas(800, 800);
  constructGraphics();
  noStroke();
  noCursor();
}

function constructGraphics() {
  canvas = createGraphics(800, 800);
  canvas.fill(0, 100);
  canvas.rect(0, 0, canvas.width, canvas.height);
  canvas.smooth(4);
  canvas.translate(canvas.width / 2, canvas.height / 2);
  canvas.fill(255);
  canvas.ellipse(0, 0, 400);
}

function draw() {
  background(0);

  var xGetPos = mouseX;
  var yGetPos = mouseY;
  myColor = canvas.get(xGetPos, yGetPos);
  readCanvas();
  image(canvas, 0, 0);

  rectMode(CENTER);
  rect(xGetPos, yGetPos, 50);

  push();
  strokeWeight(5);
  stroke(255, 0, 0);
  point(xGetPos, yGetPos);
  fill(255, 0, 0);
  strokeWeight(1);
  textSize(20);
  text(detect, xGetPos + 20, yGetPos);
  noFill();

  ellipse(xGetPos, yGetPos, 20);
  pop();
}

function readCanvas() {
  if (myColor[0] > 200) {
    fill(0, 0, 255);
    detect = "shape in BG detected";
  } else {
    noFill();
    detect = "shape in BG not detected";
  }
}

Open the sketch in the p5 editor ↗

Type Morpher: Parameters

Type Morpher has iterations of generative textures; Circular waves, straight waves, particles, screen printing, static waves, lines scanner, and noise pillars. Each variation has 5-7 parameters; Density, Velocity, stroke weight, shape width 1, shape height 1, shape width 2, shape height 2.

In the example below is a sketch that shows different results by changing the parameter density. For this interation, the circle was replaced by the letter "E"

Relevating coding functions for a grid transformation

 
            var myColor;
var strWg;
var rotNum;

var densSlider;

//this parametric value changes the patterns density
var density = 12;

function setup() {
  createCanvas(600, 600);

  constructGraphics();
  rotNum = 0;
  letter = "A";
  densSlider = createSlider(5,20, 4,1);
  densSlider.position(10,10)
}

function constructGraphics() {
  canvas = createGraphics(600, 600);
  canvas.fill(255);
  canvas.rect(0, 0, canvas.width, canvas.height);
  canvas.smooth(4);
  canvas.clear();
  canvas.textSize(600);
  canvas.textAlign(CENTER, CENTER);
}

function draw() {
  canvas.clear();
  canvas.text("E", width / 2, height / 2);

  background(0);
  strokeWeight(2);

  var densVal = densSlider.value()

  for (var x = -50; x < width + 50; x += densVal) {
    for (var y = -50; y < height + 50; y += densVal) {
      myColor = canvas.get(x, y);
      readCanvas();

      x1Min = 4;
      x1Max = 10;
      x1Offset = 4;
      x1Step = -0.5;

      y1Min = 10;
      y1Max = 4;
      y1Offset = 4;
      y1Step = -0.5;

      x2Min = 10;
      x2Max = 4;
      x2Offset = 4;
      x2Step = -0.5;

      y2Min = 10;
      y2Max = 4;
      y2Offset = 4;
      y2Step = -0.5;

      line(
        x + sin(rotNum) * sin(x) * 4,
        y + cos(rotNum) * cos(x) * 20,
        x + sin(rotNum) * cos(y) * 35,
        y + cos(rotNum) * sin(y) * 20
      );
    }
    rotNum = rotNum + 0.001;
  }
}

function readCanvas() {
  if (myColor[0] > 200) {
    stroke(255);
  } else {
    noStroke();
  }
}

Open the sketch in the p5 editor ↗

Type Morpher: Iterations

Below are different iterations recorded of Type Morpher.

         
let speed = 0.01;
var canvas;
var myColor;

function setup() {
  createCanvas(600, 600);
  constructGraphics();

  marginGridWidth = 1;
  marginGridHeight = 1;
  changeSize = 20;
  distanceToNext = 1.3;
  strokeSize = 1;
  count = 10;
  letter = "E";
}

function constructGraphics() {
  canvas = createGraphics(600, 600);
  canvas.fill(255);
  canvas.rect(0, 0, canvas.width, canvas.height);
  canvas.smooth(4);
  canvas.clear();
  canvas.textSize(500);
  canvas.textAlign(CENTER, CENTER);
}

function draw() {
  canvas.clear();
  canvas.text(letter, width / 2, height / 2);

  background(0);

  count = count + speed;

  if (count >= 30) {
    speed = -0.003;
  }

  if (count <= 10) {
    speed = speed + 0.003;
  }

  for (
    let x = marginGridWidth;
    x <= width - marginGridWidth;
    x += changeSize * distanceToNext
  ) {
    for (
      let y = marginGridHeight;
      y <= height - marginGridHeight;
      y += changeSize * distanceToNext
    ) {
      myColor = canvas.get(x, y);
      readCanvas();

      aument = noise( x + frameCount/10) * 50;

      direcX = aument;
      direcY = aument;
      push();

      translate(x, y);
      drawColumne();
      pop();
    }
  }
}

function readCanvas() {
  if (myColor[0] > 200) {
    stroke(0);
    fill(255);
  } else {
    noStroke();
    noFill();
  }
}

function drawColumne() {
  //left wall
  strokeJoin(ROUND);
  strokeWeight(strokeSize);

  //upper wall
  quad(
    direcX,
    direcY - changeSize,
    direcX - changeSize,
    direcY - changeSize,
    0,
    0,
    changeSize,
    0
  );

  //right wall
  quad(
    direcX - changeSize,
    direcY,
    direcX - changeSize,
    direcY - changeSize,
    0,
    0,
    0,
    changeSize
  );

  //lower wall
  quad(
    direcX,
    direcY,
    direcX - changeSize,
    direcY,
    0,
    changeSize,
    changeSize,
    changeSize
  );

  //left wall
  quad(
    direcX,
    direcY,
    direcX,
    direcY - changeSize,
    changeSize,
    0,
    changeSize,
    changeSize
  );

  rect(direcX - changeSize, direcY - changeSize, changeSize);
}

Open the sketch in the p5 editor ↗

Type Morpher: Instances

Below are different instances created out of one Type Morpher iteration called noise columns. Each instance displays different parametric values as well as different keyboard inputs. All Iterations with their respective parameters can be interacted with in the live tool↗.

density value = 4;

size value = 10;

letter "a";

density value = 0.5;

size value = 30;

letter "b";

density value = 4;

size value = 4;

letter "c";

Use this tool ↗

Flexible Motion Grid

Watch use cases