Group project (with Nakyung, Kota)

INSPIRATION

: Pointillism Art

We were inspired by the pointillism painting, ‘a ****Sunday Afternoon on the Island of La Grande Jatte’. We thought each point of panting looks can be pixel on the screen, so we planned to make a pixel art with a video (camera) for creating pointillism style.

OUR WORD

: Chaos, Harmony , Pointillism

Reference in open source

Our pixel painting

Our pixel painting

Screen Recording 2022-11-03 at 12.25.06 AM.mov

1. Firstly, we made a pixel art with a image by referring to open source in web. Using this code, we just added ‘rect’ in draw function, so we can get a filtering image by a square of various colors. (like pointillism painting!)

P5.JS editor

let img;
let palette;
let y = 0;

function preload() {
img = loadImage('images/fff.png');
 }

function setup() {
  createCanvas(400 , 400);
  
  img.resize(400, 400);

  // Genuary 23 palette
  palette = [
    '#264653', '#2a9d8f',
    '#e9c46a', '#f4a261',
    '#e76f51'
  ];

  image(img, 0, 0);
  
}

function draw() {
 
  for (let i = 0; i < 100; i++){
    const x = floor(random(width));
    const y = floor(random(height));
    
    const imgColor = img.get(x,y);
    const paletteColor = getPaletteColor(imgColor);
    noStroke();
    fill(paletteColor);
    // we added this part for creating pixel 
    rect(x,y,10, 10);    
  }
}
  
  

function getPaletteColor(imgColor) {
  const imgR = red(imgColor);
  const imgG = green(imgColor);
  const imgB = blue(imgColor);

  let minDistance = 999999;
  let targetColor;

  for (const c of palette) {
    const paletteR = red(c);
    const paletteG = green(c);
    const paletteB = blue(c);

    const colorDistance =
      dist(imgR, imgG, imgB,
           paletteR, paletteG, paletteB);

    if (colorDistance < minDistance) {
      targetColor = c;
      minDistance = colorDistance;
    }
  }

  return targetColor;
}

2. Then we tried to create a pointillism work with video(camera) with this code, by using ‘cam’ function instead of ‘image’. But we had the challenge of loading tooooo late! So we should change the code for interactive pixel art with video. Here’s our final work.

( + We made a slider for adjusting the pixel size)