Processing-Tutorial – Programming Posters

Some of you have asked for it, so here it is: A raw and uncut tutorial in which I explain my “Programming Posters” method. I just started the recording and began developing the sketch. I didn’t even have a clear visual idea how the poster should look like in the end.

From my point of view this spontaneous format is quite interesting, because it explains much more than just the technique. I share all my unfiltered thoughts, including those about the design, the creative strategy and the typography…

YouTube

By loading the video, you agree to YouTube’s privacy policy.
Learn more

Load video

The Images


The Font

I use a commercial font-family for all of my projects. it is called “SuisseInt’l” and it is available at swisstypefaces.com.

Because i don’t want to hurt any license agreements i can’t share the original font-files. But i can recommend you a very nice alternative called “Inter”, available here.


tutorial.pde

PGraphics pg;
PGraphics pg2;

PGraphics buffer;

PImage img;
PImage img2;

PFont sans;

void setup() {
  size(1200, 900);
  pg = createGraphics(586, 810);
  pg2 = createGraphics(586, 810);
  buffer = createGraphics(586, 810); 
  
  img = loadImage("a.jpg");
  img2 = loadImage("n.jpg");
  sans = createFont("sans.otf", 1000);
}

void draw() {
  background(0);

  drawPg();
  drawPg2();

  buffer.beginDraw();
  buffer.background(#f1f1f1);
  buffer.noStroke();
  buffer.rectMode(CORNER);
  PImage i1 = pg.get();
  PImage i2 = pg2.get();
  
  float tilesX = pg.width/4;
  float tilesY = pg.height/4;
  float tileW = pg.width/tilesX;
  float tileH = pg.height/tilesY;
 


  for (int x = 0; x < tilesX; x++) {
    for (int y = 0; y < tilesY; y++) {
      color c1 = i1.get(int(x*tileW), int(y*tileH));
      color c2 = i2.get(int(x*tileW), int(y*tileH));
      float wave = map(sin(radians(frameCount * 3 + x * 0.3 + y * 0.3)), -1, 1, 0, 1);
      color c3 = lerpColor(c1, c2, wave);
      float bri = brightness(c3);
      
      float sizeW = map(bri,0,255,tileW,0);
      float sizeH = map(bri,0,255,tileH,0);
   
      buffer.fill(#305dbf);   
      buffer.rect(x*tileW, y*tileW, sizeW*1.2, sizeH*1.2);
    }
  }

  buffer.endDraw();

  imageMode(CENTER);
  image(buffer, width/2, height/2);
 
  }
}

pg.pde

void drawPg(){
  
  pg.beginDraw();

  pg.background(#111111);
  pg.imageMode(CENTER);

  // Display Image

  pg.push();
  pg.translate(pg.width/2, pg.height/2);
  float wave1 = map(sin(radians(frameCount)),-1,1,3,1.6);
  pg.scale(wave1);
  pg.image(img, 0, 0);
  pg.pop();

  // Define Style

  pg.textFont(sans);
  pg.textAlign(CENTER, CENTER);
  pg.textSize(900);
  pg.fill(#111111);

  // Display Type
  
  String txt = "POMPEIJ";
  float textWidth = pg.textWidth(txt);
  
  float wave2 = map(tan(radians(frameCount)),-1,1,-100,100);
  
  pg.push();
  pg.translate(pg.width/2 +wave2, pg.height/2-40);
  pg.text(txt, 0, 0);
  pg.pop();

  pg.endDraw();
}

pg2.pde

void drawPg2() {

  pg2.beginDraw();

  pg2.background(#111111);
  pg2.imageMode(CENTER);

  // Display Image

  pg2.push();
  pg2.translate(pg.width/2, pg.height/2);
  float wave1 = map(sin(radians(frameCount)), -1, 1, 1.3, 2.4);
  pg2.scale(wave1);
  pg2.image(img2, 0, 0);
  pg2.pop();

  // Define Style

  pg2.textFont(sans);
  pg2.textAlign(CENTER, CENTER);
  pg2.textSize(900);
  pg2.fill(#f1f1f1);

  // Display Type

  String txt = "NAPLES";
  float textWidth = pg.textWidth(txt);

  float wave2 = map(tan(radians(frameCount)), -1, 1, -100, 100);

  pg2.push();
  pg2.translate(pg.width/2 -wave2, pg.height/2-40);
  pg2.text(txt, 0, 0);
  pg2.pop();

  pg2.endDraw();
}

Video-Export

Check this video to learn about my standardized video-export-workflow.

Published by Tim on Friday September 25, 2020

Last modified on October 27th, 2020 at 17:16


Comments

No comments found.

Related

4. September 2020

Bauhaus 101 – A beginners Processing Tutorial

Hi and welcome to this very condensed and quick tutorial that aims to get you amazed for Creative Coding in […]

20. August 2020

How to use p5.js with Visual Studio Code

In this short tutorial i explain how you can use p5.js with Visual Studio Code. For this purpose, i’ll use […]

17. August 2020

Exporting Videos from Processing

This best practice makes it easy to export videos from Processing. Before you start, make sure you have the VideoExport-library […]

27. July 2020

The Magic Triangle

The Magic Triangle is a powerful creativity technique that can be applied to many different areas.

20. March 2020

Processing-Tutorial: Rasterize 3D

In this tutorial I show you how to create abstract 3D portraits from any image file. Here you will learn […]

6. December 2019

Processing-Tutorial: Image-Rasterizer

Level: Beginner & intermediate In this tutorial i’ll guide you through all the necessary steps to rasterize an image with […]

4. November 2019

Processing-Tutorial: WAVES pt. 1

This is the first part of a brand new tutorial-series about Waves, a fundamental skill and feature in Generative Design […]

16. April 2019

Processing-Tutorial: Kinetic Typography 1

In the last years i’ve observed a new tendency in typography and graphic design which has been made possible by […]

14. April 2019

Processing-Tutorial: Video Export

One of the most powerful features of Processing in comparison to all web-based approaches and frameworks (like p5.js) is the […]

1. March 2019

How to rasterize an image with Processing

In this post i’ll teach you how to access the data of an image and how to use it to […]