Author: Sharon

Kevin Riordan and Sharon Yang – Looking Outwards 12

We are using grace days on this assignment.

Time by Inception being played on a piano app

A song being played on ‘Cool Piano’ app

The following videos are piano apps currently available on Apple app store. Though they are not computational art projects, we find these apps and how they operate highly inspiring. For our final project, we are thinking of creating a virtual piano with realistic graphics of the piano. The first video has inspired us to add more graphics such as the notes of the keys pressed, or we could also recreate the graphics of the app; when a song is uploaded the keys in the song can be obtained to be displayed on the screen with graphics. The second video has inspired us to append engaging visual effects to the notes such as the staff as well as having them float around. They could also have glowing effects. This could also be developed into a game, where the users can tap the graphics of the notes. We would like to try to make our project as engaging and useful as these apps in the videos.

Sources of the videos: https://www.youtube.com/watch?v=m5RmYEd1N9I

Sharon Yang Looking Outwards 11 Computational Music Composition

The algorithmic musical project that I would like to discuss is Apparatum. Apparatum, has been created by a solo exhibition, panGenerator. With its digital interface that generates electroacoustic sounds, the device emits purely analogue sounds. The project has been inspired musically and graphically by the “Symphony – electronic music” by Boguslaw Schaeffer. Just as Schaeffer did, the apparatus makes use of the visual language of symbols that convey the audio cues. The electroacoustic generators and filters were arranged inside two steel frames, and the two types of magnetic tape samplers are used in order to base off and create basic tones. The apparatus relies on the analog way of generating sound of spinning discs with graphical patterns on them. I admire this project because it is able to make analog sounds from a purely electronic means of creating sounds. In the era where we are constantly exposed to electronic sounds, it shows that an apparatus can be used to bring back the analog sounds. Also, its relatively simple algorithm is used in this ingenious project.

APPARATUM – the installation inspired by the Polish Radio Experimental Studio from ◥ panGenerator on Vimeo.

Video Clip of the operation of Apparatum

Source: https://www.creativeapplications.net/sound/apparatum-installation-inspired-by-the-polish-radio-experimental-studio/

Sharon Yang Looking Outwards 10

The project developed by a woman practitioner of the computational arts is Kate Hartman’s Botanicall, first started in 2006, and now in display in Museum of Modern Arts in New York through many iterations. It is still an on-going project with a collaboration with three other artists that are Rob Faludi, Kati London, and Rebecca Bray. Its purpose was to embody a connection between the humans and the nature in both literal and figurative sense. Botanicalls is a networked sensing communication system with which the houseplants is able to make use of the channels of human communication such as telephone calls or Twitter. The conditions and the needs of the plants can be communicated. She and the collaborators developed the Botanicall kit; the first kit was a set of Arduino shields, the second included a custom, leaf-shaped PCB design. I admire the artist’s innovative idea of a device that enables the communication between plants and humans, which is something you would only see in sci-fi books or movies. It is also amazing how she was able to implement it with the technology that is available to her. Other works of Kate Hartman include Lilypad XBee, a sewable radio transceiver that allows your clothing to communicate. She is based in Toronto, OCAD University where she is the Associate Professor of Wearable & Mobile Technology and Director of the Social Body Lab. Her work spans the fields of physical computing, wearable electronics, and conceptual art.


Botanicalls Kit


Phone communication through Botanicall


Botanicall being used on a houseplant

Sources: http://www.katehartman.com/about/

Botanicalls

Sharon Yang Project 10 Landscape

Project

/*Sharon Yang
Section C
junginny
Project-10
*/

var snowman = [];


function setup() {
    createCanvas(640, 240); 
    
    // create initial snowmen
    for (var i = 0; i < 10; i++){
        var rx = random(width);
        snowman[i] = makeSnowman(rx);
    }
    frameRate(10);
}


function draw() {
    background(105, 58, 29);
    
    displayGround();
    updateAndDisplaySnowman();
    removeSnowmanThatHaveSlippedOutOfView();
    addNewSnowmanWithSomeRandomProbability(); 
}


function updateAndDisplaySnowman(){
    // Update the snowman's positions, and display them
    for (var i = 0; i < snowman.length; i++){
        snowman[i].move();
        snowman[i].display();
    }
}


function removeSnowmanThatHaveSlippedOutOfView(){
    var snowmanToKeep = [];
    for (var i = 0; i < snowman.length; i++){
        if (snowman[i].x + 50> 0) {
            snowmanToKeep.push(snowman[i]);
        }
    }
    snowman = snowmanToKeep; // the snowmen that are out of the view are removed
}


function addNewSnowmanWithSomeRandomProbability() {
    // With the probability of 0.5%, add a new snowman to the end
    var newSnowmanLikelihood = 0.005; 
    if (random(0,1) < newSnowmanLikelihood) {
        snowman.push(makeSnowman(width));
    }
}


//Update position of snowman every frame
function snowMove() {
    this.x += this.speed;
}
    

