Author: smsyjuco@andrew.cmu.edu

Sofia Syjuco – Project-07

sketch

// Sofia Syjuco
// Section A
// smsyjuco@andrew.cmu.edu
// assignment-07-c

var nPoints = 100; // number of vertices

function setup(){
  createCanvas(400,400); // create a canvas of 400 x 400
  
}

function draw(){
  background(230); // fill background with off-white
  noStroke(); // don't draw the stroke lines

  push();// keep translate info within here
  translate(width/2, height/2); // move to the middle of the screen
  drawCardioid(); // draw the shape
  pop(); // end of translate information section
}

function drawCardioid(){
  //http://mathworld.wolfram.com/Cardioid.html

  var x; // create a variable for x coord
  var y; // create a varaiable for y coord

  // fill with colors dependant on mouse position
  fill(abs(mouseX) % 256, abs(mouseY) % 256, abs(mouseX + mouseY) % 256, 100);

  var a = 80; // size of the shape 

  var mX = constrain(mouseX, 0, width) / 100.0; // variable for using mouseX position
  var mY = constrain(mouseY, 0, height) / 100.0; // variable for using mouseY position

  beginShape(); // begin drawing the shape
  for (var i = 0; i < nPoints; i++){ // draw as many vertices as nPoints states
    var t = map(i, 0, nPoints, 0, TWO_PI); // parameter for function that varies with i

    x = a * (cos(t + mX) * (1-(cos(t + mX)))); // finding the x for the vertex
    y = a * (sin(t + mY) * (1-(cos(t + mY)))); // finding the y for the vertex

    vertex(x,y);// draw a vertex at these points
  }
  endShape(CLOSE); // close the shape
}

To create this shape, I looked through the curve website for an interesting curve, and used it in my code. I played around with seeing what I could effect with mouseX and mouseY, placing them in different areas to experiment and seeing exactly how the shape would change each time. I found this project a really interesting challenge, as we haven’t worked with equations like this before. It was difficult to try and understand just how to implement this in our code, and I found the examples particularly helpful to establish the base of the code- before playing around with different values to make it unique.

Sofia Syjuco – Looking Outwards 7

Ebb and Flow at the Box Office
Amanda Cox
February 24, 2008

A visual representation for domestic box office receipts in 2007
http://www.nytimes.com/imagepages/2008/02/24/business/24METRIC_GRAPHIC.html

Ebb and Flow at the Box Office by Amanda Cox is a project that I find very interesting. She has graphically represented the domestic box office receipts for films that opened in 2007, but in such a way as to be an art piece within itself. The work itself looks like the shifting silt in a river, that different qualities of soil have different colors or appearances, but all are slowly moving with the water, creating a beautiful pattern. I admire the aesthetic and artistic sensibilities of the work, and how despite its beauty, the graphical representation remains simple enough that it can easily be read and understood. The creator’s artistic sensibilities are manifest in the final form in that, while the representation retains some nod towards aesthetic considerations, the colors are muted and the communication of data remains the most important consideration.

Sofia Syjuco -Looking Outwards – 06

A Text of Random Meaning
Rami Hammour
Spring 2015
link

A Text of Random Meaning is an art piece by Rami Hammour that is a mapping of a random number generator. I think it’s really interesting because it looks like lines of text, and calls to mind text art to the viewer, who is then intrigued and will want to look deeper – but it is really just randomly generated. But because the viewer thinks it is text, and will likely continue believing it is if they are kept at a far enough distance, the work is given meaning. Because it “is text” the “words” contained therein must have some sort of meaning and make a statement. But because it is just random, there is no meaning or statement – which just points out the natural human reaction to words and to text art. I think that’s really admirable and interesting, because it forces us to introspect about our expectations of art and of text.

Sofia Syjuco – Project-06

sketch

function setup() {
    createCanvas(300, 300);// create the canvas 300x300 pixels
}

function draw() {
    noStroke();

    var h = hour() % 12;// create an hour variable, but in 12 hour time
    var m = minute();// create a minute variable
    var s = second();// create a second variable

    if (h==0){// make sure it's not 24 hour time, but 12 hour time
        h = 12;
    }

    background(h, m, s); // background color

    push();
    fill(124, 140, 165); // color it silvery blue
    translate(width/2, height/2);// put in center
    rotate(radians(180));// start at the clock's "zero"
    rotate(radians(m*6));// rotate each minute
    ellipse(0, 40, 10, 10);// draw the moon
    pop();

    push();
    fill(247, 218, 160); // color it blue-white
    translate(width/2, height/2);// put in center
    rotate(radians(180));// start at the clock's "zero"
    rotate(radians(s*6));// rotate each second
    ellipse(0, 80, 5, 5); // draw the star
    pop();

    push();
    fill(216, 144, 0); // color it yellow
    translate(width/2, height/2);// put in center
    rotate(radians(180));// start at the clock's "zero"
    rotate(radians(h*30));// rotate each hour
    ellipse(0, 20, 20, 20); // draw the sun
    pop();


}

