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

LO 09

In catbug’s Looking outwards 6 post, catbug talks about Robbie Barrat’s Neural Network Balenciaga series. The series is comprised of a line of fasion items produced by and amalgamation of an AI’s interpretation of Balenciaga’s lookbook, runway shows, and published images. What is interesting about this is that it walks the fine line, like catbug says, “creativity and mimicry”. The AI’s interpretation at the same time not only allows us to analyze what makes the Balenciaga line Balenciaga, but also begins to examine the idea of a designer’s true need to design. If there is a commonality within all the design work done by this luxury fasion house, what’s the point of hiring new designers? Wouldn’t a computer algorithm be enough to generate the next season of their line? As long as the inputs for the current trend and the “Balenciaga DNA” is present, a continuity of their design legacy is sure to last.
The ephemorality of human led design is upon us.

Looking Outwards 06: Randomness

https://www.ssense.com/en-us/editorial/fashion/do-androids-dream-of-balenciaga-ss29?utm_term=collabshare

Looking Outward 09

Jubbies’s Looking Outwards Post on Joris Laarman piqued my interest. Joris Laarman is a Dutch artist who utilizes emerging technologies in his work and founded a self-named experimental design lab in the Netherlands.

The work being discussed was his “Strange Attractor Lamp” made in 2016: this was a dynamic piece of random-looking, sweeping metal elements woven together that had the ability to function as a lightning element.

Jubbies mentions that they enjoy the “blend of digital and organic” within this work and I feel similarly. I love how Joris Laarman is able to turn a material that most people think of as hard, cold, and industrial, and infuse an organic form onto it.

LO 03: Computational Fabrication

Looking Outwards – 09 – On Looking Outwards

Random Internationals Swarm Studies is incredible because it automatically draws people in. It allows people to interact with the piece through visuals, audio, and motion. I agree with Mango in that I also admire how the piece manifests unique forms with each interaction it has with each person. In a way, it encourages people to become an artist themselves and create their own personalized experiences.

Random Internationals – Swarm Study I (2010)

I also believe that Random Internationals wanted to imitate the acrobatic efficiency of birds in flight. It seems like mystery how entire flocks of birds are able to make quick, instant turns when they are flying forty miles per hour. Studies have shown that flocks are able to propogate easily because each bird watches for the moves of their nearest neighbor. Similarly, each light source in the piece changes their direction and motion in response to the noise near them, resulting in collective behavior.

In this way, I think that the creators’ artistic sensibilities are rooted in togetherness. The act of collective behavior of the lights, people, and their interactions, can lead to artistic experiences.

Project – 09 – Portrait

For this project, I used a picture that I took of my mom while we were at Epcot, Walt Disney World. We were in the Power of Color theater, which shone different hues of colors while we stood in the room. Because of that, I tried to add colors that shoot out towards the top of the canvas when the mouse is clicked.

sketch

/* 
 * Amy Lee 
 * amyl2
 * Section B 
 */ 

var myPicture; 
var x = 0; 
var y = 0; 
var star; 

function preload(){
	var picLink = "https://i.imgur.com/sTUlPXx.png"; 
	myPicture = loadImage(picLink); 
}

function setup() {
    createCanvas(335,409);
    background(200,226,206);
    myPicture.loadPixels(); 
    frameRate(500); 
    // setting up star parameters 
    star = {
    		sX: mouseX,
    		sY: mouseY, 
    		size: random(5,15)
    }
}

function draw() {
	// pick random x and y coordinates of picture
    var picX = random(width);
    var picY = random(height);

    // Pixel position to retrieve color from - constrain within canvas 
    var imX = constrain(floor(picX), 0, width);
    var imY = constrain(floor(picY), 0, height);

    // Get color of image at pixels
    var pixelColor = myPicture.get(imX,imY);
    fill(pixelColor); 
    mouse(picX,picY); 

    // Wavy red borders around picture 
 	for (var x = 0; x < width; x = x + 1){
 		stroke(167,37,42,.8); 
 		strokeWeight(22); 
 		point(x, 35-20*sin(radians(x))); 
    }

  	for (var x = 0; x < width; x = x + 1){
 		stroke(167,37,42,.8); 
 		strokeWeight(22); 
 		point(x, 376-20*sin(radians(x))); 
    }

  	for (var x = 0; x < width; x = x + 1){
 		stroke(167,37,42,.6); 
 		strokeWeight(22); 
 		point(x, 65-20*sin(radians(x))); 
    }

  	for (var x = 0; x < width; x = x + 1){
 		stroke(167,37,42,.6); 
 		strokeWeight(22); 
 		point(x, 346-20*sin(radians(x))); 
    }

    // Shooting star of random colors 
    fill(random(255),random(255),random(255)); 
	noStroke();  
    ellipse(star.sX,star.sY,star.size,star.size);
    // make the star move to the left 
    star.sX = star.sX - 1; 
    // make the star move upwards
    star.sY = star.sY - 1; 
    // make the star smaller 
    star.size = star.size - 0.2;
}

