Preview: When Computers create Collages

Published by Tim on Thursday November 30, 2023

Last modified on August 25th, 2024 at 16:02

2023-12-01 Today I want to share with you a first prototype that will be the basis for a new course that will probably be called “When Computers create Collages”. In this application, a stack of images is loaded and transformed into any number of computer-generated collages.

int amount = int(random(5, 25));

PGraphics[] layers = new PGraphics[amount];
PGraphics[] masks = new PGraphics[amount];

import java.io.File;
String [] imageFileNames;
StringList images;

void setup() {
  size(1200, 900);

  java.io.File folder = new java.io.File(dataPath("images"));
  imageFileNames = folder.list();
  images = new StringList();

  println("loading...");
  // Load the image-files and push thems to imagess-arrayList
  for (int i = 0; i < imageFileNames.length; i++) {
    String filename = imageFileNames[i];
    if (filename.indexOf("Store") == -1) {
      images.push("data/images/"+filename);
    }
  }

  println(images.size() + " images loaded!");

  for (int i = 0; i < layers.length; i++) {
    layers[i] = createGraphics(width, height);
    masks[i] = createGraphics(width, height);
  }
}

PGraphics l, m;
PImage img;
void draw() {

  amount = int(random(3, 30));

  background(0);
  //blendMode(SCREEN);
  for (int i = 0; i < layers.length; i++) {
    l = layers[i];
    img = loadImage(images.get(int(random(images.size()))));
    img.resize(width, 0);
    l.beginDraw();
    l.clear();
    l.push();
    l.image(img, 0, 0);
    l.pop();
    l.endDraw();

    m = masks[i];
    m.beginDraw();
    m.background(#FFFFFF);
    m.noStroke();
    m.fill(0);
    m.beginShape();
    for (int j = 0; j < 12; j++) {
      float x = random(-width, width*2);
      float y = random(-height, height*2);
      m.curveVertex(x, y);
    }
    m.endShape();

    if (random(1) < 0.1) {
      m.circle(random(width), random(height), random(width/2));
    }
    m.endDraw();

    l.mask(m);
    image(l, 0, 0);
  }
  saveFrame("out/###.png");
}

Enjoying the content?

I put a lot of love and effort into developing content on Creative Coding. Since 2018, I have published 220 interviews, case studies, and tutorials, along with over 280 lessons in 17 online courses – and there's more to come! If you'd like to support my work and help keep this platform evolving, please consider supporting me on Patreon. Thank you very much!

Speaking Image

Monthly Newsletter

Fresh perspectives circling around Creative Coding, Design and Technology, every first Friday of the month, directly to your inbox.

Related

p5studio

A prototype for a browser-based design-application, built with p5.js and vue.js.

Building Tools with p5.js (Playlist)

Click here to login or connect!To view this content, you must be a member of Tim's Patreon at €10 or […]

A custom Mockup Tool, built with Processing (updated)

For my students at Elisava, I have created a new version of my mockup-tool. You need two different files for […]

Preview: Random Compositions

Click here to login or connect!To view this content, you must be a member of Tim's Patreon at €10 or […]

Lowtech Painting Machine

A few months ago I made a small app that allows you to create image collages with some kind of […]

Marcus Aurelius Meditations

Since the beginning of the Corona crisis, I have been more and more interested in the history of ancient philosophy. […]

Form follows Music: The Bach-Project

Generative visuals made from the "Prelude in C" by Johann Sebastian Bach.

Digital Reality

Click here to login or connect!To view this content, you must be a member of Tim's Patreon at €10 or […]