Processing-Tutorial: Rasterize 3D

YouTube

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

Load video

In this tutorial I show you how to create abstract 3D portraits from any image file. Here you will learn many basics about 3D and generative image rasterization.

Please let me know what you think! I am very curious about your ideas. And as always, feel free to share your results on Instagram or Twitter.

Here’s the final code:

PImage img;

void setup() {
  size(900, 900, P3D);
  img = loadImage("venus.jpg");
  img.resize(900, 900);
}

void draw() {
  background(#f1f1f1);
  fill(0);
  noStroke();
  sphereDetail(3);
  float tiles = 100;
  float tileSize = width/tiles;
  push();
  translate(width/2,height/2);
  rotateY(radians(frameCount));
  
  for (int x = 0; x < tiles; x++) {
    for (int y = 0; y < tiles; y++) {
      color c = img.get(int(x*tileSize),int(y*tileSize));
      float b = map(brightness(c),0,255,1,0);
      float z = map(b,0,1,-150,150);
      
      push();
      translate(x*tileSize - width/2, y*tileSize - height/2, z);
      sphere(tileSize*b*0.8);
      pop();
      
    }
  }
  pop();
}

Published by Tim on Friday March 20, 2020

Last modified on November 7th, 2020 at 16:15


Related

Processing-Tutorial: A Grid of Arcs

Tutorials

Processing-Tutorial: Exploring Wave-Figures

Tutorials

Interactive Grid System (Livestream)

Tutorials

Processing-Tutorial: Render Videos with the Movie Maker

Tutorials

Processing-Tutorial – Programming Posters

Tutorials

Bauhaus 101 – A beginners Processing Tutorial

Tutorials

How to use p5.js with Visual Studio Code

Tutorials

The Magic Triangle

Tutorials Writings

Processing-Tutorial: Image-Rasterizer

Tutorials

Processing-Tutorial: WAVES pt. 1

Tutorials

Processing-Tutorial: Kinetic Typography 1

Tutorials

Processing-Tutorial: Video Export

Tutorials

How to rasterize an image with Processing

Tutorials