rpai@andrew.cmu.edu – [OLD FALL 2019] 15-104 • Introduction to Computing for Creative Practice

Raymond Pai – Final Project

Due to being unable to upload programs with libraries on WordPress, you need to click on the ‘sketch’ hyperlink to enjoy this program.

For my final project, I wanted to expand upon the Raining Letters assignment. I wanted to experiment with the camera more, and I decided to create an application that lets the user draw with their face. Moving your face around lets you draw, pressing the spacebar clears your art. The canvas changes color each time the page loads and is based on halftone art (which has a grid of circles). You can also use the slider to change the thickness of the brush (face brush :0).

The program and the libraries linked to it can be found in this zip file:

rpai_final

Raymond Pai – Project-12-Proposal

For my final project, I would like to create a growing-plant drawing experience. It should predict the user’s next steps using their previous steps and randomly and gradually grow plant parts out of their strokes. It should also use inputs from the environment such as sound and light to change the ‘mood’ of the drawing. If possible, I want the drawing to appear three-dimensional. To push this further, I want the stroke to draw based on how the user moves their hand in front of the computer camera. For example, a simple finger-pointed movement in front of the camera would create a stroke, which the software would slowly ‘grow’ the branches and flowers from the stroke the user drew:

Raymond Pai – Looking Outwards – 12

Project Soli

https://nand.io/projects/project-soli

DR. IVAN POUPYREV created a data visualization of movements of the hand. I admire that it uses a radar to sense how the hand is moving, then translates that into colors and strokes on a page. It also allows the user to use gestures to play games. I think it has the opportunity to allow users to create their own art.

Dissonant Imagery

http://www.daito.ws/en/work/dissonant-imaginary.html

In 2018, Daito Manabe + Kamitani Lab created a visualization of imagery in the mind using “brain decoding”. I admire that it focuses on the relationship of brain activity, visuals, and sound to predict the mental visuals that the user is thinking about. I think this has the opportunity to help people generate art covers for playlists of music, allowing them to identify the playlist by the image instead of a playlist name.

Raymond Pai – Project 11 – Generative Landscapes

I wanted to be a moon rover, so I sketched an illustration of being on the moon. The ground is grey and you slowly move across the moon’s surface.

sketch

///RAYMOND PAI
///SECTION D
///RPAI@ANDREW.CMU.EDU
///PROJECT 11

var stars = [];
var sX = 0;
var sY = 0;
var moonSpeed = 0.00009;
var moonDetail = 0.005;

function setup(){
    createCanvas(480, 300);
    //initialize stars
    for(var i = 0; i < 30; i++){
        sX = random(width);
        sY = random(height);
        stars[i] = makeS(sX, sY);
    }
}

function draw() {
    background(0);
    //draw earth
    noStroke();
    fill(90, 90, 255);
    ellipse(130, 80, 70, 70);
    fill(0, 255, 0);
    rect(130, 80, 30, 20);
    fill(0, 255, 0);
    rect(100, 60, 20, 10);
    //moon ground
    drawMoon();
    //stars
    drawS();
}

function drawS(min, max, moise) {
    noStroke();
    fill(255, 255, 0);
    push();
    translate(this.x, this.y);
    ellipse(10, 10, 5, 5);
    pop();
}

function makeS(stX, stY){
    var makeStar = {x: stX,
                y: stY,
                speed: -3,
                move: moveS,
                draw: drawS}
    return makeStar;
}

function moveS(){
    this.x += this.speed;
    if(this.x <= -5){
        this.x += width;
    }
}

function displayS(){
    for(var i = 0; i < 50; i++){
        stars[i].move();
        stars[i].draw();
    }
}

function drawMoon(min, max, moise) {
    fill(150);
    beginShape();
    //makes ground of the moon surface
    for (var x = 0; x < width; x++) {
        var t = (x * moonDetail) + (millis() * moonSpeed);
        var y = map(noise(t), 0, 1, 0, 400, 400);
        vertex(x, y);
    }
    vertex(width, height);
    vertex(0, height);
    endShape();
}

Raymond Pai – Project 10 – Sonic Sketch

