var myImg;
function preload() {
var ImgURL = "https://i.imgur.com/6nqYPHi.jpg";
myImg = loadImage(ImgURL);
}
function setup() {
createCanvas(400, 400);
background(0);
myImg.resize(400, 400);
myImg.loadPixels();
}
function draw() {
//randomize positions of pixels and get color from image
var x = floor(random(myImg.width));
var y = floor(random(myImg.height));
fill(myImg.get(x, y));
pixel(x, y);
//also draw pixels following mouse movement
fill(myImg.get(mouseX, mouseY));
pixel(mouseX, mouseY);
}
function pixel(x, y) {
//custom star pixel
push();
noStroke();
translate(x, y);
//add random scale and rotation to each pixel drawn
scale(random(.15, 1.85));
rotate(random(radians(-90, 90)));
beginShape();
vertex(0, -5.39);
vertex(1.55, -2.26);
vertex(5, -1.75);
vertex(2.5, 0.68);
vertex(3.09, 4.12);
vertex(0, 2.5);
vertex(-3.09, 4.12);
vertex(-2.5, 0.68);
vertex(-5, -1.75);
vertex(-1.55, -2.26);
endShape(CLOSE);
pop();
}
function mousePressed() {
//reset the canvas to random color
background(color(random(255), random(255), random(255)));
}
For my project, I chose a photo that my friend took of me at an art gallery installation called “Paraiso” in New York City. The installation consisted of a room with mirrors and many strings of stars hanging from the ceiling. I enjoyed seeing this artwork and wanted to reflect the stars and range of colors in the photo in my portrait, so I practiced using custom shapes to create a star-shaped pixel. To make the portrait more dynamic, I made the pixels to be randomly scaled and rotated. I also coded it so that the star pixels are drawn following the user’s mouse position. When the user clicks on the canvas, it resets to a random color.
different colored backgrounds different colored backgrounds drawing with mouse