Section C – Page 11 – [OLD FALL 2017] 15-104 • Introduction to Computing for Creative Practice

Project-09 Thomas Wrabetz

//Thomas Wrabetz
//Section C
//twrabetz@andrew.cmu.edu
//Project-09

var underlyingImage;
var locations = [];
var squares = [];


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

function setup() {
    createCanvas(200, 250);
    noStroke();

    underlyingImage.loadPixels();
    frameRate(60);
    for( var i = 0; i < width / 5; i++ )
    {
        locations.push( [] );
        for( var j = 0; j < height / 5; j++ )
        {
            locations[i].push(0);
        }
    }
}

function draw()
{
    for( var i = 0; i < len(squares); i++ )
    {
        squares[i].draw();
    }
}

function squareStep()
{
    if( this.y == this.targetY ) return;
    this.y += 1;
}

function squareDraw()
{
    push();
    fill( this.color );
    rect( this.x, this.y, 5, 5 );
    pop();
}

function makeSquare( sx, sy, stargetY, scolor )
{
    s = { x: sx, y: sy, targetY: stargetY, step: squareStep, draw: squareDraw, color: scolor };
    return s;
}

function draw() {
    background(0);
    var targetX = int(random((width-1)/5))*5;
    var test = false;
    for( var i = 0; i < locations.length; i++ )
    {
        if( locations[i][0] == 0 ) test = true;
    }
    for( var i = 0; i < squares.length; i++ )
    {
        squares[i].step();
        squares[i].draw();
    }
    if( !test ) return;
    while( locations[targetX/5][0] )
    {
      targetX = int(random((width-1)/5))*5;
    }
    for( var i = 0; i < height / 5; i++ )
    {
        if( locations[targetX/5][i] == 1 )
        {
            locations[targetX/5][i-1] = 1;
            squares.push( makeSquare( targetX, 0, (i-1)*5, underlyingImage.get( targetX, (i-1)*5 ) ) );
            break;
        }
        if( i == height/5 - 1 )
        {
            locations[targetX/5][i] = 1;
            squares.push( makeSquare( targetX, 0, i*5, underlyingImage.get( targetX, i*5 ) ) );
        }
    }

    
}

It’s a picture of me from highschool made out of falling blocks.

Project-09-sjahania

sketch

var underlyingImage;

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

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

function draw() {
	var lineStartX = random(width);
    var lineStartY = random(height);
    var lineStartX2 = random(width);
    var lineStartY2 = random(height);
    var ix = constrain(floor(lineStartX), 0, width-1);
    var iy = constrain(floor(lineStartY), 0, height-1);
    var theColorAtLocationXY = underlyingImage.get(ix, iy);

    stroke(theColorAtLocationXY);
    line(lineStartX, lineStartY, lineStartX + 20, lineStartY + 20);
    line(lineStartX2, lineStartY2, lineStartX2 + 20, lineStartY2 - 20);

}

I wanted to do something with lines, so I started by just making the line from one random point to another. The problem was it was only using the color from the starting point, so it just made this big blob with no actual portrait. So I shortened the distance of the lines so that the colors wouldn’t stray from their rightful spots too much.

selinal-Looking-Outwards-09

Sheenu-Looking Outwards-09

I enjoyed reading this blog post and learning about how artists are implementing their interactive, non-gallery work in public settings. I think that the gesture of flipping the plates in relation to the movement of water and downward movement of the eye is very clever. It creates the illusion of the fountain while also allowing more innovative room for the shape of the fountain, the movement of the water, the scale and closeness of the viewer to the work, and the interaction which initiates a change in the piece. I think especially with our most previous project, this work is relevant to expanding beyond the combination of code with two-dimensional visuals.

abradbur – Project – 09

sketch

var myFace; //image of my face
var skeleton; //skeleton image
var currentImageIndex;

function preload(){
    //load my face and the skeleton
    myFace = loadImage("https://i.imgur.com/m10glof.jpg");
    skeleton = loadImage("https://i.imgur.com/9cviAOv.jpg");
    currentImageIndex = 0;
}

function setup() {
    createCanvas(360, 480);
    background(0);
    fill(218, 172, 75);
    textSize(50);
    text("We are all Skeletons Underneath", 50, 120, 310, 340);
    currentImage = myFace;
    currentImage.loadPixels();

}

function draw() {
    var px = random(width);
    var py = random(height);
    //keeps the color within the constraints of the image
    var ix = constrain(floor(px), 0, width);
    var iy = constrain(floor(py), 0, height);
    var col = currentImage.get(ix, iy); //color of the image
    strokeWeight(0.1);
    stroke(218, 174, 75);
    fill(col);
    //draw random triangles
    triangle(px, py, px + random(6, 12), py + random(-8, 8),
    px + random(6, 12), py);
    
    //just draw on the triangles if you're bored
    var mouseCol = currentImage.get(mouseX, mouseY);//color at the moouse
    stroke(mouseCol);
    triangle(mouseX, mouseY, mouseX + random(6, 12), mouseY + random(-8, 8),
    mouseX + random(6, 12), mouseY);
}

