Author: Michelle Janco

mjanco – Final Project – Section B

sketch

//Michelle Janco
//mjanco@andrew.cmu.edu
//Final Project - Section B

var fish = [];
var tree = .05;
var treeSpeed = .0009;
var lX = 300;
var song;

//yellow sky color
var yellowSkyR = 240;
var yellowSkyG = 215;
var yellowSkyB = 87;

//new sky color
var skyR = 217;
var skyG = 98;
var skyB = 88;

function setup() {
    createCanvas(640, 240);
    // create fish
    for (var i = 0; i < 5; i++){
        var rx = random(width);
        fish[i] = makefish(rx);
    }
  frameRate(30);
}

function draw() {
    background(yellowSkyR, yellowSkyG, yellowSkyB);
    displayHorizon();
    makeTree();
    updateAndDisplayfish();
    removefishThatAreOutOfView();
    addNewfishWithSomeRandomProbability();

    //change background color as mouse
    //moves across canvas
    if ((mouseX >= 640) & (mouseX <=640)){
      mouseX = 640;
  }
    if ((mouseX > 0) & (mouseX < 640)){
        yellowSkyR = mouseX*((217-240)/640) + 240;
        yellowSkyG = mouseX*((98-215)/640) + 215;
        yellowSkyB = mouseX*((88-87)/640) + 87;
    }

    //big cloud
    fill(255);
    ellipse(mouseX + 5, 55, 20);
    ellipse(mouseX + 25, 50, 35);
    ellipse(mouseX + 40, 60, 25);
    ellipse(mouseX + 55, 50, 40);
    ellipse(mouseX + 80, 50, 25);
    ellipse(mouseX + 95, 55, 15);

    //smaller cloud
    fill(255);
    ellipse(mouseX + 68, 10, 10);
    ellipse(mouseX + 80, 10, 20);
    ellipse(mouseX + 95, 10, 25);
    ellipse(mouseX + 110, 10, 30);
    ellipse(mouseX + 125, 8, 30);
    ellipse(mouseX + 140, 10, 15);
    ellipse(mouseX + 145, 10, 10);

    //smallest cloud
    fill(255);
    ellipse(mouseX + 268, 40, 10);
    ellipse(mouseX + 280, 40, 20);
    ellipse(mouseX + 295, 40, 25);
    ellipse(mouseX + 310, 40, 40);
    ellipse(mouseX + 325, 38, 30);
    ellipse(mouseX + 340, 40, 15);
    ellipse(mouseX + 345, 40, 10);
}

function mouseClicked() {
  //if mouse is inside sun, draw text
    var d = dist(mouseX, mouseY, 550, 50);
    if (d < 100) {
    showText(true);
    }
}

function showText(mouse) {
    if (mouse==true) {
      textSize(32);
      fill(0);
      text("Salmon Skies", 20, 50);
    }
}

//make trees
function makeTree() {
    noStroke();
    fill(22, 60, 28);
    beginShape();
    for (var i = 0; i < width; i++) {
        var x = (i * tree) + (millis() * treeSpeed);
        var y = map(noise(x), 0, 1, height/2, height/3);
        vertex(i, y);
    }
    vertex(width, height-height/2);
    vertex(0, height-height/2);
    endShape();
}

function displayHorizon() {
    noStroke();
    line(0,height-height/2, width, height-height/2);
    //pond
    fill(44, 80, 108);
    rect(0, height-height/2, width, height-height/2);
    //sun
    fill(240);
    noStroke();
    ellipse(550, 50, 50, 50);
}

function updateAndDisplayfish(){
    // update fish positions, display them
    for (var i = 0; i < fish.length; i++){
        fish[i].move();
        fish[i].display();
    }
}

function removefishThatAreOutOfView(){
    //if entirety of the fish are off canvas
    //then remove them
    var fishToKeep = [];
    for (var i = 0; i < fish.length; i++){
        if (fish[i].x + fish[i].breadth > 0) {
            fishToKeep.push(fish[i]);
    }
        }
  fish = fishToKeep;
}

function addNewfishWithSomeRandomProbability() {
    //small probability, add a new fish to the end
    var newfishLikelihood = 0.005;
    if (random(0,1) < newfishLikelihood) {
        fish.push(makefish(width));
    }
}

//update position of fish
function fishMove() {
    this.x += this.speed;
}

