SectionC – Page 4 – [OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice

Looking Outwards 09

Caroline is a UI/UX designer, machine learning design researcher and artist concerned about consent in technology. She is the founder of convocation design and research agency which focuses on machine learning and ux design that is for public good. As a ux designer and ux researcher she worked with Intel, IBM Watson, Wikimedia Foundation, Amnesty Foundation, and more. She additionally has partnered with Harvard Kennedy School and the Mozilla Foundation.

What I admire about Caroline is that she is a UX/UI designer which is the job I aspire to have. Her work focusing on public good also inspires me to learn more about social issues related to technology rather than just aesthetics. In her project, “How to Explain a Hurricane to an Algorithm,” Caroline explains that when her grandmother’s home was destroyed in Hurricane Katrina, she found a bunch of personal and private objects that belong to the family. She spent her last 12 years photographing and looking at archives. Using an algorithm Caroline was able to represent a documentation of loss, anxiety, grief, and post trauma culture at home.

Website: https://carolinesinders.com/how-to-explain-a-hurricane-to-an-algorithm/

Archives and images of destructed items Hurricane Katrina

Project 09: Computational Portrait

For my image, I noticed that the background lights were blurry, and I wanted to implement that in the code with mousPressesed. So each time you use you press the mouse, a filter is applied to the whole canvas and the whole canvas gets a bit blurry. Additionally, I wanted there to be a difference in shapes for the background and the person.

Small Blur

No Blur

Medium Blur

Lots of Blur

Image

asuSketch

// Your name: Ashley Su
// Your andrew ID: ashleysu
// Your section (C):  


var img;
var stars = [" ★ ", " ☆ "," ✪ "," ✦ ", " ✧ "]
var faces = ['( ͡• ͜ʖ ͡•)', '( ͡ᵔ ͜ʖ ͡ᵔ)', '( ͡~ ͜ʖ ͡°)', '( ͡◡_⦣ ͡◡)']

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

function setup() {
    createCanvas(480, 480);
    imageMode(CENTER);
    img.loadPixels();
    img.resize(480, 480);                              //resize image to canvas
    frameRate(50000);
    background(0);
}

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 pixelColor = img.get(x, y);
    
    //fill using the pixel color
    fill(pixelColor);
    

    if (x>((width/2)-50) & x<((width/2)+50) && y>height/2 && y < height) {        //setting the faces smilies to be next where the actaul face is 
        strokeWeight(5);
        textSize(random(5, 20));                    // smaller near face
        text(random(faces), x, y);                  
      } else {
        textSize(random(5, 20)); 
        text(random(stars), x, y);                  //draws stars everywhere else 
    }

}


function mousePressed() {

        filter(BLUR,3);                   // when mouse is pressed, it blurs the layer 
}

LookingOutward 09

Heather’s Website: https://www.perfectplum.com/

Game Design: https://www.perfectplum.com/portfolio_category/gamedesign/

For this week I looked at the game developed by Heather Kelly. Specifically, I looked into her project SUPERHYPERCUBE, a VR first-person puzzler where the player controls a group of cubes to fit through holes in the wall, and the game increases in difficulty by increasing the block complexity. I really the game’s aesthetics, where the games take inspiration from retro arcade gaming aesthetics and transform them into 3D space. The animation of passing through the holes and rotation also feels dynamic and matches the aesthetics of the entire game.

Heather Kelly is an associate teaching professor at ETC CMU, where her work mainly focuses on underexplored aesthetic experiences and sensory interactions. She is the co-founder of kokoromi, where her works focus on experimental game collection. Throughout her career, she has worked on a broad variety of topics in the game industry, including AAA console games, smart toys, and web communities for girls.

Throughout her career, she has also produced many sex-inspired sensory designs, such as the game concept “Our first time”, “Lapis”, the game concept based on female orgasm, and her newest mobile application “OhMiBod”, an application controlling the OhMiBod brand vibrator.

Looking Outwards 09

Work Title: Skataviz

Artist: Emily Gobeille, creator of high-end interactive installations for children

https://www.design-io.com/projects/skataviz

Emily is an artist and designer who specializes in the disciplines of installations, motion graphics, and web design. She is enthusiastic about employing technology and art combined to tell stories and create playful moments for people. As a designer for a segmented group, Emily has to spend a lot of time studying that user group’s behavioral characteristics and preferences in order to make effective designs. The Skataviz is an experimental project by Design I/O that uses interactive elements of an iPhone/iPod to record the motion of a skateboard. The motion is then visualized in 3D presentation through a video. The designer applies features of the gyroscope and accelerometer sensors of the mobile device to construct data on rotation, velocity changes, angles, and the board’s movement. In this project, openFrameworks is the primary tool used for both sensor recording and desktop visualization.

Blog 09

Camille Utterback is an artist focusing on interaction between humans and technology. Using software she writes herself, she aims to capture human movement as it is – ever-changing – through technology. With a degree from Williams College in Massachusetts, she continues to develop her body of work while teaching at schools like Stanford, Parsons, and even CMU. Her work Precarious, I think, is an incredible example of what she sets out to do. Exhibited in 2018 at the Smithsonian, Precarious is an interactive installation that translates human movement and silhouettes into continuous lines that never create a closed shape, to replicate the living, breathing, moving nature of viewers through technology. Being that the digital drawings are never fixed, the work continues to grow and change with every person that interacts with the artwork, making each viewer seem to become apart of the artwork themselves. I think this work by Utterback specifically finds the qualities that make people human and tries to reimagine it using technology that changes with the humans that view the installation. Her work begins to connect humans with technology, making technology something almost human itself. Eerie.

Camille Utterback

Precarious

