Project 09: Portrait

sketch

var underlyingImage;

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

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

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);

    noFill();
    stroke(theColorAtLocationXY);
    line(px, py, px, py+24);
    
    var theColorAtTheMouse = underlyingImage.get(mouseX, mouseY);
    fill(theColorAtTheMouse);
    ellipse(pmouseX, pmouseY, 6, 6);

}

So like the code below wasn’t showing up and I literally did not understand what was wrong. I straight up have tried multiple methods of coding this, even duplicated the sample code(which should’ve worked) and it is still not returning the correct image. After a long period of troubleshooting I had to relent. I tried essentially the same code on a mac using the p5.js text editor and it finally worked. Still don’t really know what was wrong.

sketch try 2

// Samantha Ho
// sch1
// Project-09
// Section E

var underlyingImage;

function preload() {
    var myImageURL = "http://saho.studio/img/2018-06-28%2017_41_16.194.jpg";
    underlyingImage = loadImage(myImageURL);
}

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

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);

    noStroke();
    fill(theColorAtLocationXY);
    ellipse(px, py, 6, 6);

   
}