//draw the fish
function fishDisplay() {
    var fishHeight = random(10, 15);
    var fHeight = (20);
    fill(219, 97, 87, 150);
    noStroke();
    push();
    translate(this.x, height - 60);
    //fish body
    ellipse(0, -fHeight, this.breadth, fishHeight);
    fill(255);
    //fish eyes
    ellipse(-13, -fHeight, 4, 6);
    fill(0);
    ellipse(-13, -fHeight, 2, 3);
    //fish fins
    fill(219, 97, 87, 150);
    ellipse(0, -fHeight+7, 4, 8);
    fill(219, 97, 87, 150);
    ellipse(-2, -fHeight-7, 6, 8);
    fill(219, 97, 87, 150);
    arc(23, -fHeight, 30, 30, 0, HALF_PI);

    //fish reflection
    fill(219, 97, 87, 30);
    ellipse(0, fHeight, this.breadth, fishHeight);
    //reflection fish eyes
    fill(255, 30);
    ellipse(-13, fHeight, 4, 6);
    fill(0, 30);
    ellipse(-13, fHeight, 2, 3);
    //reflection fish fins
    fill(219, 97, 87, 30);
    ellipse(0, fHeight+7, 4, 8);
    fill(219, 97, 87, 30);
    ellipse(-2, fHeight-7, 6, 8);
    fill(219, 97, 87, 30);
    arc(23, fHeight, 30, 30, 0, HALF_PI)
    pop();
}

function makefish(birthLocationX) {
    var fis = {x: birthLocationX,
                breadth: 50,
                speed: -2.0,
                nlil: round(random(2,40)),
                move: fishMove,
                display: fishDisplay}
    return fis;
}

For this project, I wanted to go back to a concept that I struggled with. During the generative landscape project, I ran into quite a few problems and was not able to make an image that I found aesthetically pleasing. I wanted to return to this, and have more time to work through the concepts to be able to make something calming to watch. I am drawn to imagery that relaxes the viewer, and I imagine this is the type of image that could be watched to slow down a person’s heart rate, as the fish move at a calming pace. I love going to the lake back home with my Dad and watching the fish go by, which was always a therapeutic activity. This image in my head was what I wanted to emulate. Considering the amount of difficulty and trouble I have faced in this class, I’m glad I had extra time to really focus, take my time, and make something that feels fairly complete. I learned a lot more skills from being able to slow down and focus on these concepts.

mjanco – Project Proposal 12 – Section B

For my project I want to create a generative landscape, playing with perspective and depth of field. I am attracted to the image of a pond of lily pads. I like that it would involve fairly simple geometric shapes but would create a calming image. I like the idea of potentially doing a generative landscape from above, as if the viewer is flying over the surface of the pond. I also like the idea of changing the opacity to create the illusion of fish beneath the surface of the water.

My other option is a standard horizontally moving landscape, in which case I’d like to play with the idea of reflection – showing trees or grass reflecting in the pond.

I want this to have a very calm, organic feel to it. I think by playing with opacity and color schemes this can be accomplished.

mjanco – Looking Outwards 12 – Section B

In this week’s Looking Outwards I looked at Camille Utterback’s piece Untitled 5, an installation from 2004, and Adrien M and Claire B’s piece XYZT from 2015.

I was very interested in how Utterback’s piece is so fluid and organic while still being based in algorithms. Her installation sets up animated mark making that is influenced by the movements of the viewer. A viewer can move and have the visuals respond but not in an extremely direct way, there is a slight mystery to the connection between the viewer’s movements and the resulting marks. I think it’s interesting to try to create a visual that contrasts with the aesthetic associated with computers. I like the thought process of how to program a visual that appears as if it came from the human hand, or a physical event of the natural world. Utterback’s piece accomplishes this exceptionally well, and it inspires me to create a similar aesthetic result.

XYZT is a similar installation, as it is an interactive piece that allows viewers to interact within a space to produce visuals around them. The concept is this piece is that digital light landscapes are produced across 4 different dimensions: horizontal(X), vertical(Y), depth(Z), and time(T). I thought this was a great concept, as Adrien and Claire take the immersive qualities of their piece and stretch it farther than most, creating a next-level immersive experience. Again, I love the organic quality of the white light aesthetic in this piece, and the human interaction adds a level of fluidity that contrasts with the algorithmic nature of programmed art.

http://camilleutterback.com/projects/untitled-5/

https://creators.vice.com/en_au/article/3d5e39/xyzt-axis-interactive-light-art-installation

mjanco – Section B – Looking Outwards-11

 

http://www.myriambleau.com/soft_revolvers.html

