project 9

sketch.js

/*
Arden Wolf
ardenw@andrew.cmu.edu
Section B
project 09

*/


var underlyingImage;

function preload() {
    var myImageURL = "https://i.imgur.com/JSqV6vs.jpg?2";
    underlyingImage = loadImage(myImageURL);
}

function setup() {
    createCanvas(413, 480);
    background(0);
    underlyingImage.loadPixels();
    frameRate(1000);
}

function draw() {
    var px = random(width);
    var py = random(height);
    var ix = constrain(floor(px), 0, width-1);
    var iy = constrain(floor(py), 0, height-1);
    var theColorAtLocationXY = underlyingImage.get(ix, iy);
    var size = random(7,20);
    var pie = random(HALF_PI, QUARTER_PI, TWO_PI,PI)

    noStroke();
    fill(theColorAtLocationXY);
    //ellipse(px, py, size, size);
    arc(px, py, size, size, size, pie);




    var theColorAtTheMouse = underlyingImage.get(mouseX, mouseY);
    fill(theColorAtTheMouse);
    arc(pmouseX, pmouseY, size, size, size, pie);
}

I randomized the size and the arc degrees as the shapes that make up the image and also made the color at mouse the same shapes so that the viewer can interact and contribute to the creation of the image.