sketch

Coins are hidden in your keyboard! Press different keys until you find (hear) the jackpot! There are 4 different coin sounds in total. The sounds are inspired by retro video game coin sounds.

The keys that hide the coins are ‘a’ ‘r’ ‘u’ and ‘b’. This is achieved through keyTyped. These keyCodes play their respective retro coin sounds.

Raymond Pai – Looking Outwards – 10

For this Looking Outwards, I wanted to focus on a new computational instrument. The Midi Fighter 64 is a ‘finger drum’ instrument, in which a user can program sounds into each button and play the instrument by pressing the buttons. There’s a wide range of button numbers, from 4 x 4 (16 buttons) to 8 x 8 (64 buttons). Artists who use these instruments are called controlerism artists because the boards are closely related to video game controllers (Midi Fighters are only used for music). Another notable similarity between these instruments are computer games is that the buttons on the Midi Fighter are the same as retro Japanese arcade buttons.

The Midi Fighter sounds are programmed into the board using Ableton Live, a DAW (Digital Audio Workstation). The Midi Fighter was originally created by Ean Golden, who’s been interested in controlerism music since the early 2000s. Golden wrote and published an article on the topic in 2007 called ‘Music Manuevers’: https://archive.moldover.com/press/Moldover_Remix_Oct-2007_w.jpg . The instrument has since been popularized by artists such as Shawn Wasabi, a DJ who has pushed the instrument to its limits and played a role in its development to turn it into a marketable product.

To see the Midi Fighter in action:

Raymond Pai – Project 09 – Computational Portraits

sketch

//RAYMOND PAI
//Section D
//rpai@andrew.cmu.edu
//Project 09 Comp Portrait

//pre load image
var underlyingImage;

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

function setup() {
    createCanvas(500, 500);
    background (0);
    //pre load image's pixels
    underlyingImage.loadPixels();
    // slightly fast frame rate
    frameRate(300);
}

function draw() {
    //random pixel
    //x of pixel
    var px = random(width);
    //y of pixel
    var py = random(height);
    var fx = constrain(floor(px), 0, width-1);
    var fy = constrain(floor(py), 0, height-1);
    //load pixel color to 'give' to the color of the circles
    var theColorAtLocationXY = underlyingImage.get(fx, fy);

    //draws circles
    fill(theColorAtLocationXY);
    noStroke();
    ellipse(px, py, 20, 20);

    //draws circles at mouse
    var theColorAtTheMouse = underlyingImage.get(mouseX, mouseY);
    //color for circles
    fill(theColorAtTheMouse);
    //draw circles at mouse
    ellipse(mouseX, mouseY, 20, 20);
}

I used chunky circles to make my portrait. To emphasize the playful style, the original picture is already edited to be really colorful:

The picture loads pretty quickly because I don’t want to wait to see the original. You can also speed up the process even more by rapidly moving the mouse around the portrait. The whole image should appear in about a minute.

Raymond Pai – Looking Outwards – 09

Danny Cho’s Looking Outward 03 looked at Neri Oxman’s ‘Wanderers’. The 2014 project creates very high-quality renderings of computer-generated growth of organic forms. I’m drawn to it because of the unsettling appearance of these forms, which appear infectious and bacterial. I agree with Danny’s assumption that trigonometry is used. More specifically, I understand that realistic video games use extremely high polygon counts and textures, which might explain the high definition of this project. I’m interested in Danny’s suggestion that Cinema 4D was used in this project. If so, it might’ve been a separate plugin that was developed by the artist to manipulate objects in the Cinema 4D software. I relate to Danny’s concern of computational generation not usually appearing very organic, because of the ‘uncanny valley’ of computed organic objects is very unsettling to me. I’m not sure if I’ll ever be okay with computers o

Raymond Pai-Looking Outwards-08

Shadi Petosky and Mike Owens founded Puny Entertainment. The design studio, based in Minneapolis, created animations for introductions. These introductions ranged from TV shows, Amazon Prime originals, and Eyeo Festival’s 2011 show. The founders of Puny Entertainment both studied film and animation in college, going on to create their own animated shows. The studio has been closed for several years for unknown reasons.

