Month: November 2022

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.

Project 09 – srauch – portrait

Here is my “glass door” portrait. You can change the fidelity of it by moving the mouse up and down. By moving your mouse all the way to the bottom of it, the full portrait is revealed.

sketch
//Sam Rauch, section B, srauch@andrew.cmu.edu, project 09 
//this code makes a "glass door" picture of me with colored ellipses, like you're looking
//at me through one of those textured glass doors. It samples the image
//color at each pixel location (though it skips every other y row to help it run a bit faster)
//and draws a circle there. The circle size is tied to mouseY, so when the mouse is higher up, 
//the circles are larger and the image is lower-fidelity, but it gets higher fidelity as the
//user moves the mouse down the image. 

var samImg;
var uploadImg;

var dotArray = [];

var first = 0;

function preload(){
    uploadImage = "https://i.imgur.com/nTNXyHg.jpg";
}

function setup() {
    createCanvas(400, 533);
    background(220);
    samImg = loadImage(uploadImage);
    frameRate(1);
}

function draw() {
    
    background(50);
    image(samImg, 0, 0);
    
    if (first == 0){ // define all the dot objects; run once at start of draw

        for (var y = 0; y < 533; y+=2){ //fill array with dots all over canvas
            for (var x = 0; x < 400; x++){
                var clr = samImg.get(x, y);
                dotArray.push(makeDot(x, y, 20, clr))
            }
        }
        first ++;
    }

    var sizeTicker = map(mouseY, 0, height, 45, 3); //set dot size to move with mouseY

    shuffle(dotArray, true);
    for(var i = 0; i < dotArray.length; i++){ //draw dots in array
        dotArray[i].size = sizeTicker;
        dotArray[i].drawDot();
    }
}

//dot object and draw function
function makeDot(xpos,ypos,siz,clr){
    var dot = {x: xpos, y:ypos, size:siz,
            color:clr,
            drawDot: drawDotFunction}
    return dot;
}

function drawDotFunction(){
    stroke(this.color);
    //print(this.color)
    strokeWeight(this.size);
    point(this.x, this.y);
}

Project 09 – Project

The photo is a baby photo of myself, so I wanted to use really “primitive” shapes of squares, rhombuses, and circles (all regular shapes).

One of the most satisfying aspects of pointilist pieces is the process of it being made. I wanted this project to be interactive for the user, and really engage with the idea of “pointilism,” so the shapes are made where your mouse is on the canvas.

Additionally, if you press the mouse, you will invert the colors of the original photo, allowing for a “duality” of images being made on the same canvas.

sketch
//Aarnav Patel
//Section D
//Project

var shapeNum = 1;
var c = [];	//getPixel returns an array
var inverseColor = false;

function preload() {
	portrait = loadImage("https://i.imgur.com/aUtMs8f.png");
}

function setup() {
	createCanvas(480, 480);
	background(0);
	imageMode(CENTER);
	portrait.loadPixels();
}

function draw() {
  noStroke();

  var mX = constrain(mouseX, 0, portrait.width);	
  var mY = constrain(mouseY, 0, portrait.height);	//Constrain shapes to happen within canvas

  var x = floor(Math.floor(random(mX - 50, mX + 50)));
  var y = floor(Math.floor(random(mY - 50, mY + 50)));	//Creates "brush" radius of 50 
  c = portrait.get(x, y);

  if (inverseColor) {		//Inverses color by changing array valleus from portrait.get()
  	c[0] = 255 - c[0];
	c[1] = 255 - c[1];
	c[2] = 255 - c[2];
  }
  shapeNum = Math.floor(random(0, 2));	//Creates random indicator for whetehr its square or circle
  fill(c, 128);
  if (shapeNum == 0) {
  	ellipse(x, y, 20, 20);
  } else if (shapeNum == 1) {
  	push();					//Translate + rotate square about its center
  	translate(x, y);
  	rotate(radians(random(0, 360)));
  	rectMode(CENTER);
  	rect(0, 0, 20, 20);
  	pop();
  } 
}

function mousePressed() {
	inverseColor = !inverseColor;
}

Looking Outwards 9 – Emily Gobeille

One project that stood out to me was Emily Gobeille’s Night Bright. Andrea is the cofounder of Design I/O, which specializes in immersive spaces and interactions for museums to create new modes of learning and storytelling. Emily primarily studied motion, graphics, print, and game design, disciplines that all solidified her ability to reimagine how information can be conveyed within a space. Her focus on meaningful interactions is something that especially resonates with me, as I’m pursuing environments concentration in the School of Design, which looks at the same key concepts she focuses on of interaction and immersive hybrid spaces.