This week I looked at Myriam Bleau’s project Soft Revolvers from 2014. This is a project in which Bleau performs with spinning “tops” made of acrylic that generate electronic music based on the way in which they move. Bleau is the musician, controlling the music that is generated by spinning the glowing tops. I really admire that this piece is just as visually interesting as it is aurally interesting. The sounds vary just as the glow of the spinning tops change and flicker as Bleau interacts with them. This creates an interesting experience because the visuals can very much influence the way in which a viewer experiences the music. The sounds are generated through gyroscopes and accelerometers that are hooked up to each top, which wirelessly send movement data to a computer to be interpreted, and “[inform] musical algorithms designed in Pure Data.” Bleau is interested in exploring the ways she can blur the lines between musical performance, installation, interface, and performance. She is “interested in finding original strategies for musical performance by creating cohesive systems that integrate sound, light and movement.” This very clearly manifests in her piece as the beautiful halo light of the tops, their movements, and their generative sounds all interact to create a beautiful musical performance.

mjanco – Section B – Project 10

sketch

//Michelle Janco
//Section B
//mjanco@andrew.cmu.edu
//Project10

var blobs = [];
var mountain = .05;
var mountainSpeed = .0009;


function setup() {
    createCanvas(640, 240);

    // create blobs
    for (var i = 0; i < 10; i++){
        var rx = random(width);
        blobs[i] = makeBlob(rx);
    }
    frameRate(30);
}

function draw() {
    background(240, 215, 87);
    displayHorizon();
    makeMountain();
    updateAndDisplayBlobs();
    removeBlobsThatAreOutOfView();
    addNewBlobsWithSomeRandomProbability();

}

//make mountain
function makeMountain() {
    stroke(1);
    fill(240, 160, 34);
    beginShape();
    for (var i = 0; i < width; i++) {
        var x = (i * mountain) + (millis() * mountainSpeed);
        var y = map(noise(x), 0, 1, height/7, height/2);
        vertex(i, y);
    }
    vertex(width, height-height/4);
    vertex(0, height-height/4);
    endShape();
}

function displayHorizon(){
    strokeWeight(3);
    stroke(0);
    line (0,height-height/4, width, height-height/4);
}


function updateAndDisplayBlobs(){
    // update blobs' positions, display them
    for (var i = 0; i < blobs.length; i++){
        blobs[i].move();
        blobs[i].display();
    }
}


function removeBlobsThatAreOutOfView(){
    var blobsToKeep = [];
    for (var i = 0; i < blobs.length; i++){
        if (blobs[i].x + blobs[i].breadth > 0) {
            blobsToKeep.push(blobs[i]);
        }
    }
    blobs = blobsToKeep;
}


function addNewBlobsWithSomeRandomProbability() {
    //small probability, add a new tree to the end
    var newBlobLikelihood = 0.010;
    if (random(0,1) < newBlobLikelihood) {
        blobs.push(makeBlob(width));
    }
}


//update position of blob
function blobMove() {
    this.x += this.speed;
}


//draw blob
function blobDisplay() {
    var blobHeight = random(5, 15);
    var bHeight = (random(15, 30));
    fill(255);
    noStroke();
    push();
    translate(this.x, height - 40);
    ellipse(0, -bHeight, this.breadth, bHeight);
    ellipse(0, bHeight, this.breadth, bHeight);
    stroke(200);
    pop();
}


function makeBlob(birthLocationX) {
    var blo = {x: birthLocationX,
                breadth: 50,
                speed: -4.0,
                nBlo: round(random(2,8)),
                move: blobMove,
                display: blobDisplay}
    return blo;
}

For this project I wanted to make some sort of reflection, and was able to get my abstract blobs to have their own reflections on this mysterious glass like surface. I wanted to make something not too literal or specific, and just focus on using what I’ve learned since I found it difficult. But I still found the end result mysterious and ambiguous which is what I like.

mjanco-SectionB-LookingOutward10

For this week’s Looking Outwards, I looked at Caroline Record’s piece called She, created September 22, 2014. There is a mysterious, corporate looking woman singing and typing in sync with the rhythmic processes of a printer. Over the course of the piece, the printer prints 614 sentences in the novel Anna Karenina that start with the word, “she.” 

I love that this piece results in a growing mess on the floor, creating an organized, deliberate chaos. I also really like that Record kept some of this piece open-ended, because I love when pieces give room for a viewer’s interpretation. Record writes, “The viewer can decide whether she is the muse, subject or author of this collection of curated sentences.”

Caroline is an artist who uses code to create “artistic systems.” She describes her systems as “sensual” and “clever” and incorporate “extreme tactility with ephemeral, abstract logic.” Record received her BFA in Art and Human Computer Interaction at Carnegie Mellon, and then received her Masters in Human Computer Interaction at CMU as well. She has exhibited all over Pittsburgh, and currently works here as an independent artist, freelance consultant, as well as a professor at CMU.