// draw the snowmen
function snowDisplay() {
    var centerB = 25 * this.size;
    var centerU = 15 * this.size;
    var bhatW = 35 * this.size;
    var thatW = bhatW * 3 / 4;
    var eyeW = centerU / 2;
    var noseW = eyeW;
    noStroke();
    fill(255);
    push();
    translate(this.x, height - 40);
    ellipse(this.x, - centerB, centerB * 2, centerB * 2);
    ellipse(this.x, -(2 * centerB) - centerU, centerU * 2, centerU * 2);
    fill(0);
    ellipse(this.x - eyeW, -(2*centerB)-centerU-(3*this.size),5*this.size,5*this.size);
    ellipse(this.x + eyeW, -(2*centerB)-centerU-(3*this.size),5*this.size,5*this.size);
    fill(255,0,0);
    triangle(this.x,-(2*centerB)-centerU,this.x+noseW,-(2*centerB)-centerU+2*this.size,this.x,-(2*centerB)-centerU+5*this.size);
    fill(0);    
    rect(this.x - (thatW / 2),-(2*centerB) - 2*(5*centerU/6), thatW, - 20 * this.size);
    rect(this.x - (bhatW / 2),-(2*centerB) - 2*(5*centerU/6), bhatW, - 5 * this.size);
    pop();
}

//function for making snowman
function makeSnowman(birthLocationX) {
    var snowman = {x: birthLocationX,
                speed: -1.0,
                move: snowMove,
                display: snowDisplay,
                size: round(random(1,2))}
    return snowman;
}

//the ground is displayed
function displayGround(){
    fill(121, 186, 209);
    rect(0, 0, width, height - 50);
}

For this project, I started with the template code, which I changed to make different objects. I played around with making the snowmen. I really understood how arrays in functions are used for greater efficiency. The following is the sketch for the project.

Sharon Yang Looking Outwards 09

Among the looking outwards projects by peers, I find Kevin (Riordan)’s Week 5 post very fascinating. I agree with Kevin on that I find the project amazing as it makes a highly intricate art work of very high quality, comparable to those in animated movies with two commonly used tools, python and maya. It is admirable how Caballer has developed the project in a way that allows to control extreme details. The project is able to demonstrate various facial and body structures, enabling expressions to be displayed. The body structure reflects the real structure of an animal; each eyeball, each eyelid, and each individual muscle on the eye are all separated, allowing the movements to be autonomous. These movements are delicately manipulated to show hundreds of different expressions and to display natural speech. The algorithm of allowing such details to be shown is joint-based system over a coordinate plane, which is a relatively simple algorithm for such a sophisticated work.


3D Troglodita Rig project by Sergi Caballer in  2012

Link to the original work: http://www.cgmeetup.net/home/troglodita-rig-demo-by-sergi-caballer/

Link to Kevin’s post: https://courses.ideate.cmu.edu/15-104/f2018/2018/09/27/kevin-riordan-looking-outwards-05-section-c/

Sharon Yang Project 09 Portrait

Project

/*Sharon Yang
Section C
junginny
Project-09
*/

var underlyingImage;

function preload() {
    var myImageURL = "https://i.imgur.com/ZnYAlHy.jpg"; //image of my boyfriend smiling
    underlyingImage = loadImage(myImageURL);
}

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

function draw() {
    var px = random(width); //the coordinates of where shapes created are randomized
    var py = random(height);
    var ix = constrain(floor(px), 0, width-1); 
    var iy = constrain(floor(py), 0, height-1);
    var theColorAtLocationXY = underlyingImage.get(ix, iy); //get the colors of the pixel

    noStroke();
    fill(theColorAtLocationXY);
    drawShape(px, py, 5, 10);
}

function drawShape(x, y, radius1, radius2) { //draw star shape
    var angle = TWO_PI/5;
    beginShape();
    for (var i = 0; i < TWO_PI; i += angle) {
    var starX = x + cos(i) * radius2;
    var starY = y + sin(i) * radius2;
    vertex(starX, starY);
    starX = x + cos(i+angle/2) * radius1;
    starY = y + sin(i+angle/2) * radius1;
    vertex(starX, starY);
  }
  endShape(CLOSE);
}

I have used an image of my boyfriend.  The project incorporated a very interesting concept. However, because I used the star shape, and also the image was quite blurry, it became really hard to make out of what the image is.

Sharon Yang Looking Outwards 08

Eyeo 2014 – Mouna Andraos and Melissa Mongiat from Eyeo Festival on Vimeo.