I experimented with the concepts learned in our previous clock project to create this. I wanted to have the sun, moon, and a star all going in circles – and those celestial bodies to be representing the different hands of the clock. But instead of pointing to different times, they would rotate around an origin point so they looked like they were moving in space.

Sofia Syjuco – Looking Outwards -05

Neural Pathways (Stills from movie)
Alexey Kashpersky
2015

Kashpersky’s project, to create 3d visualizations of neural pathways for a movie, is something that I very much admire. It’s really interesting that the movie strove to depict something that, it’s likely they couldn’t just use a physical example of. Instead, an artist had to be brought in, and with him, his own aesthetic and ideas about how things should look. Resulting in a depiction of something that is real, but is uniquely represented because it’s not naturally occurring in nature – it is the product of an artist trying to *make* something in nature. I really admire that about this project, because it shows how important the role of the artist is in helping people to understand the world around them, in ways that are singularly beautiful and pleasing. I know that these works were generated using 3D programs like Zbrush and 3DS Max.

Sofia Syjuco – Project-05

Music Box Pattern
sketch

// sofia syjuco
// section A
// smsyjuco@andrew.cmu.edu
// Assignment-5-C

function setup() {
    createCanvas(400, 200);// create a cavas 
}

function draw() {
    background(244, 100, 123);//make a pink background

    pattern(0, 0); // row 1, grid 1 of pattern
    pattern(100, 0); // row 1, grid 2  of pattern
    pattern(200, 0);// row 1, grid 3, of pattern
    pattern (300, 0); // row 1, grid 4 of pattern

    pattern(0, 100); // row 2, grid 1 of pattern
    pattern(100, 100); //row 2, grid 2 of pattern
    pattern (200, 100);// row 2, grid 3 of pattern
    pattern (300, 100); // row 2, grid 4 of pattern

}

function pattern(x,y){
    fill("gold"); // fill shapes with gold color
    stroke(255); // strokes are colored white

    push();
    translate(x, y);// place pattern square in designated position
    for (var yPos = 10; yPos < 100; yPos +=10){ //draw all the horizontal lines
        line(0, yPos, 40, yPos); // lines on left
        line (40, yPos, random(41, 59), yPos-(random(2, 9)));// draw random line
        line(60, yPos, 100, yPos); // lines on right
        ellipse (60, yPos, 5, 5);// draw an ellipse
    }
    noLoop(); // don't make it repeat. Keep it static
    pop();
}

whiteboard-on-29-sep-2016-9_17_01-am

I’ve been thinking about music boxes lately, just as a kind of portable nostalgia, and thought it might be interesting to make a pattern that incorporated elements of music boxes. I wanted to make it a little non-representational, but just enough that someone looking at it wouldn’t immediately guess music box – but they could come to that conclusion if they spent a little time with it. To add subtle variation, and not make it too staid, I added a subtle variation to how the little tines are bent, as if the whole pattern is in the middle of playing some huge song.

Sofia Syjuco – Looking Outwards-04

Bach Style Chorale
David Cope
2012

A project that particularly interested me was David Cope’s EMI program, or Experiments in Musical Intelligence. I really admire Cope’s relationship to the project, how he treats it not as a way to exploit loopholes in human expectations of music, or something purely technical, but a natural progression of how we continue to understand composing music. I admire this because, I think too often that new media arts have a controversy surrounding them, and people ask questions like – is this even real art anymore? Can this still count as being creative if the computer does it for you? I personally think that these questions are ridiculous, and really admire how David Cope’s artistic sensibilities and thoughts on this subject manifest in the final form – something that generates music based on data, but ultimately contains mistakes or problems which humanize it in some way, blurring the line between what we consider a pristine and soulless work made by a machine, or a piece of music, perhaps not all too skillfully made but still interesting, created by something affectionately nicknamed “Emmy”.

Sofia Syjuco – Project-04

sketch

var strokeColorR = 0; // stroke color R value
var strokeColorG = 255; // stroke color G value
var strokeColorB = 0; // stroke color B value