// Creating Mickey Mouse head shape 
function mouse(x,y){
	noStroke(); 
	ellipse(x,y,20,20);  
	ellipse(x-10,y-10,15,15); 
	ellipse(x+10,y-10,15,15);  
}

// when mouse is pressed, a new star is formed at the mouse (x,y) position
function mousePressed(){
	star = {
		sX: mouseX,
		sY: mouseY, 
		size: random(5,15)
	}
}

Project 9 Portrait

The project uses transparency and the mouse IS Pressed function to achieve a variety of detail with the newly generated portrait. The new portrait can range from highly abstract to an almost monet like blurry vision.

Hold the mouse button to scramble the image.

Release the moue button to make the image clear

sketch

//tjchen 
//hand in 9 project 

var img;
var pts;// amount of divisions on the canvas
var steps;

function preload(){
    //loads teh image
    img= loadImage("https://i.imgur.com/68RyRgM.jpg");
}
function setup() {
    background(255);
    frameRate(10);
    createCanvas(480, 270);
    //center image on canvas
    imageMode(CENTER);
    noStroke();
    img.loadPixels();
    //generate random grid subdivision
    pts = int(random(1,40));
    print(pts); // for dbugging
}

function draw() {
    //generate grid
    for (let x = 0; x<width; x+=width/pts){
        for(let y = 0; y<height; y+=height/pts){
            //get color information from pixel
            let c = img.get(x,y);
            noStroke();
            //create the subdivided pixelated image 
            fill(c[0],c[1],c[2],10);
            square(x,y,width/pts);
        }
    }

    //hold mouse to rescramble the image 
    //release to unblur
    if(mouseIsPressed){
        pts = int(random(1,40));
    } 
}

Looking Outwards 09: on Looking Outwards

In the 5th week of looking outwards, we were tasked with looking at 3d graphics. There is a wide variety of choices my classmates have chosen to analyze and elaborate on. A specific one I’ve taken a liking to is the one on Jakub Javora by the author under the alias, rkim. They bring up the transformation of a real location to an alternate reality in a project called Restore Point. This is similar to the post by the author under the alias, carson michaelis. The core concept of creating an illusion with a preexisting condition is what the authors and I find fascinating. They focused on a rendering from an architectural firm, WOJR, and their project, ‘Mask House’.The difference between the two projects is one is creating an artificial world that is meant to be fantasy but one is created to portray a potential reality. Both create a mood they want the viewer to experience and cater to their visual palette. I enjoyed both projects and think both authors are absolutely right when it comes to their analysis of their executions.

*carson michaelis*‘ *Looking Outwards 5*

Project 9: Portrait

portrait-cb

var myImg;

function preload() {
    var ImgURL = "https://i.imgur.com/6nqYPHi.jpg";
    myImg = loadImage(ImgURL);
}

function setup() {
    createCanvas(400, 400);
    background(0);
    myImg.resize(400, 400);
    myImg.loadPixels();
}

function draw() {
    //randomize positions of pixels and get color from image
    var x = floor(random(myImg.width));
    var y = floor(random(myImg.height));
    fill(myImg.get(x, y));
    pixel(x, y);

    //also draw pixels following mouse movement
    fill(myImg.get(mouseX, mouseY));
    pixel(mouseX, mouseY);
}

function pixel(x, y) {
    //custom star pixel
    push();
    noStroke();
    translate(x, y);
    //add random scale and rotation to each pixel drawn
    scale(random(.15, 1.85));
    rotate(random(radians(-90, 90)));
    beginShape();
    vertex(0, -5.39);
    vertex(1.55, -2.26);
    vertex(5, -1.75);
    vertex(2.5, 0.68);
    vertex(3.09, 4.12);
    vertex(0, 2.5);
    vertex(-3.09, 4.12);
    vertex(-2.5, 0.68);
    vertex(-5, -1.75);
    vertex(-1.55, -2.26);
    endShape(CLOSE);
    pop();
}

function mousePressed() {
    //reset the canvas to random color
    background(color(random(255), random(255), random(255)));
}

For my project, I chose a photo that my friend took of me at an art gallery installation called “Paraiso” in New York City. The installation consisted of a room with mirrors and many strings of stars hanging from the ceiling. I enjoyed seeing this artwork and wanted to reflect the stars and range of colors in the photo in my portrait, so I practiced using custom shapes to create a star-shaped pixel. To make the portrait more dynamic, I made the pixels to be randomly scaled and rotated. I also coded it so that the star pixels are drawn following the user’s mouse position. When the user clicks on the canvas, it resets to a random color.

Project 09: Computational Portrait

HCP

//Hayoon Choi
//hayoonc
//Section C

let img;
var click = 0; //initial click status

function preload() {
    img = loadImage('https://i.imgur.com/5Ka0n6z.jpg?1');
}

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