//flip between myFace and skeleton
//when you press the mouse
function mousePressed(){
    currentImageIndex = (currentImageIndex +1)%2;
    if (currentImageIndex === 0){
        currentImage = myFace;
    } else{
        currentImage = skeleton;
    }
}

For this project I decided to use my own face because I wanted to use a silly photo I’ve been unable to as of yet show the world. I also wanted to keep with the theme of the Halloween season and make something a little spooky. Random triangles pop up to make the image but if you click on it, instead of my face, a skeleton may begin to emerge. (Not actually my skeleton, all credit to Evil Sheila the skeleton in my High School art department, whom I love). I’d actually hoped to switch between shapes (triangles to circles) as well as images, but I couldn’t quite get it to work. So I settled.

Here are the original images I used.

And here are some screen shots if you don’t want to sit through the creation process. (You can also use the mouse to speed things up)

ikrsek-SectionC-Project-09

sketch

for this Project I experimented alot with the way that stroke were rendered by the program and how the user could interfere with that and in the end I decided on creating something slightly pixelated. I chose to have the program automatically render the photo in the form of rectangles because of it’s interesting pixelated quality. I then decided to that the user’s stroke be rendered as empty ellipses so as to give the user the ability to make the image a little more interesting and the overlapping and intermixing of colors (without changing opacity) was something that struck me as rather pretty- the ellipses add a quality that I feel is reminiscent of rain drops on a body of water, or even just ripples across a small puddle.
I didn’t have a particular goal in mind at the beginning aside from encouraging the program to add a more painterly quality to images as it redrew them pixel by pixel

I feel the the top right and left corners as well as the bottom left corner look particularly watery in a good way.

Image with intervention from the user:

Here is what the image looks like without any interference:

eeryan-LookingOutwards-09

I looked at what jwchou’s Looking Outwards assignment on generative art. He looked at the Postmodernist Art Generator by Don Relya, which took into account choices that artists make when creating art and used code to generate random postmodernist art instantaneously. With every iteration, the code is altered to take more factors into account. The last such iteration was in 2010.When responding to the piece, jwchou was interested in the artist’s statement where he said that while an artist’s actions can never be computationally reproduced completely, this parsed their actions, with constraints in order to create an algorithm for postmodernism.

I find this concept to be extremely interesting. The way it looks into the artistic process in an analytical way is very appealing to me, and I think presents an interesting counter argument to those who look down on modern and postmodern art as not being “real art” by presenting the complexity of the decisions that go into said art. I especially liked the final screenshot attached of the most recent iteration of the code, which I attached below.
Link to jwchou’s post

Link to artist’s website

PostModernist Generator, third iteration made in 2010

aerubin-Project-09-Computational Portrait

Combination of Both Large and Small Squares

For this project, I selected an image that describes my passion for music and playing the viola. The portrait created from the code can be altered depending on where the mouse is located as the picture is being drawn one square at a time. The placement of the mouse determines the size of the squares. Pictured above, this is what occurs when both large and small squares are utilized.

Pictured directly above is when only small squares are utilized. This can be drawn by putting the mouse in the upper left hand corner.
Pictured below is when only large squares are used. This can be drawn by putting the mouse in the lower right hand corner.

sketch

//Angela Rubin
//Section C
//aerubin@andrew.cmu.edu
//Project-09-Computational Portrait

var hiddenImage;

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

function setup() {
    createCanvas(338, 450);
    background(255);
    hiddenImage.loadPixels();
    frameRate(100);
}

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 ColXY = hiddenImage.get(ix, iy);

    noStroke();
    fill(ColXY);
    //if the mouse is in the upper half of the canvas, make 2x2 squares
    if(mouseY<height/2) {
        rectMode(CENTER);
        rect(px, py, 2, 2); 
    }
    //if the mouse is on the left side of the canvas, make 4X4 squares
    if(mouseX<width/2) {
        rectMode(CENTER);
        rect(px, py, 4, 4)
    }
    //if the mouse is on the right side of the canvas, make 8x8 squares
    if (mouseX>width/2) {
        rectMode(CENTER);
        rect(px, py, 8, 8);
    }
    //if the mouse is in the lower half of the canvas, make 12x12 squares
    if (mouseY>height/2) {
        rectMode(CENTER);
        rect(px, py, 12, 12);
    }
}

eeryan-Project09-Portrait

sketch

var photo;

function preload(){
  photo = loadImage("https://i.imgur.com/3TDt7Za.jpg");
}

function setup() {
  createCanvas(480, 480);
  background(255);
  photo.loadPixels();//load the pixels of the underlying photo
}

function draw() {
  for(var x = 0; x < width;x+=10){
    for(var y = 0; y < height; y+=10){
        var c = photo.get(x,y);//stores RGB value of pixel at (x,y) in array c
        noStroke();
        fill(c);
        rect(x,y,10,10);//draw rectangle at (x,y)
        var r = c[0];//assign items from the array c to variables
        var g = c[1];
        var b = c[2];
        noStroke();
        fill(r-40, g-40, b-40);
        rect(x,y,8,8);//draw circle inside the rectangle
        noStroke();
        fill(r+20, g+20, b+20);
        ellipse(x +5,y+5,4,4);
    }
  }
}

