Generative Gestaltung Remix (Vol. 1)

Getting back to my generative art roots

If [care[d] to] you know anything about my pathway to becoming the creative technologist I am currently you [would] know that Processing and P5.js were not only integral to building that foundation, but the most beloved of my starter equipment.

Given that, it’s only right that I reexamine those roots by way of action; using code to make more silly toys and pretty things.

As a base to work from, I chose Generative Gestaltung; my favorite generative art book turned website.

I’m seeking to take each sketch present on the examples page and make it better, cooler and more fun.

Let’s start at the top.

function setup() {
  createCanvas(720, 720);
  noCursor();

  colorMode(HSB, 360, 100, 100);
  rectMode(CENTER);
  noStroke();
}

function draw() {
  background(mouseY / 2, 100, 100);

  fill(360 - mouseY / 2, 100, 100);
  rect(360, 360, mouseX + 1, mouseX + 1);
}

It’s a simple sketch in which the background color is determined by the position of the mouse along the Y-axis within the canvas (720pixels by 720 pixels).

background(mouseY / 2, 100, 100);

The color of the smaller box is also driven by the same.

fill(360 - mouseY / 2, 100, 100);

Fairly simple but totally fun toy. My first thought to improvement was bringing it into the THIRD dimension

Iteration one was done in Houdini. I created a Boolean where the smaller box’s width and height were connect to the X and Y positions of the rhombus.
it was fun and cute but I wanted to do a solution that was completely code and also in P5.js

So I made the example above;
I kept the background stuff and just changed the box to a cube upon which I projected the camera input. As a point of self-control I didn’t add 1000s of boxes like I wanted (haha)

code below:

let x = 0;
let y = 0; 
let z = 0;

let speed = 2;

let capture;
let isLit = true;
function setup() {
  capture = createCapture(VIDEO);
  capture.hide()
  createCanvas(720, 720,WEBGL);
  noCursor();

  colorMode(HSB, 360, 100, 100);
  //noStroke();
  strokeWeight(2);

}

function draw() {

  background(mouseY / 2, 100, 100);
  boxSize = mouseX + 1

  //box//
   push();
   translate(x,y,z);
   rotate(0.03 * frameCount);
   texture(capture);
   box(boxSize);
   pop();
  //box//
  
 x += speed;
 y -= speed;
 
  //movement//
   if (x > width/2 - (boxSize/2) || x < -width /2 + (boxSize/2)){
    speed = -speed;
   }

   //movement//
}

This is the first of [as] many [as my patience will allow]