What’s especially interesting about Gobeille’s work, is her emphasis on children as an audience. Working with such an audience requires a lot of creativity on meaningful interactions – how do children interact with a space? What sparks curiosity within a child/encourages them to further interact with a space? Moreover, how can the content displayed be effectively used to immerse the child beyond just the “viewing” experience.

Website: http://zanyparade.com/
Night Bright Project: https://www.design-io.com/projects/nightbright

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.

Looking Outwards-09

One work I found really inspirational this week is Anouk Wipprecht’s fashion design. She focuses on “Fashion-Tech”, which is a combination of fashion design with engineering and computational technology. And one interesting point about her work is that fashion is not only providing a visual and tactile experience to people, her work embedded artificial intelligence and projected as a ‘host’ system on the human body. Her design has body sensors that check the user’s stress levels and comfort levels.

I specifically admire her “Spider Dress” design. This project successfully connects the human body with technology. Some part of the collar extrudes out just like a spider, and the body part design uses plastic as materials, creating a futuristic weave pattern that cannot be achieved by traditional fashion techniques. Besides, there are sensors and moveable arms to create a boundary of personal space. These embedded sensors might play an important role in future technology development, creating an exciting transformation in how people communicate with others and with the environment.

link to her website: http://www.anoukwipprecht.nl/#intro-1

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 09

Vera-Maria Glahn

Vera-Maria Glahn, manager of FIELD, a studio focused on the development of art and technology represented in innovative formats. The project IBM is especially interesting to me because it is a graphical system that helps one visualize music with dynamic and expressive shapes. Different graphical elements represent different instruments, some including melody, drums, bass, etc. 

These shapes are both shaped and behave in a way that is representative of the music and how the instruments interact. This project is almost like a visual music piece or a personification of the instruments. The forms of these instruments were derived through many iterations, including technical mappings to free and organic forms. I think this type of project is extremely captivating because of this process. Through the creative process, the team learned not only how to create expressive art, but also engineered their own unique set of tools and a whole new set of opportunities for creativity. 

https://field.io/work/ibm-think-2020

Computational self-portrait

This is my self-portrait. I try to use parabola lines instead of points to draw my image. The shape of lines is varied by adding an acceleration variable to change dx and dy. The portrait is looped and redrawn every 500 lines.

//Jason Jiang
//Section E
//Setting up variables
var np = 0;
var particleSetup = [];
var myProtrait
function preload(){
    myProtrait = loadImage("https://i.imgur.com/huB83xd.jpg");
}

//Updating properties of particles each step
function particleStep(){
    //Getting pixel color of the location of each particle on the image
    this.c = myProtrait.get(this.x, this.y);
    
    //Adding acceleration to create parabola curve
    this.dx += this.ax;
    this.dy += this.ay;
    
    //Updating x,y locations of particles
    this.x += this.dx;
    this.y += this.dy;
    
    //Updating x,y locations of particles in next step
    this.x1 = this.x + this.dx;
    this.y1 = this.y + this.dy;
    
}

//Drawing lines between two particles
function particleDraw(){
    stroke(this.c);
    strokeWeight(this.s);
    line(this.x, this.y, this.x1, this.y1);
    
}

//Creating particles
function particle(px, py, pdx, pdy, pax, pay, pc, px1, py1, ps){
    var p = {
        x: px, 
        y: py, 
        dx: pdx, 
        dy: pdy, 
        ax: pax, 
        ay: pay, 
        c: pc, 
        x1: px1, 
        y1: py1, 
        s: ps,
        stepfunction: particleStep, 
        drawfunction: particleDraw
        }
    return p; 
}

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


function draw(){
    //Constraining number of particles
    if (np < 500){
        //Creating objects and adding them into array
        c = color(random(255), random(255), random(255))
        var p = particle(random(width), random(height), random(5), random(10), random(0.5, -0.5), random(0.5, -0.5), c, 0, 0, random(1,8));
        particleSetup.push(p);
        np+=1
    }

    //Resetting canvas if num of particles exceeds 500
    if (np == 500){
        background(255);
        np = 0;
        particleSetup = [];
    }

    //Running particles
    for(i = 0; i < np; i++){
        var p = particleSetup[i];
        p.stepfunction();
        p.drawfunction();
    }
   
    }