keuchuka-project-09

project9

//Fon Euchukanonchai
//15-104 Section A
//keuchuka@andrew.cmu.edu
//Project-09

//preloading two hugh faces into varialbes
function preload() {
    var hughFronturl = "https://i.imgur.com/fKUjDi7.jpg";
    var hughSideurl = "https://i.imgur.com/vNGpU0e.jpg";    
    hughFrontImage = loadImage(hughFronturl);
    hughSideImage = loadImage(hughSideurl);
    }

//load pixels from the two pictures of hugh's faces
function setup() {
    createCanvas(200, 267);
    hughFrontImage.loadPixels();
    hughSideImage.loadPixels();
    
    }

function draw() {

    frameRate(300);

    //setting background color
    background(255,0,255);
    noStroke();

    //drawing the two green rectangles
    fill(0, 255,0)
    rect(0, 0, 130, 70)
    rect(188, width/2, 12, 167)


    //creating a grid for image sampling
    for (x = 0; x < width/6; x++) {
        for(y = 0; y < height/6; y++){

            //the sample grid interacts with mouse horizontal movement
            var pixelX = x * 6 + mouseX - width/2;
            var pixelY = y * 6

            //getting pixels of the images according to sample grid, and also their brightness
            var theColorAtLocationXY = hughFrontImage.get(pixelX, pixelY);
            var pixelBrightness = brightness(theColorAtLocationXY);

            var theColorAtLocationXY2 = hughSideImage.get(pixelX, pixelY);
            var pixelBrightness2 = brightness(theColorAtLocationXY2);


            //draws the front face if mouse is on left-ish side of the frame
            if (mouseX < (5/8)*width){

                //maps pixel brightness for the width of rectangles created
                var rWidth = map(-pixelBrightness, -255, 0, -4, 7)
                var rHeight = 10;
                //maps pixel brightness to the darkness of the rectangles
                G = map(pixelBrightness, 0, 200, 255, 0)
                fill(255, G, 255)
                
                rect (pixelX,pixelY, rWidth, rHeight)
                
                }

            //draws the "turn"
            //draws the side face if mouse is on right-ish side of the frame
            if (mouseX > (5/8)*width){

                var rWidth = map(-pixelBrightness2, -255, 0, -4, 7)
                var rHeight = 10;
                G = map(pixelBrightness2, 0, 200, 255, 0)
                fill(255, G, 255)

                rect (pixelX,pixelY, rWidth, rHeight)
                
                }

        }
    }

}

I created a portrait of Hugh and wanted to emphasize horizontality, especially with the turning of the face when you move the mouse. The code was really slow so I tried making the images even smaller, but it is still slow. I don’t know what to do.

front face

turned face