For this assignment I was inspired by Chuck Close’s portraits made up of squares with detail inside them, and wanted to recreate this effect within my portrait. I like how the end result looks a bit like a lego portrait.

LookingOutward-09

For this weeks post, I decided to write about my friend Elizabeth’s looking outwards post on the Sugarcube MIDI controller. Similar to her post, I agree with the satisfaction of the interaction with the Sugarcube. What I found so fascinating about the device is how accurately it can imitate the movement of a marble or a surface. In one setting, it uses simple lights to imitate physical movement of solid objects.

The project was created by Amanda Ghassaei, a grad student at the Center for Bits and Atoms at MIT Media Lab.

In addition to imitating simple movements, the Sugarcube also has many settings that create patterns of light and allows the user to interact with the lights as buttons. Besides lighting up and creating a visual performance, the device also emits sound and noises, allowing the user to use both senses and play around with sound and visuals. I find it interesting how this simple tool can be used as an educational tool and stimulate the user both visually as well as audibly.

http://www.instructables.com/id/Sugarcube-MIDI-Controller/

sijings-project09 – Computational Portrait

Note: this only works in Google Chrome for some unknown reason. So when viewing this project, please load it in Google Chrome.

sijings-portrait-week9

//Clair(sijing) Sun
//session C
//sijings@andrew.cmu.edu
//project-09

var underlyingImage;
var count=0;
var gAngle = [45,90,135,180];//for four circle's angles
var radius = [80,80/1.2,80/1.5,80/2];//for four circle's radius


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

}

function setup() {
    createCanvas(480, 380);//within the size range
    background(0);
    underlyingImage.loadPixels();
    frameRate(30);//set to 30 so that it actually stay 

}

function draw() {
    var x = [cos(radians(gAngle[0])) * radius[0]];//build an array for x changing value
    var y = [sin(radians(gAngle[0])) * radius[0]];
    var px = [mouseX+x[0]];//array for x
    var py = [mouseY+y[0]];//array for y
    count+=1;//for determing when the second, third, fourth circles appear
    if (count>=150){
        x.push(cos(radians(gAngle[1]))*radius[1]);
        y.push(sin(radians(gAngle[1]))*radius[1]);
        px.push(mouseX+x[1]);
        py.push(mouseY+y[1]);
    }
    if (count>=170){
        x.push(cos(radians(gAngle[2]))*radius[2]);
        y.push(sin(radians(gAngle[2]))*radius[2]);
        px.push(mouseX+x[2]);
        py.push(mouseY+y[2]);

    }
    if (count>=190){
        x.push(cos(radians(gAngle[3]))*radius[3]);
        y.push(sin(radians(gAngle[3]))*radius[3]);
        px.push(mouseX+x[3]);
        py.push(mouseY+y[3]);
    }
    var ix = constrain(floor(px[0]), 0, width-1);//set the constrain for each x, y pos
    var iy = constrain(floor(py[0]), 0, height-1);
    var ix1 = constrain(floor(px[1]), 0, width-1);
    var iy1 = constrain(floor(py[1]), 0, height-1);
    var ix2 = constrain(floor(px[2]), 0, width-1);
    var iy2 = constrain(floor(py[2]), 0, height-1);
    var ix3 = constrain(floor(px[3]), 0, width-1);
    var iy3 = constrain(floor(py[3]), 0, height-1);
    var theColorAtLocationXY = [underlyingImage.get(ix, iy)];//get the color
    theColorAtLocationXY.push(underlyingImage.get(ix1,iy1));//add into the color array
    theColorAtLocationXY.push(underlyingImage.get(ix2,iy2));
    theColorAtLocationXY.push(underlyingImage.get(ix3,iy3));

    noStroke();
    fill(theColorAtLocationXY[0]);//call corresponding color
    ellipse(px[0], py[0], 10, 10);

    fill(theColorAtLocationXY[1]);
    ellipse(px[1],py[1],15,15);

    fill(theColorAtLocationXY[2]);
    ellipse(px[2],py[2],5,5);

    fill(theColorAtLocationXY[3]);
    ellipse(px[3],py[3],12,12);

    gAngle[0] = gAngle[0] + 2;//change of angles everytime
    gAngle[1] = gAngle[1] - 2;
    gAngle[2] = gAngle[2] + 2;
    gAngle[3] = gAngle[3] - 2;
}

For this project, I thought about Van Gogh’s painting with how each stroke is distorted and convey a unique feeling of the whole image. “The Starry Night” especially, is where my inspiration came from.

With each part of the drawing circulating, I thought I will be interesting to apply a similar technique on a portrait. For this project, I chose to do a more interactive piece where the audience can manipulate the strokes with their mouses. According to the position of the mouse, four circles with different width and radius will draw accordingly. In the end, the how the picture looks like a portrait composed with hundreds of circles.

one possibility of the final presentation

I was influenced by the “Cubism” idea.