Category: Project-09-Portrait

project09.js

//shariwa sharada
//ssharada@andrew.cmu.edu
//section a
//project 09

var pinkShari;
var blueShari;
var sAngle = 1;
var sRadius = 5;
var sFrameCount = 0;
var pEllipseW = 5;
var bEllipseW = 5;


var pinkShariArray = []

function preload(){
    //initialising my portraits 
    var pinkShariUrl = "https://i.imgur.com/Kglw2lq.png"
    var blueShariUrl = "https://i.imgur.com/4ODxlV0.png" 
 
    //loading my portraits 
    pinkShari = loadImage(pinkShariUrl);
    blueShari = loadImage(blueShariUrl);


}

function setup(){
    createCanvas(400,480); 
    background(255,255,0);
    noStroke(); //the ellipses should have no border 

    //initiallising the pixels in each of my portraits 
    pinkShari.loadPixels(); 
    blueShari.loadPixels();

}

//creating the spirals for the pink portrait 
function pinkDrawSpiral(){
    push();
    //the image begins at a part of the canvas determined by the trasnslate
    translate(300, 100);
    //creating variables to relate the spirals to the pink image 
    var pinkShariCenterX = 0;
    var pinkShariCenterY = 0;
    var pX = cos(radians(sAngle)) * sRadius; 
    var pY = sin(radians(sAngle)) * sRadius;

    //getting the colour of each of the pixels 
    var pinkColourAtpXpY = pinkShari.get(width/2 - pX, height/2 + pY);
    fill(pinkColourAtpXpY);

    //alloting the pixels so that each one matches up to the above obtained colour
    ellipseMode(CENTER);
    ellipse(pinkShariCenterX - pX, pinkShariCenterY + pY, pEllipseW, pEllipseW);

    //setting up the sizing of the pixels 
    sAngle = sAngle +3;
    sRadius = sRadius + 0.035;
    sFrameCount = sFrameCount + 1;
    pEllipseW = pEllipseW + 0.0002;


    //my image has borders but since the canvas borders aren't the image's
    //border, i had to accoung for the spiralling to only go to a certain
    //limit otherwise it would look very tacky

    //if there are more than 4750 pixels made, the spiralling will restart
    if (sFrameCount > 4750){
        sAngle = 5;
        sFrameCount = 0;
        sRadius = 1;
        pEllipseW = 5;
    }
    pop();

    print(frameCount)
}

//creating the spirals for the blue portrait 
function blueDrawSpiral(){
    push();
    //the image begins at a part of the canvas determined by the translate
    translate(100, 380);
    //creating variables to relate the spirals to the blue image 
    var blueShariCenterX = 0;
    var blueShariCenterY = 0;
    var bX = cos(radians(sAngle)) * sRadius;
    var bY = sin(radians(sAngle)) * sRadius;

    //getting the colour of each of the pixels 
    var blueColourAtpXpY = blueShari.get(width/2 - bX, height/2 + bY);
    fill(blueColourAtpXpY);

    //alloting the pixels so that each one matches up to the above obtained colour
    ellipseMode(CENTER);
    ellipse(blueShariCenterX + bX, blueShariCenterY - bY, bEllipseW, bEllipseW);

    //setting up the sizing of the pixels 
    sAngle = sAngle +3;
    sRadius = sRadius + 0.035;
    sFrameCount = sFrameCount + 1;
    bEllipseW = bEllipseW + 0.0002;

    //my image has borders but since the canvas borders aren't the image's
    //border, i had to accoung for the spiralling to only go to a certain
    //limit otherwise it would look very tacky

    //if there are more than 4750 pixels made, the spiralling will restart
    if (sFrameCount > 4750){
        sAngle = 5;
        sFrameCount = 0;
        sRadius = 1;
        bEllipseW = 5;
    }
    pop();

    print(frameCount)
}


//Creating the spirals using the ellipses of colour from the images 
function draw(){

    pinkDrawSpiral();

    blueDrawSpiral();

}

For this project I wanted to use a photo of me in two different colour filters. To do this I edited the same photo of me in photoshop in a magenta filter and in a blue filter. I then wanted to create this gradual emergence of me from the centre of the image, and then the two images would almost blend into each other.

For each of my images I had the issue of where to place it on the canvas because I had to take into account that each image was a PNG and it had no background but the code would still read the entire image and then draw the ellipses which is why I chose to mirror and translate the images.

^initial run of the spiral

^possible final outcome

amui1-p9

//Allison Mui
//15-104 Section A
//amui1@andrew.cmu.edu
//Project-09

//variables for image
var portraitImg = "https://i.imgur.com/UMgur46.png";
var portrait;