function draw() {
    //pointilizing the picture
    let pointillize = map(mouseX, 0, width, 3, 7);
    let x = floor(random(img.width));
    let y = floor(random(img.height));
    let pix = img.get(x, y);
    fill(pix);
    if (click == 0){ //drawing pumpkin initially
        pumpkin(x, y, pointillize, pointillize);
    } else if (click == 1){ //drawing ghost after one click
        ghost(x, y, pointillize, pointillize);
    } else { //drawing bat after two clicks
        bat(x, y, pointillize, pointillize);
    }
}

function pumpkin(x, y){
    //drawing the pumpkin
    push();
    translate(x, y);
    rect(5, -10, 2, 6, 70);
    ellipse(12, 0, 5, 9);
    ellipse(0, 0, 5, 9)
    ellipse(3, 0, 5, 11);
    ellipse(9, 0, 5, 11);
    ellipse(6, 0, 5, 12);
    pop();
}
function ghost(x, y){
    //drawing the ghost
    push();
    translate(x, y);
    ellipse(0, 0, 9, 10);
    ellipse(-5, 3, 5, 2);
    ellipse(5, 3, 5, 2);
    beginShape();
    curveVertex(-4.5, 0);
    curveVertex(-4.5, 0);
    curveVertex(-3, 4);
    curveVertex(-1, 6);
    curveVertex(2, 9);
    curveVertex(6, 11);
    curveVertex(5, 8);
    curveVertex(4, 4);
    curveVertex(4.5, 0);
    curveVertex(4.5, 0);
    endShape();
    pop();
}
function bat(x, y){
    //drawing the bat
    push();
    translate(x, y);
    ellipse(0, 0, 7, 10);
    wing(); //calling the right wing
    push()
    scale(-1, 1); //flipping the wing to draw the left wing
    wing();
    pop();
    triangle(2, -3, 1.9, -6, 0, -4.6);
    triangle(-2, -3, -1.9, -6, 0, -4.6);
    pop();
}

function wing(){
    //drawing the wing
    beginShape();
    curveVertex(3, -2);
    curveVertex(3, -2);
    curveVertex(6, -2);
    curveVertex(11, -3);
    curveVertex(13, 0);
    curveVertex(11, 0);
    curveVertex(10, 0.3);
    curveVertex(10, 2);
    curveVertex(8, 1);
    curveVertex(6.7, 0.7);
    curveVertex(6, 2);
    curveVertex(5, 1);
    curveVertex(4.3, 0.7);
    curveVertex(3.6, 0.9);
    curveVertex(3, 2);
    curveVertex(3, 2);
    endShape();
}

function mousePressed() {
    //making the shapes to change after mouse click
    if (click == 2) { 
        click = 0;
    } else {
        click += 1;
    }
    if (mouseButton === RIGHT) { //right click restarts the process
        background(255);
    }
}

Since it’s Halloween, I decided to make all shapes Halloween related. The shapes change when the mouse clicks on the canvas and it restarts the process if the mouse right clicks.

Looking Outwards 09: on Looking Outwards

For this week, I looked at 101’s week 9 LO about computer graphics. He/she introduced me to the project Melting memories by Refik Anadol, which was displayed in Pilevneli Gallery from February 7 through March 17, 2018. In the post, he/she mentioned how it was interesting to see a project that intersects physical and digital reality, art, and neuroscience. I agree with that since, besides from its outstanding graphics, the fact that it showcased materiality of remembering captured my attention. I thought Anadol’s way of displaying advanced technology and the study of human memory was creative. The method of gathering data and implying it to the installation was also unique. For this project, participants were asked to focus on specific long-term memories during the recording process. Then the researchers looked at certain nodes with limited frequency rates and used them to drive noise parameters within the real time simulation.

Melting Memories

Peer link: https://courses.ideate.cmu.edu/15-104/f2020/2020/10/03/looking-outwards-05-3d-computer-graphics-5/

Project-09-Portrait

sketch

I chose the photo I took in LA. So, I decided it to draw and color with the text “LA” according to the mouse position, along with the pixels draw and color with the rectangle.

//Jae Son , Section C

var Jae;

function preload() { 
  var imageURL = "https://i.imgur.com/BGjhuqC.jpg";
  Jae = loadImage(imageURL);
}

function setup() {
  createCanvas(480, 480);
  background(255);
  frameRate(10000);
  Jae.loadPixels();  
  Jae.resize(480,480);
}

function draw() {
  
 var x = random(width);
 var y = random(height);
  
 var ix = constrain(floor(x), 0, width);
 var iy = constrain(floor(y), 0, height);
  
 var clr = Jae.get(x, y);
 var mouseclr = Jae.get(mouseX, mouseY);
  
//fill and color pixels with rectangle
 noStroke();
 fill(clr);
 rect(x,y,10,10);
  
//draw and color text "LA" at my mouse location
 fill(mouseclr);
 textSize(16);
 textStyle(BOLD);
 text("LA",mouseX,mouseY);
}