Category: SectionD

Project 9 – Computational Portrait

For this project, I wanted to create Van Gogh’s self portrait with the text “Van Gogh.” By using custom pixels, I was able to make words appear on the canvas in relation to the pixel color of the original image. Wait a little bit to view the full portrait!

sketch
let img;

function preload() {
  //preloading the van gogh image
  img = loadImage("https://i.imgur.com/wUgkJwF.jpg");
}


function setup() {
  createCanvas(300, 400);
  imageMode(CENTER);
  background(0);
  img.loadPixels();

}

function draw() {
  //coverage of the words on the canvas
  let randomWords = random(0, 400);
  let randomWordstwo = random(0, 300);
  //placement of words in relation to the image width and height
  let x = floor(random(img.width));
  let y = floor(random(img.height));
  //pixel and text relationship
  let pixel = img.get(x, y);
  fill(pixel, 800);
  textSize(5);
  text('van gogh', x, y, randomWords, randomWordstwo);
 
}

Image Source: https://i.imgur.com/wUgkJwF.jpg

Original Image
Near-Beginning
Near-End

Project-09-Portrait

I used lines that are randomly horizontal and vertical, and stroke width and lengths that progressively get smaller as the frames approach 10000, increasing the resolution of the portrait. At the end, the text ‘fin’ is displayed to conclude the drawing of the portrait.

sketch

Start
Middle
Almost finished
Ending screen
let picture;
function preload() {
  picture = loadImage('https://i.imgur.com/3hKjmTL.jpg');
}

function setup() {
  createCanvas(480, 480);
  imageMode(CENTER);
  textAlign(CENTER);
  noStroke();
  background(0);
  picture.loadPixels();
  frameRate(60);
}

function draw() {
  //chooses random pixel coordinates
  let x = floor(random(picture.width));
  let y = floor(random(picture.height));
  //gets the pixel color
  let pixelcolor = picture.get(x,y);
  //sets whether the line is randomly vertical or horizontal
  let verticality=[true,false];
  let horiz=random(verticality);
  stroke(pixelcolor);
  //sets the stroke weight in relation to the frame count
  strokeWeight(map(10000-frameCount,10000,0,20,0));
  //horizontal lines
  if(horiz){
      line(random(x-((10000-frameCount)/200),x),y,random(x,x+((10000-frameCount)/200)),y);
  }
  //vertical lines
  else{
      line(x,random(y-((10000-frameCount)/200),y),x,random(y,y+((10000-frameCount)/200)));
  }
  //ends the program at 10000 frames with a 'fin' message
  if(frameCount>10000){
     fill(255);
      background(0);
      textSize(100);
      textFont('Georgia');
      textStyle(ITALIC);
      text('fin', 240, 240);
      noLoop();
  }
}

Project-09

sketch
//Jasmin Kim
//Section D

var img;
var emo= ["•ᴥ•", "☉_☉", "◕‿‿◕", "｡◕‿◕｡", "✿◠‿◠"];

function preload() {
    var myURL = "https://i.imgur.com/gS9jRCI.jpg";
    img = loadImage(myURL);

}
function setup() {
    createCanvas(480, 480);
    background(0);
    img.loadPixels();
    img.resize(480,480);
    frameRate(200);
}

function draw() {
    // pixels appear
    var px = random(width);
    var py = random(height);
    var xx = constrain(floor(px), 0, width);
    var yy = constrain(floor(py), 0, height);
    var base = img.get(xx, yy);
    //emoji drawn
    fill(base);
    var ee = int(random(0,9));
    var rrandom = emo[ee]; 
    textSize(5)
    text(rrandom, px,py);
    //shape drawn
    noStroke();
    ellipse(px, py, random(0, 8), random(0, 8));
    rect(px, py, random(0, 10), random(0, 10));

}
  • 1
  • 2
  • 3
  • 4
  • 5
  • Original Picture

For this project, I wanted to make something where emojis and shapes can be created at the same time. Rectangles and circles are random sized and emojis are selected from the emo arrays.

Looking Outwards-09

I looked at Hayoon’s Looking Outwards 07: information Visualization post on Jonathan Harris’ work “We feel fine”. I think the work is very well presented and visually stunning, but I question the artistic decision for how the algorithm attributes emotions to the text strings. I think more nuanced aspects of speech inflection (like sarcasm) and other semantics are lost when converted to text, especially in different contexts. I think Hayoon does a good job of addressing the complexity of the topic and admiring the creators’ sensibilities. I think she could’ve gone more into speculating the algorithmic or functional aspects of the project, but she captures and describes the project and the artistic influences well.

Looking Outwards 07: Information Visualization

“We feel fine” by Jonathan Harris, 2009, c/o Seth Kamvar
http://number27.org/wffbook

My Portrait

I wanted to create a portrait that used random points from the canvas to generate the image, while being modified by the cursor position.

sketch
let img;
let thin, thick;

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

function setup() {
  createCanvas(536, 600);
  thin = 5;
  thick = 45;
  imageMode(CENTER);
  noStroke();
  background(255);
  img.loadPixels();
}

