generative-art-collaboration2022

A design project by Dan, Dongjae, Khang and William. Created in December 2022 on https://p5js.org/

Example code of the current state can be explored on p5js.org

• 2022-12-13 https://editor.p5js.org/mkreier/sketches/Ipgd8eY43
• 2022-12-19 https://editor.p5js.org/mkreier/sketches/p-XPJI7q6
• 2022-12-21 https://editor.p5js.org/mkreier/sketches/lFq_t7pZZ
• 2022-12-23 https://editor.p5js.org/mkreier/sketches/vy0dgv6Cp

2022-12-21 - day 6

Staged and without any preloaded image!

2022-12-19 - day 5

2022-12-13 - day 4 with 120 minutes

Some more filters started to work:

2022-12-09 - day 3

With working rotate and shuffle the code get's more artistic and sophisticated:

Some code of William had to be commented out because of the relocation of the drawing origin that broke the code later. See the respective branch

2022-12-07 - day 2

Result 2022/12/05 - day 1

The following image was created:

And the respective code (saved in the 2022-12-05 branch).

Latest code 2022-12-23

// Generative art in collaboration 2022
// Version v0.7 from 2022-12-22
// https://github.com/ssis-aa/generative-art-collaboration2022

ARTWIDTH   = 600
ARTHEIGHT  = 400

let canvas, buffer; // as global variables

function setup() {
  canvas = createCanvas(ARTWIDTH, ARTHEIGHT);
  buffer = createImage(ARTWIDTH, ARTHEIGHT);
  background(220);
  noStroke(); noLoop();
  fill(200);  // indicate right part with darker gray
  rect(width / 2, 0, width / 2, height);
  doAsyncAwaitThings(1000);
}

//                        *******************************
//                        *                             *
//                        *  IMAGE CREATION by students *
//                        *                             *
//                        *         2022-11-25          *
//                        *******************************

async function doAsyncAwaitThings(transitiontime) {
  await sleep(transitiontime);  //                                William
  print("William: a few cubes in the right sphere");
  CreateCSs();

  await sleep(transitiontime);  //                                Dan
  print("Dan: colorful cubes");
  colorcubes();
  await sleep(transitiontime);
  print("Dan: image filter");
  let FILTERS = random([GRAY,  INVERT,  BLUR]);
  print("Applied filter:", FILTERS);
  filter(FILTERS);

  await sleep(transitiontime);  //                                Khang
  print("Khang: using noise for the left part of the image");
  khang();
  await sleep(transitiontime);
  print("Khang: Tint the image.");
  let random_tint = random(255);
  copy_to_buffer();
  tint(random_tint,0,0,50);
  image(buffer, 0, 0);
  
  await sleep(transitiontime);  //                                Dongjae
  print("Dongjae: mosaic the picture with dots");
  copy_to_buffer();
  buffer.loadPixels();
  drawMosaic(4, color(30, 30, 30)); // radius, backgroundcolor
  
}


// ######################################################################
// #                                                                    #
// #                      student created functions                     #
// #                                                                    #
// ######################################################################


// ############################# William ################################
// translation of geometric shapes in the right part of the image

let NUM_SECTIONS = 10;

function CreateCSs(){
 for (var i = 0; i < NUM_SECTIONS; i++) {
   translate(0, 200);
   cubesection();
   translate(200, -200);
   cubesection();
   translate(-200, 0);
  }
}  

function cubesection() {
  stroke(51);
  fill(213, 90, 79);
  square(ARTWIDTH-150, -75, 50);
  fill(0);
  square(ARTWIDTH-170, -145, 50);
  fill(219, 224, 103);
  square(ARTWIDTH-160, -125, 50);
  fill(0);
  square(ARTWIDTH-110, -125, 50);
  fill(255);
  square(ARTWIDTH-112.5, -123.5, 45);
  strokeWeight(4);
  fill(0, 0, 0, 1);
  square(ARTWIDTH-160, -200, 50);
  strokeWeight(1);
  noStroke();
}


// ############################## Dan ###############################
// adding transparency to the right part

let TRANSPARENCY = 150;

