SectionD – Page 10 – [OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice

LO – 09

From Bennett’s LO – 04 on Tomu Tomu’s “Plant Sounds” project:

I really like the idea of being able to hear plant sounds. I like to think that everything makes noise, it’s just the matter of being able to hear it, like how when in a really quiet space or after working out you can hear your own body working, your inhale and exhale, your pulse, your blood running through your body. I guess plants don’t actually make noises, but I think that synthesizing certain noises to specific biological processes of the plant would be interesting. I think it would actually be an interesting exploration of tracking a plant’s growth or health. Assuming that certain processes are only for producing a new growth–maintaining current growths, cutting off nutrients from certain areas of the plant(like flowers on a plant dying), or trying to heal from damage or fight off infection–the general sounds produced by the plant would change according to what processes it’s engaging in, so you would be able to tell if the state of the plant is undergoing change prior to any visible change simply by the change in the sound produced. Although I think that would be far more complicated to create.

The “Plant Sounds” project reminds me of a product I saw a while ago: Playtronica. It’s a TouchMe Midi that faciliates the production of sound when an electronic loop is formed, essentially making it so that when two people form hold either end of the midi, they are able to create music through touching each other. I think the Playtronica has a lot of potential for experimentation, especially when used for performance or music production. I would be really interested in seeing a dance performance where the dances have individual midis with a specific set of notes/sounds per performer so that the sounds are explicitly created by the interaction of touch between specific dancers. I wonder if that were applied to a longer performance, like a ballet, you would be able to find motifs within the created music that tracks the interactions and grown of relationships between certain characters of the ballet.

Playtronica TouchMe: https://shop.playtronica.com/touchme

Looking Outwards – 04

LO: On Looking Outwards

While I was browsing through the different Looking Outwards, this project by Manolo Gamboa Naon stood out to me. It is a generative digital art, but when I first looked at it, it screamed 3D to me. Despite it being digital, I kept on thinking of how they could bring to life in the real world, Such as using see-through fabric (like chiffon) to mimic the translucent outer circles and maybe even cardboard with the center circles to create a sense of depth and height. It is so interesting to me to envision this in reality and make it into something that is touchable. There are so many textures to explore. I agree with laurel in how the simpleness in the randomness makes the work complex. The explosion of color and circles is really mesmerizing and beautiful.

Manolo Gamboa Naon: https://www.behance.net/manoloide

laurel’s looking outwards post

Project 09: Custom Pixels

sketch

//Jessie Chen
//D
//Project 09
//Computational Portrait
//Custom Pixel

var img;
let flowers = ['✽', '✾', '✿', '❀', '❁']

function preload() {
    img = loadImage("https://i.imgur.com/p0nMT7R.jpg")
}

function setup() {
    createCanvas(480, 480);
    //image in the center
    imageMode(CENTER);
    img.loadPixels();
    //resize image to canvas
    img.resize(480, 480);
    frameRate(10000);
    //pink background
    background(200, 170, 170);
}

function draw() {
    //pick random x and y
    var x = floor(random(img.width));
    var y = floor(random(img.height));
    
    //pull pixel color from that x and y
    var pix = img.get(x, y);
    
    //fill using the pixel color
    fill(pix);
    
    //keeps the pixels where the face is 
    //smaller so it can have more detail
    if (x > 90 & x < 270 && y > 80 && y < 350) {
        textSize(random(5, 15));
    } else {
        textSize(random(10, 20));
    }

    //draws flower in place of the pixels
    text(random(flowers), x, y);
}

//when the mouse is clicked the blobs enlarge 
//until it no longer becomes a face
function mousePressed() {
        filter(ERODE);
}

I took a selfie with a filter that drew flowers on my face. From that, I wanted to create this project using flower symbols as my custom pixel. I chose to make the pixels where the face is smaller than the background so the face would have more detail. I also added an effect where every time you click on it, the symbols would enlarge into blobs to make it seem a little bit more creepy (yay for Halloween!).

Project_09_Portrait

My portrait Download

//Huijun Shen
//huijuns@andrew.cmu.edu 
//section D

var imgFace;

 
function preload(){
    
    imgFace = loadImage("https://i.imgur.com/d3YOxlo.jpg"); 


}

function setup(){
    createCanvas(480,480);
   // imageMode(CENTER);
    imgFace.loadPixels();
    imgFace.resize(480,480);
    noStroke();
    frameRate(200);


}

function draw(){

    //image(imgFace,0,0,width,height);

    var xp = floor(random(imgFace.width));
    var yp = floor(random(imgFace.height));
    var pix = imgFace.get(xp,yp);
    fill(pix);
    print(pix);
    push();
    translate(xp,yp);
    Orthotomic();
    pop();

    
    

}

function Orthotomic(ex,ey){ // Here is the code I reused from my previous work and I made some changes to it so that it fit this painting better.


        var nPoints = 100;

        var x,y;

        beginShape(); // the shape
    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);
        x = constrain(mouseX,0,150)/30*cos(t); //the shape size is affected by mouseX
        y = sin(t);
        var x1 =x*cos(2*t)-y*sin(2*t)+2*sin(t);
        var y1 =-x * sin(2*t) - y*cos(2*t) + 2*cos(t);
        vertex(x1+random(5), y1+random(5)); //make the edge a bit random lines
    }


    endShape(CLOSE);

}

