Month: October 2017

sketch

//Heidi Chung
//Section A
//hschung@andrew.cmu.edu
//Project-09

var baseImage;

function preload() {
    var myImageURL = "https://i.imgur.com/FLTyc1P.jpg?1"; // a picture of myself
    baseImage = loadImage(myImageURL); //loading the image
}

function setup() {
    createCanvas(480, 480);
    background(255);
    baseImage.loadPixels(); //loading the image's pixels
    frameRate(20);
    noStroke();
}

function draw() {
    image(baseImage, 0, height, baseImage.width/2, baseImage/height/2);
    var px = random(width); //random assembly of circles being drawn in regards to x
    var py = random(height);//random assembly of circles being drawn in regards to y
    var ix = constrain(floor(px), 0, width-1);
    var iy = constrain(floor(py), 0, height-1);
    var theColorAtLocationXY = baseImage.get(ix, iy); //extracting the colors of the image

    noStroke();
    fill(theColorAtLocationXY); //colors of circles match the image's colors at the appropriate positions
    var circleWidth = random(5, 30); //variable set so the circles have the same random width and height
    ellipse(px, py, circleWidth, circleWidth); //instead of making ellipses

    var theColorAtTheMouse = baseImage.get(mouseX, mouseY);
    fill(theColorAtTheMouse); //drawing with the mouse using the image's colors at the pixels

    var whatsUpTextX = pmouseX-25; //the position of the text relative to the mouse
    var whatsUpTextY = pmouseY-20;
    textSize(15);　//the text says "what's up" in japanese
    text("どうしたの？", whatsUpTextX, whatsUpTextY); //what's up is dragged along by the mouse
}

function mousePressed() {
  var theColorAtTheMouse = baseImage.get(mouseX, mouseY); //extracting the colors of the image again
  strokeWeight(3); //white stroke around the text to see it better
  stroke(255); //the text says "are you okay?" in korean
  textSize(30); //when you click, a big "are you okay?" is drawn
  text("괜찮아?", pmouseX - 45, pmouseY);
}

I really enjoy post-impressionism, especially Van Gogh’s art. I love that he painted scenery and people with purposeful strokes and artistic, imprecise interpretation, especially in a time where people did not appreciate his art because it wasn’t “accurate” or exact to real life images. I love the smudges and smears he made in his works. So I thought it’d be fun to make a self-portrait that feels impressionistic. When you drag the mouse across the canvas, it “paints” words that say “what’s wrong” or “what’s up” in Japanese. When you click the mouse, it “paints” a word that says “are you okay” in Korean. I can read/speak both Japanese and Korean, and I thought it’d be interesting to have both languages in my project- to say that even if you can’t understand something, you can still visually appreciate it, like you can with Van Gogh’s works.

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