http://carolinerecord.com/

 

mjanco – LookingOutwards09

 

For this week’s looking outwards I looked at Cora Hickoff’s post about Ian Cheng’s Droning Like a Ur. (https://courses.ideate.cmu.edu/15-104/f2017/2017/08/29/looking-outwards-draft/). This piece is a live simulation that exists continuously by continually generating changes and combinations in his simulations. In Cheng’s words, essentially these are “games that play themselves.” What Cora seemed to admire most about this piece was its ambiguity and the intrigue it evokes by being recognizable and yet still vague and mysteriously unresolved. One thing that could be added to this point, is how the medium serves that attractive quality of the piece. The mysterious use of sound and ambiguous shapes and beings, are well executed from a design standpoint, but this is also served by the medium itself: the digital, computed realm. For instance, if these same images were done as a 3D animated piece, there would be an entirely different viewing experience. The progression and changes of the imagery by the computer itself, endlessly evolving, are what give this world a life of its own. It makes the artist’s hand, or the visual proof of the work that was done by the artist, less recognizable, and therefore more mysterious. This piece gives a lot of control over to the computer. I also agree with Cora’s criticism about the sound being less distinguished, and pushing the ambiguity even further. Again, it would be nice to let the medium and the use of the computer enhance the mysteriousness of the piece.

 

mjanco – Project07 – Curves

sketch

//Michelle Janco
//Section B
//mjanco@andrew.cmu.edu
//Project-07

var gPoints = 100;
var EPITROCHOID = 0;
var curveMode = EPITROCHOID;

function setup() {
    createCanvas(400, 400);
    frameRate(20);
}

function draw() {
    background(255, 155, 100);

    // draw curve
    push();
    translate(width / 2, height / 2);
    switch (curveMode) {
    case EPITROCHOID:
        drawEpitrochoidCurve();
        break;
    }
    pop();
}

function drawEpitrochoidCurve() {
    // http://mathworld.wolfram.com/Epicycloid.html

    var x;
    var y;

    var a = 80.0;
    var b = a / 10.0;
    var h = constrain(mouseY / 20.0, 0, a);
    var ph = mouseX / 50.0;

    fill(200, 240, 200);
    beginShape();
    for (var i = 0; i < gPoints; i++) {
        var t = map(i, 10, gPoints, a, TWO_PI);

        x = (a + b) * cos(t) - h * cos(ph + t * (a + b) / b);
        y = (a + b) * sin(t) - h * sin(ph + t * (a + b) / b);
        vertex(x-10, y+10);
    }
    endShape(CLOSE);

    fill(150, 250, 0,100);
    beginShape();
    for (var i = 0; i < gPoints; i++) {
        var t = map(i, 10, gPoints, a, TWO_PI);

        x = (a + b) * cos(t) - h * cos(ph + t * (a + b) / b);
        y = (a + b) * sin(t) - h * sin(ph + t * (a + b) / b);
        vertex(x+10, y-10);
    }
    endShape(CLOSE);

}

For this project, I played around a lot with the values of my variables, as well as values in the mapping function of my for loops. Once I found a visual I liked, I knew I wanted to duplicate the pattern, offset it a bit, and change the alpha value to create some new colors where the curves overlap.

mjanco – section B -LookingOutwards07

 

http://www.wordcount.org/

http://number27.org/wordcount

I chose to look at Jonathan Harris’s piece Wordcount, from 2003. It is a visualization of humans’ frequency of use of certain words. I really thought the concept was quite simple, but what made me begin to admire it more was when I read this section of Harris’s description: “The intention is for the user to feel embedded in the language, sifting through words like an archaeologist through sand, awaiting the unexpected find.” I realized that this was not just a list of data, but a clean visualization that users could explore and make connections within. I found my own curiosity growing as I wanted to discover the ranking of specific words. I love that the clean interface and simple concept leaves room for discovery. Since the project is very linear, I can assume that conditional statements were used to have the font size decrease as the ranking increased, from left to right. They also would need to be used to make the font fill change for every other word, alternating from black to gray. Wordcount was probably done similarly to the bar graph assignment. On his biography, it says that Harris is “exploring the ways in which humans use technology to shape their experience of life.” I feel that his fascination with human use of technology, but also of overall systems, is what inspired this piece, as language is a system that we have created (just like technology). This was a simple but effective piece for him to visually see patterns and relationships within human word use.