//list of random words
var words = ["cat","dog", "bun", "sun", "pot",
            "pen", "bot", "run", "fill the screen"];
var idx;
var word;

//variables for random coordinates
var px;
var py;


function preload() {
    //loads image into portrait variable
    portrait = loadImage(portraitImg);
}

function setup() {
    createCanvas(431,480);
    background(0);

    //variables for starting positions
    tpx = 30;
    tpy = 30;

    //identifies random word in word list
    fill(255);
    //stores length of array
    var length = words.length
    //picks random index in array
    var idx = int(random(0,length));
    //stores random word
    var word = words[idx];
    //displays random word
    text(word,width-100,380);

    //draw game like structure
    stroke(255);
    //border line
    line(0,400,width,400);
    fill(139,0,0)
    noStroke();
    //slight 3d effect
    ellipse(width/2-116,443,40,40);
    ellipse(width/2+124,443,40,40);
    fill(255,0,0);
    noStroke();
    //red buttons
    ellipse(width/2-120,445,40,40);
    ellipse(width/2+120,445,40,40);

    //loads picture pixels
    portrait.loadPixels();
}

function draw() {
    //shows timer
    fill(255);
    //if 900 frames already passed, show time alert
    if (frameCount == 500) {
      text("60 seconds left", 30, 380);
    }
    //if 1800 frames already passed, show game over alert
    if (frameCount >= 800) {
      frameRate = 60;
      fill(255,0,0);
      text("Game Over", width/2-30,380);
      //if game is over randomize locations
      px = random(0,width);
      py = random(0,height-150);
      var randomColor = portrait.get(px,py);
      fill(randomColor);
      //place circles in random locations to show the underlying picture
      ellipse(px,py,4,4);

    }

    stroke(0);

    //tfactor represents the number circle in the row
    var tfactor = 0;
    //run 8 circles/times
    for (t = 0; t < 8; t++){
      var tportraitColor = portrait.get(tpx+tfactor,tpy);
      fill(tportraitColor);
      //draw circle for the row
      ellipse(tpx+tfactor,tpy,6,6);
      tfactor += 6;
    }
    // if game is not over, allow user to move row
    if (frameCount < 800) {
      if (keyIsDown(LEFT_ARROW)) {
        tpx -= 5;

      }
      if (keyIsDown(UP_ARROW)) {
        tpy -= 5;

      }
      if (keyIsDown(DOWN_ARROW)) {
        tpy += 5;

      }
      if (keyIsDown(RIGHT_ARROW)) {
        tpx += 5;

      }
    }
    //create boundaries
    if (tpx > width - 1) {
      tpx = width-5;
    }
    if (tpx < 1) {
      tpx = 1;
    }
    if (tpy > height - 150) {
      tpy = height-150;
    }
    if (tpy < 1) {
      tpy = 1;
    }
}

I thought this project was rather difficult. I had a lot of ideas in mind and struggled with liking my final product. However, I became inspired by a childhood toy “etch-a-sketch”. So the idea behind my project, is a random word is generated which you have to try to write before the timer runs out.

Caption: Above are different states of the project. Below is a picture of the toy I was referring to.

 

Disclaimer: the page will move up and down if you press the keys as well.  This was not intended. :/

sketch

//Steph Chun
//15-104 section #A
//heeseoc@andrew.cmu.edu
//Project-09

var img;

// load image
function preload() {
	var imageurl = "https://i.imgur.com/jYztupF.jpg";
  	img = loadImage(imageurl);
}

function setup() {
	createCanvas(500, 500);
	background(0);
	img.loadPixels();
	frameRate(20);
}

function draw() {
	
	//array for the letters that comes up in random sizes and position
	//which spells out the name of my roomate in order
	var name = [];
	name[0] = "j";
	name[1] = "o";
	name[2] = "o";
	name[3] = "h";
	name[4] = "e";
	name[5] = "e";

	//the position of the letters
	var x = random(width);
	var y = random(height);

	//assigning colors to the letters according to the pixel of the image
	var ix = constrain(floor(x), 0, width-1);
	var iy = constrain(floor(y), 0, height-1);
	var dotcolor = img.get(ix, iy); 

	//letters of random sizes that shows up constantly
	noStroke();
	fill(dotcolor);
	textSize(random(10, 30));
	text(name[frameCount%6], x, y);

	//text that follows the mouse
 	var mousecolor = img.get(mouseX, mouseY);
	fill(mousecolor);
	textSize(10);
 	text("I don't know man", mouseX, mouseY);

}

I made a portrait of my roommate, Joohee, out of the letters of alphabet in her name and the phrase that she uses a lot. I wanted to somewhat capture her personality through this project, by the photo I chose and the text in a more minimal way. Below are the original photo and different experiments that I’ve done, only with text.