Looking Outwards Week 09

https://sofiacrespo.com/

Based in Lisbon Portugal, Sofia Crespo is an accomplished artist and curator who primarily focuses on creating biologically inspired artificial intelligence-generated videos and images. The images are bizarre and ethereal, yet are rooted in familiar systems such as neural pathways, sea creatures, human organs, fungi, and animals. She programs her own project-specific custom AI software through which she runs her base images, using the AI to draw otherworldly connections between the earthly base images, which is incredibly admirable because she is able to seamlessly blend the computer-generated aspects of her work with a more analog process of physically retouching the images. While studying at Miami Art Direction School, she developed her love for AI generative art practices, and combined this passion with her interest in biology, resulting in her current technique. She no teaches workshops, gives talks, and does residencies in addition to making her own artistic works.

Srishty’s Project 9 Portrait

For my portrait, I decided to do something similar to pointillism but instead of dots, I used words. I made a list of words that are about my passions/ideal career choices and then loaded a word randomly from the list to take place of each pixel in my image. Each word matches the color of the pixel in its respective x and y location. The words are all a pretty small font so they can pick up the details of the pixels well.

sketch

// SRISHTY BHAVSAR
// PROJECT 9
// SECTION C 15-104
/*
let img;
let smallPoint, largePoint;

function preload() {
  img = loadImage('nameofimage');
}

*/


var srishty;
var passions;

function preload() {
    srishty = loadImage("https://i.imgur.com/kczcnA1.jpg"); // image of me, srishty
    passions = ["designer", "artist", "UI","UX", "researcher", "HCI", "architecture", 
    "color", "painting", 'music', "running", "singing"]; // list of my passions and career interests
    print(passions);

}

function setup() {
    createCanvas(480,480);
    srishty.resize(480,480); // resizes the ima2ge upload to imgur to be 480 by 480
    background('white');
    imageMode(CENTER); // centers image
    srishty.loadPixels();
    //noLoop();

}


function draw() {
    var x = floor(random(srishty.width));
    var y = floor(random(srishty.height));
    var c = srishty.get(x,y); // identifies the color of each pixels
    fill(c,255);
    textSize(8);
    textFont('Helvetica')
    text(passions[Math.floor((Math.random() * passions.length))] , x, y); // takes a random word from the list of passions and places it to be in the position of the image pixel
}

anabelle’s blog 09

One work I find inspiring is Claudia Hart’s The Flower Matrix. Hart is one of the pioneers from the 80s XR emergence in art. She received her education in at and architecture from NYU and Columbia and now teaches as a professor at the Chicago Institute of Art. I think it’s particularly cool how she combines physical spaces with the VR space to create a magical, surreal space that raises the question on what is “natural” and “real.” The entire exhibit is a small, isolated room covered in matrices and flashing images, which effectively convey the “surreal” effect she wants. The fact that there is also a sound element to the exhibition just makes it more complex and cooler. The multiple elements she balances in this work reminds me of the object arrays we’ve been learning about in lecture, where the VR, physical, and audio are all objects in the flower matrix array.

One of the flashing images that covers the walls of the exhibits:

Looking Outwards-09

For this week’s blog, I wanted to highlight the accomplishments and work of Sougwen Chung, a Chinese-Canadian female identifying multidisciplinary artist who bases the majority of her art on the conversation between humans and machinery. She is a former researcher at MIT’s Media lab, and currently works in a London-based studio. A specific piece that I found uniquely interesting is her piece called “Omnia per Omnia”, in which the project reimagines the traditional art of landscape painting as a collaboration between an artist, a robotic swarm, and the dynamic flow of a city. Chung creates these beautiful and intriguing artworks through the collaboration of ‘Doug’, her robotic arm that paints, powered by artificial intelligence. Chung uses the arm alongside other robots in her artworks, working together in a sort of dance. I admire the creativity and nuance approach Chung utilizes throughout her art pieces, each project more unique and meaningful than the other.

Project 9 Portrait

project7

This was pretty fun to think of different ways to create a portrait. Going off the pointillism idea, I tried to think of different shapes that could be used and experiment. I decided to use mousePressed() to restart with new shapes. I feel they all came out pretty interesting and all the shapes relate to each other differently.

//Rachel Legg / rlegg / Section C

var img;
var option = 1;

//load image
function preload(){
    //photo of me
    img = loadImage("https://i.imgur.com/wtr45Lt.jpg");
}

function setup() {
    createCanvas(450, 400);
    background(0);
    img.resize(width, height);
    img.loadPixels();
    //fast frame rate
    frameRate(500);
}

function draw() {

    //have random x & y for portrait
    var x = floor(random(0, 450));
    var y = floor(random(0, 400));
    //use color from pixel
    var color = img.get(x, y);
    //smaller shapes leads to more detail
    var s = random(3, 10);
    
    // #4 is used for each pixel
    if (option == 1){
        //have shape pop as pixels
        fill(color);
        //outline of light-colored stroke
        stroke("lightyellow");
        strokeWeight(.5);
        stroke(color);
        textSize(s);
        text("4", x, y);

    //switch 4 to circle option w/ mousePressed
    } else if (option == 2){
        //have shape pop as pixels
        fill(color);
        //outline of light-colored stroke
        stroke("lightyellow");
        strokeWeight(.5);
        circle(x, y, s);

    //switch circle to triangle option w/ mousePressed
    } else if (option == 3){
        //have shape pop as pixels
        fill(color);
        noStroke();
        strokeWeight(.5);
        triangle(x, y, x - s, y + s, x + s, y + s);
    }
    
}

function mousePressed(){
    option++;
    if(option > 3){
        option = 1;
    }
    background(0);
}