var COLORS = [
  [216, 164, 127, TRANSPARENCY],
  [239, 131, 84,  TRANSPARENCY],
  [238, 75,  106, TRANSPARENCY],
  [223, 59,  87,  TRANSPARENCY],
  [15,  113, 115, TRANSPARENCY],
  [179, 255, 179, TRANSPARENCY],
  [202, 231, 185, TRANSPARENCY],
  [205, 247, 246, TRANSPARENCY],
  [16,  255, 203, TRANSPARENCY],
  [181, 248, 254, TRANSPARENCY],
  [151, 249, 249, TRANSPARENCY],
  [164, 222, 249, TRANSPARENCY],
];

function colorcubes() {
  for(var k = 0; k < 20; k++){
    let random_X = random(ARTWIDTH/2, ARTWIDTH)
    let random_Y = random(0, ARTHEIGHT)
    let col = random(COLORS)
    fill(col)
    square(random_X, random_Y, 50)
  }  
}  


// #########################  Dongjae  ###########################
//  image manipulation of the whole created image

const columnWidth = (dotRadius) => dotRadius*3

const numberOfColumns = (dotRadius) =>  Math.ceil(width / columnWidth(dotRadius))

function drawMosaic(dotRadius, backgroundColor){
  copy_to_buffer();
  buffer.loadPixels();
  background(backgroundColor)
  for (let i = 0; i < numberOfColumns(dotRadius); i++){
    offsetX = i*columnWidth(dotRadius)
    drawColumnDots(dotRadius, offsetX)
  }
}

function drawColumnDots(dotRadius, offsetX){
  let dotColor;
  let dotDiameter = 2*dotRadius
  let doHeightWithPadding = dotDiameter + 2
  let numDotsInColumn = Math.floor(height / doHeightWithPadding)
  let topY = Math.floor(random(10))
  for (let i = 0; i < numDotsInColumn; i++){
    let centerX = Math.floor(random(offsetX + dotRadius, offsetX + columnWidth(dotRadius) - dotRadius))
    let centerY = topY + i * doHeightWithPadding + dotRadius;
    let index = (centerX + centerY * width) * 4;
    dotColor = buffer.get(centerX, centerY);
    // dotColor = example.get(centerX, centerY);
    noStroke()
    fill(dotColor)
    ellipse(centerX, centerY, dotDiameter, dotDiameter)
  }
}


// ########################## Khang ############################
// using noise for the left part of the image

let x_coordinate = 500;
let plot_x = 0;

function khang(){
  for(let plot_x = 0; plot_x <= ARTWIDTH/2; plot_x++){
    x_noise = noise(x_coordinate) * ARTWIDTH/2;
    strokeWeight(5);
    point(plot_x, x_noise);
    x_coordinate++;
  }
}


// mk rotate the canvas and create a mosaic
function rotate_canvas() {
  copy_to_buffer();
  angleMode(DEGREES);
  translate(ARTWIDTH, ARTHEIGHT);
  rotate(180);
  image(buffer, 0, 0);
  // back to normal - origin left bottom
  translate(ARTWIDTH, ARTHEIGHT);
  rotate(180);    
} 

// mk split canvas to mosaic tiles and shuffle them
function mosaic(tilewidth, tileheight) {
  tile = [];
  tilelist = [];
  counter = 0;
  for (let a = 0; a < ARTWIDTH / tilewidth; a++) {
    for (let b = 0; b < ARTHEIGHT / tileheight; b++) {
      tile.push([a * tilewidth, b * tileheight]);
      tilelist.push(counter);
      counter++;
    }
  }
  // shuffle tilelist
  for (let i = tilelist.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [tilelist[i], tilelist[j]] = [tilelist[j], tilelist[i]];
  }
  for (let i = 0; i < tile.length; i++) {
    buffer.copy(
      canvas, 
      tile[i][0], tile[i][1], 
      tilewidth, tileheight, 
      tile[tilelist[i]][0], tile[tilelist[i]][1], 
      tilewidth, tileheight);
  }
  image(buffer, 0, 0)
}

// mk copy canvas to buffer
function copy_to_buffer() {
  buffer.copy(
    // source
    canvas,
    // source x, y, w, h
    0, 0, canvas.width, canvas.height,
    // destination x, y, w, h
    0, 0, buffer.width, buffer.height)  
}

// mk continuously create some noise
function fill_noise() {
  fill(0);
  x = random(0, width);
  y = random(0, height);
  ellipse(x, y, 1);
}

// a custom 'sleep' or wait' function, that returns a Promise that resolves only after a timeout
function sleep(millisecondsDuration)
{
  return new Promise((resolve) => {
    setTimeout(resolve, millisecondsDuration);
  })
}