Their work consists of mostly animation, such as the title cards of Eyeo. Titles and intros make up most of the studio’s work, although the founders have worked on full length shows and books. Puny presents their work as dynamic and reflective of the design styles of the speakers of Eyeo. Names of the speakers are clearly presented, with their work animated in the background. The energy and vibrancy of their animation can be learned from. The link for the animation:

Raymond Pai-Project 07 – Composition with Curves

sketch

///RAYMOND PAI
///SECTION D
///RPAI@ANDREW.CMU.EDU
///PROJECT 07

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

function draw() {
    background(mouseX, mouseY, mouseX);
    //Draw Curves 1 and 2
    drawE1();
    drawE2();
    drawE3();
    drawE4();
}

function drawE1() {
    push();
    //Color
    fill(mouseX + 50, 50, mouseY + 50);
    //Center
    translate(width / 2, height / 2);
    var a = map(mouseX, 0, width, 0, 250);
    var b = map(mouseY, 0 , height, 0, 250);
    beginShape();
        for (var i = 0; i < 250; i++) {
            //Angle
            var t = map(i, 0, 250, 0, 2 * PI);
            //Epicycloid equations
            x = (a + b) * sin(t) - b * sin((a + b) * t / b);
            y = (a + b) * cos(t) - b * cos((a + b) * t / b);
            vertex(x, y);
        }
    endShape();
    pop();
}

function drawE2() {
    push();
    //Color
    fill(0, mouseX + 50, mouseY + 50);
    //Center
    translate(width / 2, height / 2);
    var a = map(height-mouseX, 0, width, 0, 250);
    var b = map(height-mouseY, 0 , height, 0, 250);
    beginShape();
        for (var i = 0; i < 250; i++) {
            //Angle
            var t = map(i, 0, 250, 0, 2 * PI);
            //Epicycloid equations
            x = (a + b) * sin(t) - b * sin((a + b) * t / b);
            y = (a + b) * cos(t) - b * cos((a + b) * t / b);
            vertex(x, y);
        }
    endShape();
    pop();
}

function drawE3() {
    push();
    //Color
    fill(200, mouseY + 50, mouseX + 50);
    //Center
    translate(width / 2, height / 2);
    var a = map(height/2-mouseX, 0, width, 0, 250);
    var b = map(height/2-mouseY, 0 , height, 0, 250);
    beginShape();
        for (var i = 0; i < 250; i++) {
            //Angle
            var t = map(i, 0, 250, 0, 2 * PI);
            //Epicycloid equations
            x = (a + b) * sin(t) - b * sin((a + b) * t / b);
            y = (a + b) * cos(t) - b * cos((a + b) * t / b);
            vertex(x, y);
        }
    endShape();
    pop();
}

function drawE4() {
    push();
    //Color
    fill(mouseX + 50, mouseX + 50, 200);
    //Center
    translate(width / 2, height / 2);
    var a = map(height/1.5-mouseX, 0, width, 0, 250);
    var b = map(height/1.5-mouseY, 0 , height, 0, 250);
    beginShape();
        for (var i = 0; i < 250; i++) {
            //Angle
            var t = map(i, 0, 250, 0, 2 * PI);
            //Epicycloid equations
            x = (a + b) * sin(t) - b * sin((a + b) * t / b);
            y = (a + b) * cos(t) - b * cos((a + b) * t / b);
            vertex(x, y);
        }
    endShape();
    pop();
}

Flower Power!

The curve I used is the Epicycloid. I like how it creates petals that resemble flowers.

I used 4 Epicycloids of varying sizes to create the effect of flowers without making it obvious that they’re flowers. I decided to do this because the flowers looked pretty lonely.

The more curves I added the more interesting the floral patterns became.

The colors are based on the mouse position, but I limited them slightly to more pastel and ‘Spring’ colors, such as pink, green, yellow, etc.

The final product is an abstract and colorful depiction of flowers. Sometimes the flowers invert and create interesting sharp objects, like thorns of a rose. They also contribute to more detailed flowers, such as the process image above.