function draw() {
  //Maps mouseX and mouseY to 5 and 45 to scale both dimensions of the rectangle
  let sizeX = map(mouseX, 0, width, thin, thick);
  let sizeY = map(mouseY, 0, height, thin, thick)
  //Picks random points from the image and stores them in x and y
  let x = floor(random(img.width));
  let y = floor(random(img.height));
  //Gets the exact pixel
  let pixel = img.get(x, y);
  //Draws rectangle according to randomly chosen position
  //and cursor position
  fill(pixel, 128);
  rect(x, y, sizeX, sizeY);
}

LO 09 – On Looking Outwards

All Streets Limited (2007) by Ben Fry

In Bon’s Looking Outwards on Data Visualization, he examined All Streets Limited by Ben Fry. Fry used data from the U.S. Census Bureau to code the map in Javascript, which consists of 240 million individual road segments across the United States. He applied the Albers equal-area conic projection to obtain the longitude and latitude coordinates of the streets. I agree with Bon that the illustration provides a macro view of our national interconnectedness. After doing my own research, I also found it interesting that the map contains no other terrain (canyons, rivers, mountains, etc.), yet we can still see the shapes of these natural forms emerge as roads weave and navigate around, demonstrating the power dynamics between the natural and artificial/industrial. 

Ben Fry’s All Streets Limited.
Closeup of the roadless terrain that forms the Appalachian Mountains.

Project 09 – Portrait of my Brother

For my portrait I chose to draw my little brother. I had him choose his favorite images from a set of keyboard symbols. The random symbols increase in size as the mouse moves to the right. Symbols also draw along with mouse movement. If you click the mouse, the canvas wipes white and resets.

Maggie – Portrait
//Maggie Ma
//Section D
//Self-Portrait

let img;
let symbols=["☻","☺","♬","☾","⍣","㋡","☀","♟"]; //array of symbols

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

}

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

function draw() {
  let x = floor(random(img.width)); //x position of symbols
  let y = floor(random(img.height)); //y position of symbols
  let pixels = img.get(x, y); //grab pixels from image

  //randomly select symbols from array
  var r = int(random(0,9));
  var randompicker = symbols[r]; 


  fill(pixels); //fill symbol with proper pixel color
  //prevent symbols from getting too large
  //symbols increase in size as mouse moves to right
  textSize(mouseX/20); 
  text(randompicker, x,y);

  //draw symbols as mouse moves
  textSize(10);
  text(randompicker, mouseX, mouseY);

  //refresh to white canvas when mouse is pressed
  if (mouseIsPressed) {
  	background(255);
  }
}
Beginning of Rendering.
Middle of Rendering.
Near-completed Render.
Original of my adorable brother.

LO 8

Sara Hendren is an artist, researcher, and professor based in Cambridge, Massachussetsin Colledge of Engineering. She is a self-described “humanist in tech” who focuses on the human body and the politics of disability.
My interest in Hendren was spark because of my current studies in design; the major requires us to take design theory/research classes that include design for equity and inclusivity. Design for disability is something that has been discussed in passing and seeing Hendren’s work focused on research and design for disability is a wonderful way to see disability-focused work outside of the classroom.
I particularly enjoyed seeing her project on dancing wheelchair ramps, a project constructing a series of ramps into a stage for Alice Sheppard to dance on. The project was worked on in collaboration with a physics class to study and work with the ramp’s affordances for choreography.
Sara’s presentation takes us not from an idea to a finished product, but the opposite, showing us the final project, and slowly working backward to its inception.

08_LO_creativePractice

For this week’s topic, I watched the talk of Christina “Phazero”Curlee about “ from Video Art to Video Game”.
Christina is from a self-taught traditional fine art background and put her interest in art, interaction, game design and programming. She blends different principles of game and art in order to find her own vision in game style. Her work heavily demonstrates symbol and non-verbal experiences.
The purposes of her art mainly focus on communicating with people and facilitate interactions. During her art journey, she tried many things, like painting, installation art, photography, video art and video games.
The way I admire her is about her way to treat her anxiety, depression and stress. She uses video games as a way to communicate with others and she describes game design as setting a room and welcoming people to start a conversation.
She uses video game or video game media to discuss some serious topics which are hard to describe in some other situations, like multisensory interactive experiences, space and human bilateral influences, etc.
Even during the recent day, the game industry, especially the indie game area, has witnessed huge change and improvement. A lot of people still tend to think video games are undesirable things for humans, especially for kids. I would like to see more artists to use video game as a tool to prompt active communication and use the trait of video games in a positive way to inspire other people.

Eyeo 2019 – Christina Phazero Curlee from Eyeo Festival on Vimeo.

LO-08

I watched the video of Lauren McCarthy, a Los Angeles artist who explores ideas around social relationships, surveillance, and the rapidly changing technological field that is our modern world. She has created numerous art pieces looking into the intricate and ever developing relationship between social and technological systems.

What interested me most about Lauren’s talk is her exploration into the constant surveillance that modern citizens live with. Through her projects, she begins to ask questions about how changing technology has affected what it means to be “followed” or “watched.” My favorite work that she talked about was called “Follower,” and it was a conceptual “social media” app in which the user signs up to be silently and invisibly followed for a full day. This piece explores the relationship we have with technology by using an analogy with romantic human relationships, bringing to the surface the root of the conflicting comfort and discomfort we feel as we play the role of an actor in an everyday performance.