function setup() {
    createCanvas(640, 480); // make a canvas 800x200
    background (244, 120, 100); // background color
    
  for (var i = 1; i < 10; i++) {// add 1 to i every loop, 10 times
    strokeColorR += 30;// add 30 to stroke R color
    strokeColorG -= 20;// subtract 20 to stroke G color
    strokeColorB += 30; // add 30 to stroke B color
    stroke(strokeColorR, strokeColorG, strokeColorB); // stroke color
    strokeWeight (8); // thicker lines at 8
    line(i*20, 200, 200, 200-(i*20)); // top left quadrant lines
    line(200, 200-(i*20), 400-(i*20), 200); // top right quadrant lines
    line(i*20, 200, 200, 200+(i*20)); // bottom left quadrant lines
    line(200, 200+(i*20), 400-(i*20), 200); // bottom right quadrant lines
  }
 }
function draw() {
}

In my process for this assignment, I sketched out all the points on a piece of paper for one quadrant of the piece, and slowly worked from there. Once I had figured out how the for loop would work with one quadrant, I worked on trying to better understand how altering the values of the first quadrant could accomplish drawing the next three.

Sofia Syjuco – Looking Outwards 3

Incidental Space
Christian Kerez
Swiss Bienale 2016
http://www.kerez.ch/
(No link to the artwork itself exists on the artist’s website, but there are pictures of it and his process)

The outside of Incidental Space

Incidental Space was a work of architecture created by Christian Kerez as the Swiss entry to the Venice Architecture Binenale. It originated from a small model made of sugar and dust, and the larger model is sprayed fibre cement. I admire this work because it is a work of architecture that is not just a model, drawing, or smaller scaled-down representation of something that “could” possibly be built. It is a space in which the viewer can exist in, can experience first-hand, and is not forced to dedicate some of their imagination to simply try and provide a topic for their mind – the structure is right there for them to think about.

Not much information is given on the specifics of the algorithms that generated the work, but Kerez states that his work is, “a combination of a physical model and also a very refined technology, and if you look at the result it is both very sophisticated but it’s also very primitive.” He combines hand craftsmanship with digital processes, and creates something new, unexpected, and beautiful. His sensibilities are manifest in the way the piece makes the viewer question what it means for something to be architecture, and gently leads you to a new perspective by offering you space to explore new possibilities.

Sofia Syjuco – Project-03 – Dynamic Drawing

sketch

// Sofia Miren Syjuco
// Section A
// smsyjuco@andrew.cmu.edu
// Assignment-03-C

xPosition1 = 320;
yPosition1 = 0;
yPosition2 = 240;
rectSize = 30;
circleSize = 15;
function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    noStroke();

    // have background gradiate as mouseY changes from pink to green
    colR = map(mouseY, 0, height, 255, 152);
    colB = map(mouseY, 0, height, 153, 151);
    colG = map(mouseY, 0, height, 0, 255);
    background(colR, colG, colB);

    push();
    translate(320, 240);
    fill (0);
    // rotate the squares faster/slower depending on mouseY position
    rotate (millis ()/mouseY);
    // create the black rectangle
    rect (0 - rectSize/2, yPosition1, rectSize, rectSize);
    // if mouseY is on lower half of screen, alter the yPosition variables
    // this will effect rectangle placement
    if ((mouseY > 0) & (mouseY < 200)) {
        yPosition1 = mouseY;
        yPosition2 = (0 - mouseY);
         }
    pop();

    push();
    translate (320, 240);
    fill ("white");
    // rotate the squares faster/slower depending on mouseY position
    rotate (millis ()/mouseY);
    // create the white rectangle
    rect (0 - rectSize/2, yPosition2, rectSize, rectSize);
    // if mouse Y on upper half of screen, let mouseY effect square's position
    if ((mouseY < 0) & (mouseY > -200)){
        yPosition2 = mouseY;
     }
    pop();
 
    push();
    // make the circle's color gradiate from black/white depending on mouseY
    fill (mouseY);
    // create the ellipse
    ellipse (xPosition1, height/2, circleSize, circleSize);
    // if the mouseY is within certain bounds, change ellipse position
    if ((mouseY > 40) & (mouseY < 440)){
        xPosition1 = mouseY + 100;
    // if the circle is on right half of screen, make it big (20x20)
        if (xPosition1 > 320){
            circleSize = 20;
            }
    // if the circle is on the left half of screen, make it small (10x10)
         if (xPosition1 < 320) {
            circleSize = 10;
            }
    }
    pop();
}

My process for this project was to slowly cobble together elements of what we had learned, and step-by-step create a foundation which I could later experiment on. It took a lot of testing and just moving numbers around, but in the end I think I have a better understanding of manipulating shapes, and translating things.