In this project, I customized the shape of the “Brush” a bit by reusing previous and made it a bit randomized. The edge of the brush is changing every frame. The size of the brush is controlled by MouseX so that painter can do big stroke at the very beginning and small stroke at the very end to put more details.

LO-09

https://www.archdaily.com/868540/this-mysterious-3d-printed-grotto-challenges-boundaries-of-computational-geometry-and-human-perception

As a concept artist, I basically do visual design for games. I am very interested in generative art, so that I checked back to week 2 LO and found Robert’s post about Dillenberger & Hansmeyer’s 3D printer grotto. (Thank you for your post)
I think the working process of computer generative art and concept design are very different but concept art can borrow some essence from computer generative art for sure. Especially about the weird shape and repetitive technology feeling, this aspect is very hard for the human brain to create.
But as always, I don’t think computer generative art can be directly used in concept design. It is very easy to tell the picture is to some extent lack of deep thinking and art re-twist. People’s eyes like to see something that has big, medium, small reads. The problem of computer generative art is that it is very even. I definitely think the 3D work I referenced here is awesome and also I definitely think it is not suitable for any game or film without re-design by designers. It is full of details. Just imagine if audience need to watch a movie and it has so many details for 90 minutes long, they will be so bored after 10 minutes because they don’t know what to look at.
In one sentence, I think computer generative art is awesome as a starting point for design, but it is far from excellent in terms of using it in mature visual products.
( Here is my portfolio just in case someone is curious about what I am literally doing for games: www.yolishen.com)

Project 09 – Computational Portrait

sketch

//Stefanie Suk
//15-104 Section D

var selfPic;
var starSize = 10; //initial star size 10
let stefanie = ['s', 't', 'e', 'f', 'a', 'n', 'i', 'e']; //letters of my name
let stars = ['✦', '★', '✷', '✸']; //shapes of stars

function preload() {
  selfPic = loadImage("https://i.imgur.com/iSI6MtQ.jpg"); //preloading image
} 

function setup() {
  createCanvas(400, 400);
  noStroke();
  background(0); //initial background color set to black
  imageMode(CENTER);
  selfPic.loadPixels(); 
  frameRate(30);
  
}

function draw() {
  //get random x, y coordinates 
  var x = random(selfPic.width);
  var y = random(selfPic.height);
  var p = selfPic.get(x, y); //color to image at location

  //draw letters s,t,e,f,a,n,i,e
  fill(p);
  textSize(15);
  textFont("Helvetica");
  textStyle(BOLD);
  text(random(stefanie), x, y); //draw random letters from my name 

  //draw stars
  var mouseColor = selfPic.get(mouseX, mouseY); //color star to image at mouse location
  fill(mouseColor);
  textSize(starSize);
  text(random(stars), mouseX, mouseY); //draw random stars
}

function mousePressed() {
  background(255); //resets with the color of white
}

function keyPressed() {
  starSize += 1; //star size increases when any key is pressed
}

I chose a photo of me during quarantine taking pictures of myself because I was really bored. This portrait draws random letters of my name, as well as random shapes of stars based on the mouse position. The star increases in size when any key is pressed, and the portrait resets to a color of white when the mouse is clicked.

Portrait with letters and stars with different sizes

Looking Outwards 09 – on Looking Outwards

Looking Outwards 07 (Information Visualization) by Shruti Prasanth talks about Aaron Koblin’s Flight Patterns. I was first drawn to the project because of its aesthetic visuals. The contrast between the dark background and bright neon lines were eye-catching, and the shapes created by overlapping strings give an interesting pattern. I definitely agree with Shruti that the overlapping intersections of the strings really enhance the visuals of this project, especially because the lines glow brighter at the intersection point which shows the density of the air traffic. It was interesting to know that Shruti finds this map similar to the map she saw in global history class about traffic patterns of slave ships. I definitely see the similarity between the visuals of the traffic patterns of slave ships in American history and the Flight Patterns by Aaron Koblin, because they both use lines to represent the traffic patterns. The interesting part I personally think about the connection between the two maps is that one represents the traffic pattern on the ocean and the other represents the traffic pattern in the sky. We can compare and see how much technology has developed over time, and also see how different transportation is. The contrast between the colors of the background and the strings definitely makes the shape of the United States more clear in the project, but I personally think the dark spaces in the background represents the “air/sky” rather than the “sea”. The visuals of the project to me feels like the strings are placed in mid-air. I personally interpreted the strings to be visual representations of trails left behind planes, something like contrails.