The artists that I have been inspired by are Mouna Andraos and Melissa Mongiat. They are  both from Montreal but they work all over the US and in Canada. Mouna studied New York University’s Interactive Telecommunications Program and Melissa holds Creative Practice for Narrative Environments from Central Saint Martins College of Art and Design, London, UK. They are the founders of Daily Tous Les Jours. Daily Tous Les Jours is a design studio that uses technology and storytelling to explore collaboration of different individuals to induce change. It is known for its work in public spaces; their projects involve inviting passing crowds to play important roles in changing their environment. Their work utilizes tools such as  digital arts, performance, and contemporary devices such as sensors, phones and real-time data, to musical instruments, dance choreographies, food and meditation. Out of their many outstanding projects, the one that attracted my attention was Choreographie pour humans et les etoiles (Choreography for humans and stars). The goal of the project was to get passing crowds to dance in public as if they were celestial bodies, which many would not do in fear of others’ judgments.  During the project, the crowd were instructed to hold hands and lean back while spinning as fast as they could. Their celestial motions were captured by a camera and were processed into a graphic of universe on the screen. I found it highly interesting to see how the crowds, though some at first were reluctant to do it, but became increasingly comfortable with doing it especially as other people joined them to do it. I found the project highly inspiring and powerful as it delivers a message of how you should not be afraid of others’ judgements and be willing to act differently from the norm sometimes.

As for their presentation, I believe it was done quite effectively. It was not one of those highly engaging with funny jokes or heartfelt and powerful presentations, but was calmly done and the content was delivered clearly. As an audience I felt comfortable watching their presentation. Also, as they are co-founders of an organization and have been working with each other for a while, them presenting together also worked very well. I learned that presentations can be calm and still be able to communicate effectively.

Mouna and Melissa’s websites: http://www.dailytouslesjours.com/about/

http://inst-int.com/speaker/mouna-andraos/

http://inst-int.com/speaker/melissa-mongiat/

Sharon Yang Looking Outwards 07 Information Visualization

Information is often presented in a form of or with an appealing visual for the audience to be interested in the subject as well as grasping the palpable information more easily. Rachel Binx is an artist and a data scientist that has built Meshu, ManyMaps, Cliffs&Coasts, Monochōme, and Gifpop which are applications used to process data and make them into presentable visuals. A art piece by Binx that attracted my attention is Facebook Stories: Virality. She explains that it is a series of video clips that visualizes a single published content on Facebook being shared and being spread across hundreds of thousands of individuals on Facebook. She has captured the speed as well as the breadth at which the content travels to be spread across the Internet. A series of branches stem from a single person to represent the contents shared by her or him. As the branches grow, they are split to show the re-shares, sometimes creating a whole new generation of re-shares, sometimes showing a short-lived burst of activity. For the project, she worked with Zach Watson to build the WebGL framework that was used to generate the visualizations. I admire the creativity and the message that she conveys through the project, which can be perceived quite alarmingly as a content published thoughtlessly may go viral just in a second and reach unimaginably distant parts of the world.


A screenshot from Rachel Binx’s Facebook Stories: Virality

Sharon Yang Project 07 Curves

Project

/*Sharon Yang
Section C
junginny
Project-07
*/

var nPoints = 100;

function setup() {
  createCanvas(480, 480);
}

function draw() {
  background(254, 200, 200);
  push();
  translate(width/2, height/2);
  rotate(PI); //rotating the shape 180 degrees
  drawHeart(); //call the function to draw the shape
  pop();
}

function drawHeart() { //function to create the heart shape
  noStroke();
  if (mouseX <= 240 & mouseY <= 240) { //the mouse X and Y determines the color of the shape
    fill(255, 0, 0); //red
  }
  else {
    fill(200, 25, 60); //burgundy
  }
  beginShape(); //create the heart shape
  for (var i = 0; i < nPoints; i++) {
    var t = map (i, 0, nPoints, 0, TWO_PI);
    var consMouseX = constrain(mouseX,0,width/2);
    var consMouseY = constrain(mouseY,0,height/2.2);//constrain to stay within the canvas border 
    x = 16 * pow(sin(t), 3);
    y = 13 * cos(t) - 5 * cos(2 * t) - 2 * cos(3 * t) - cos(4 * t); //formula for the shape
    x = map(x,0,16,0,consMouseX);
    y = map(y,0,16,0,consMouseY);
    vertex (x, y)
  }
  endShape(CLOSE);
}

This project was particularly difficult to start as a mathematical equation also had to be incorporated for the geometric shape. However, once making the shape with begin and end shape, it was quite straightforward to make the shape increase and decrease in size and make the color change with mouse X and Y. The following are the screenshots of the varying image with different mouse X and Y.

Sharon Yang Looking Outwards -06 Randomness in Art


Vladimir Kanic’s Random Generative Art

Generative art pieces based on randomness that I find admirable is Vladimir Kanic’s art pieces. The artist was inspired by chaos theory and explored using randomness as a structure of his works. The type, the genre and the content of his works were determined through observing and measuring random events. In order to do this, he devised a system which models randomness called ‘Magic Box’, which is twelve boxes being given to random art directors, and each one put a random number of randomly selected objects inside. Then, a group of random people placed the objects in the boxes a completely random and unorganized stash, and the artist chose one of the boxes to generate art out of it. He mainly created a film out of these random objects, generating patterns using various algorithms to create even more randomness in his pieces.