//Xiaoyu Kang
//xkang@andrew.cmu.edu
//Section B
//Project-09
var baseImage;
function preload() {
//loadimage
var imageURL = "https://i.imgur.com/WFLOSwy.jpg";
baseImage = loadImage(imageURL);
}
function setup() {
createCanvas(500, 320);
background(0);
baseImage.loadPixels();
frameRate(150);
}
function draw() {
//define location
var x = random(width);
var y = random(height);
//define color
var ix = constrain(floor(x), 0, width - 0.1);
var iy = constrain(floor(y), 0, height - 0.1);
var ColorXY = baseImage.get(ix, iy);
//draw circle
noStroke();
fill(ColorXY);
ellipse(x, y, 6, 6);
//draw square
noStroke();
fill(ColorXY);
rect(x + random (-2, 2), y + random (-2, 2), 3, 3);
//draw bigger circle when mouse is pressed
var ColorMouse = baseImage.get(mouseX, mouseY);
if (mouseIsPressed){
fill(ColorMouse);
ellipse(mouseX, mouseY, 10, 10);
}
}
For this project, I used my friend Claire’s photo to generate the portrait. I used an combination of circle and suqare shapes appearing at random location to create the final image. I also wrote the code that when the mouse clicks, a bigger circle appears at the mouse location.