Month: October 2019

Ammar’s Portrait

/* Ammar Hassonjee
    ahassonj@andrew.cmu.edu
    Section C
    Project 09
  */

var underlyingImage;
var theColorAtLocationXY;
// Variable for adjusting the frame rate
var frames = 100;

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

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

function draw() {
    // Changing the frame rate each time draw is called
    frameRate(frames);
    // Initial variables declared to return pixel from image at random location
    var px = random(width);
    var py = random(height);
    var ix = constrain(floor(px), 0, width-1);
    var iy = constrain(floor(py), 0, height-1);
    // Getting the color from the specific pixel
    theColorAtLocationXY = underlyingImage.get(ix, iy);

    // Varying the triangle size and rotation for each frame based on
    //         the pixel distance from the mouse
    var triangleSize = map(dist(px, py, mouseX, mouseY), 0, 480 * sqrt(2), 1, 10);
    var triangleRotate = map(dist(px, py, mouseX, mouseY), 0, 480 * sqrt(2), 0, 180);
    noStroke();
    fill(theColorAtLocationXY);
    // rotating the triangle at each pixel
    push();
    translate(px, py);
    rotate(degrees(triangleRotate));
    triangle(0, 0, triangleSize * 2, 0, triangleSize, triangleSize);
}

function keyPressed() {
    // reducing the frame count each time a key is pressed
    frames = constrain(int(frames * .5), 1, 10);
}

function mousePressed() {
    // increasing the frame rate each time the mouse is pressed
    frames = constrain(int(frames * 2), 1, 1000);
}

I was inspired to make an interactive self portrait that is based from my favorite shape, the triangle! By using the mouse to generate values, my program allows users to make my portrait more realistic or more distorted depending on where they keep the mouse. I think the combinations of rotation and triangle size create really interesting renditions of my selfie.

Sketch

//Jai Sawkar
//jsawkar
//Project 9: Portrait
//Section C
 
function preload() {
    var imgURL = "https://i.imgur.com/4e3vWfI.jpg?1" //image of jaclny & sophia
    bImage = loadImage(imgURL); 
}

function setup() {
    createCanvas(480, 480);
    background('black')
    bImage.loadPixels(); //loads pixels from image
    frameRate(1000000); //speed of picture
}

function draw() {
    var px = random(width);
    var py = random(height);

    var sx = random(0, 240); //'sophia' on X axis
    var sy = random(height); //'sophia' on Y axis

    var jx = random(240, 480); //'jac' on X axis
    var jy = random(height); //'jac' on y axis


    ////ix & iy calulates the closest int value that is less than or equal to the value of the parameter for the pixels
   
    var ix = constrain(floor(px), 0, width - 1); 
    var iy = constrain(floor(py), 0, height - 1);


    var colXY = bImage.get(ix, iy); //determines color based on x & y pixels of image

    noStroke(); 
    fill(colXY); //fill based on x & y pixels of image
    ellipse(px, py, 5);

    textFont('FUTURA');
    textSize(2);
    text("Sophia", sx, sy) //randomly prints Sophia on Sophia's side of Canvas
    textSize(3);
    text("Jac", jx, jy) //randomly prints Jac on Jaclyn's side of Canvas

}

For this project, I used a picture I took 2 years ago of two of my best friends, Jaclyn & Sophia. Along with having the picture generated with dots, I wanted some aspect of it to be more personalized as well, so I split the canvas to allow their names to make up the picture on their side of the canvas. Below are two screenshots of the process, and the original photo as well!

lrchu

// lee chu
// section c
// lrchu@andrew.cmu.edu
// project - 09

var underlyingImage;
var px = [];
var py = [];
var directionX = [];
var directionY = [];
var ix = [];
var iy = [];

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

function setup() {
    createCanvas(600, 300);
    background(0);
    underlyingImage.loadPixels();
    frameRate(60);

    // starting arrays for painters
    px.push(random(width));
    py.push(random(height));
    directionX.push(1);
    directionY.push(1);
}

function draw() {
    underlyingImage.resize(width, height); 

    // looping for individual painters
    for (i = 0; i < px.length; i ++) {
        ix = constrain(floor(px[i]), 0, width-1);
        iy = constrain(floor(py[i]), 0, height-1);
        var theColorAtLocationXY = underlyingImage.get(ix, iy);

        noStroke();
        fill(theColorAtLocationXY);
        rectMode(CENTER);
        rect(px[i], py[i], 10, 10);

        // random movement
        px[i] += directionX[i] * random(-2, 10);
        py[i] += directionY[i] * random(-2, 10);

        // keeping painters on the canvas
        if (px[i] > width) {
            px[i] = 0;
        }
        else if (px[i] < 0) {
            px[i] = width;
        }
        if (py[i] > height) {
            py[i] = 0;
        }  
        else if (py[i] < 0) {
            py[i] = height;
        }
    }
}

// adding painters with click
function mousePressed() {
    px.push(random(width));
    py.push(random(height));
    directionX.push(1);
    directionY.push(random(-1, 1, 2));
}

I miss Heath Ledger. I had wanted to create a bunch of little rectangular painters which make their way across the canvas.