Project 09 – Project

The photo is a baby photo of myself, so I wanted to use really “primitive” shapes of squares, rhombuses, and circles (all regular shapes).

One of the most satisfying aspects of pointilist pieces is the process of it being made. I wanted this project to be interactive for the user, and really engage with the idea of “pointilism,” so the shapes are made where your mouse is on the canvas.

Additionally, if you press the mouse, you will invert the colors of the original photo, allowing for a “duality” of images being made on the same canvas.

sketch
//Aarnav Patel
//Section D
//Project

var shapeNum = 1;
var c = [];	//getPixel returns an array
var inverseColor = false;

function preload() {
	portrait = loadImage("https://i.imgur.com/aUtMs8f.png");
}

function setup() {
	createCanvas(480, 480);
	background(0);
	imageMode(CENTER);
	portrait.loadPixels();
}

function draw() {
  noStroke();

  var mX = constrain(mouseX, 0, portrait.width);	
  var mY = constrain(mouseY, 0, portrait.height);	//Constrain shapes to happen within canvas

  var x = floor(Math.floor(random(mX - 50, mX + 50)));
  var y = floor(Math.floor(random(mY - 50, mY + 50)));	//Creates "brush" radius of 50 
  c = portrait.get(x, y);

  if (inverseColor) {		//Inverses color by changing array valleus from portrait.get()
  	c[0] = 255 - c[0];
	c[1] = 255 - c[1];
	c[2] = 255 - c[2];
  }
  shapeNum = Math.floor(random(0, 2));	//Creates random indicator for whetehr its square or circle
  fill(c, 128);
  if (shapeNum == 0) {
  	ellipse(x, y, 20, 20);
  } else if (shapeNum == 1) {
  	push();					//Translate + rotate square about its center
  	translate(x, y);
  	rotate(radians(random(0, 360)));
  	rectMode(CENTER);
  	rect(0, 0, 20, 20);
  	pop();
  } 
}

function mousePressed() {
	inverseColor = !inverseColor;
}

Leave a Reply