Link to Aaron Koblin’s Flight Patterns here

Shruti Prasanth’s Looking Outwards-07, October 18, 2020: https://courses.ideate.cmu.edu/15-104/f2020/2020/10/18/lookingoutwards-07-6/

Video of Flight Patterns

LO – 09

Jubbies Steinweh-Adler
In Response to Holly Liu’s LO #4, September 26, 2020

In response to Holly Liu’s Looking Outward’s about Christina Kubisch’s Cloud, I have to say, I wish I could experience this interactive art installation myself. This piece reminds me of a theremin, an instrument that also uses electromagnetic field generation but instead of curly wire, it uses two antennae. I find it interesting how Kubisch’s cloud seems so much more inviting to me than a theremin, which I believe is a result of the use of bright color and whimsical arrangement of wire.

I explored some other works of Christina Kubisch, who apparently is well-known for her explorations of sound art using electromagnetism. I really appreciate how she has taken a simple mechanical principle and used it to inspire so many different experiences. My favorite of her work so far is Electrical Walks, which again makes use of wireless headphones responding to electromagnetic fields. The interesting distinction of this project is that the headphones make audible the sounds of above- and underground fields generated by everyday objects from light fixtures to streetcar cables. I absolutely love how this project allows people, for perhaps the first time, question what unassuming objects like security cameras sound like.

Christina Kubisch Portfolio: http://www.christinakubisch.de/en/works/installations/2

Holly Liu OP:

LO 4

Project 09 – Portrait

For my portrait, I wanted to replicate my experience of using this program, which was one that was filled with awe. I tried inserting many different phraseI used the text “oooh” and “ahhhh” to paint the face depending on if the mouse is clicked or not. I wanted to use variation of text size, spread, and density in order to give the user some variability in how they paint the face. I am using a portrait of myself for this assignment.

sketch Download

//JSTEINWE - 09 - PROJECT (October 31st, 2020)
//JUBBIES STEINWEH-ADLER
//SECTION D
//FACE GENERATION

var tSize; // size of words
var tSpread; //spread of words from one another
var tWord; //word written 
var tn; // number of words in one cluster


function preload() {
    var faceLink = "https://i.imgur.com/Q0Fw6fr.png"; 
    faceImage = loadImage(faceLink);
}

function setup() {
    createCanvas(480, 500);
    background(120, 180, 255); //background
    textSize(20);
    fill('green');
    textAlign(CENTER);
    text("[click and hover mouse to paint]", width/2, 400); //click instructions
}

function draw() {
        if (mouseIsPressed) {
            tn = 5;
            tSpread = 30;
            tSize = random(30, 50);
            tWord = "ooh";
        } else {
            tn = 3;
            tSpread = 10;  
            tSize = random(1, 20);
            tWord = "ahh";
        }
    typing(mouseX, mouseY); // words written at X and Y coords
}

function typing(x, y) {
    //COLOR OF MOUSE ON CANVAS
    var xColor = constrain(mouseX, 0, width); // coords of mouse X on canvas
    var yColor = constrain(mouseY, 0, height); // coords of mouse Y on canvas
    var mouseColor = faceImage.get(xColor, yColor); // gets color
    
    fill(mouseColor); //fills the type with specified color   
   
    //TYPE PROPERTIES
    for (i = 0; i < tn; i += 1) { // determines spacing and density for each cluster
        var t = random(0, 30); //random angle to create natural cluster
        var typingX = x + cos(t)*(i*(tSpread));
        var typingY = y + sin(t)*(i*(tSpread)); 
        textSize(tSize);
        text(tWord, typingX, typingY); //click instructions
  }
}

Project 9: Computational Portrait

For this project, I decided to draw a picture of me when I was a child. I created random shapes similar to snowflakes to represent a time of innocence and delicacy. I created the portrait with an emoticon that reflects my feeling toward that time of my life.

sketch

/*
Bon Bhakdibhumi
bbhakdib
Section D
*/

var img;
var transparent = 0;

function preload() {
  img = loadImage('https://i.imgur.com/9gYfG3D.jpg');
}

function setup() {
    createCanvas(400, 567);
    imageMode(CENTER);
    noStroke();
    img.loadPixels();
    background(255);
}

function draw() {
// random x & y positions for where to draw
  var x = floor(random(img.width));
  var y = floor(random(img.height));
// selecting color from the actual picture
  var pix = img.get(x, y);
  snowFlake(x, y, pix);
  cuteEmojicon(x, y, pix);
}

function snowFlake(x, y, pix) {
  fill(pix, 50);
  beginShape();
    for (var i = 0; i < 20; i++) {
       vertex(x + random(-5, 5), y + random(-5, 5));
    }
    endShape(CLOSE);
}

function cuteEmojicon(x, y, pix) {
  fill(pix, 50);
  textSize(random(5, 15));
  text('♡´･ᴗ･`♡', x, y);
}