Project 09: Portrait

I really enjoyed this project and think this turned out cute. I especially like how the icons reinforce what the image is communicating (I really love fruit).

sketch
sketch after coloring with the mouse for a while
/*
    Joan Lee
    Section D

    This program draws a portrait of me GRIPPING my fruit with symbols that represent me loving fruit.
*/

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

function setup() {
    createCanvas(385, 480);
    joan.resize(width, height);
    background(255);
    joan.loadPixels();
}

function draw() {
    //want the image to be revealed where the mouse is
    var pixColor = joan.get(mouseX, mouseY);
    
    //revealing image of me GRIPPING fruit with icons that resemble fruit and my love for it
    noStroke();
    iLoveFruit = ["♥", "⊛", "❂"];

    for(var i = 0; i < 3; i ++) {
        fill(pixColor);
        textSize(random(1, 10));
        text(iLoveFruit[floor(random(iLoveFruit.length))], mouseX, mouseY);
    }
}

Looking Outwards 09: A Focus on Women and Non-binary Practitioners in Computational Art 

video of Delicate Boundaries by Chris Sugrue

I found Chris Sugrue’s Delicate Boundaries compelling because of its interactive and creative nature. Chris is an artist who specializes in interactive new media installations. She earned a Master’s of Fine Arts in Design and Technology from Parsons School of Design, and now is based in Paris, where she teaches at Parson’s campus there.

This piece allows users to watch as small bug-like creatures scuttle across a darkness, and come to life when hands touch the screen. The artist definitely knows how to make bugs look appealing; even though their movement and legs clearly indicate that they are creepy crawlers, their shapes are approachable and cute. I am curious as to why these critters were chosen to be the subjects of this project. It is remarkable how well the software is able to read the locations of hands, as well as the paths to follow along the arms, and I admire its blending of virtual and physical worlds (hence the title). Since it reacts to touch and is projected from above, I assume this effect is achieved through infrared/heat sensors.

Project 09

sketch
//Paul
//kengpul
//Section A

var img;
var newImg;

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

function setup() {
  createCanvas(300, 400);
    image(img,0,0,300,400);

    for (var y = 0; y < img.height; y++) {
    for (var x = 0; x < img.width; x++) {
      // Read the pixel's color
      var ogCol = img.get(x, y);

      //creates interesting effects with the color with inversion and similar ieffects
      var r = red(ogCol);
      var g = 210 - green(ogCol);
      var b = 255 - 90 - blue(ogCol);

      var newCol = color(r, g, b);

      // Set the new pixel's color
      img.set(x, y, newCol);
    }
  }
  img.updatePixels();
  
    image(img, 0, 0, width, height);
}

function draw() {
    noStroke();
    if(mouseIsPressed){
        randomPixels();
    }
  
}



function randomPixels(){ // creates random sized magnification 
  //of wherever the mouse is on while pressed scattered across the screen
    
    var newImg = img.get(mouseX,mouseY,random(30,70),random(30,70));
    img.updatePixels();

    image(newImg, random(-10,width), random(-10,height), random(10,20),random(10,20));
}

function keyPressed(){
    //when key pressed reset
    //when key pressed reset the small square samples created wit mouse click
  if(key == "r" || key == "R"){
      image(img,0,0,300,400);
      var r = 255 - 90 - red(ogCol);
      var g = 210 - green(ogCol);
      var b = blue(ogCol);
  }



///!!! the program takes a whille to load between each filters so it might take a few sec.





//filter a
    if(key == "A" || key == "a"){

    image(img,0,0,300,400);

    for (var y = 0; y < img.height; y++) {
    for (var x = 0; x < img.width; x++) {
      // Read the pixel's color
      var ogCol = img.get(x, y);

      //creates interesting effects with the color with inversion and similar ieffects
      var r = 255 - 90 - red(ogCol);
      var g = 210 - green(ogCol);
      var b = blue(ogCol);
      var newCol = color(r, g, b);

      // Set the new pixel's color
      img.set(x, y, newCol);
    }
  }
  img.updatePixels();
    image(img, 0, 0, width, height);
  //filter b
  }else if(key == "B" || key == "b"){
    //when key pressed reset
    //background(100);
    image(img,0,0,300,400);

     image(img,0,0,300,400);

    for (var y = 0; y < img.height; y++) {
    for (var x = 0; x < img.width; x++) {
      // Read the pixel's color
      var ogCol = img.get(x, y);

      //creates interesting effects with the color with inversion and similar ieffects
      var r = 255 - 90 - (ogCol);
      var g = 210 - green(ogCol);
      var b = blue(ogCol);
      var newCol = color(r, g, b);

      // Set the new pixel's color
      img.set(x, y, newCol);
    }
  }
  img.updatePixels();
    image(img, 0, 0, width, height);
  //filter C
  }else if(key == "C" || key == "c"){
    //when key pressed reset
    //background(100);
    image(img,0,0,300,400);

     image(img,0,0,300,400);

    for (var y = 0; y < img.height; y++) {
    for (var x = 0; x < img.width; x++) {
      // Read the pixel's color
      var ogCol = img.get(x, y);

      //creates interesting effects with the color with inversion and similar ieffects
      var r = 255 - red(ogCol);
      var g = 0- green(ogCol);
      var b = 50- blue(ogCol);
      var newCol = color(r, g, b);

      // Set the new pixel's color
      img.set(x, y, newCol);
    }
  }
  img.updatePixels();
  
    image(img, 0, 0, width, height);
  }


}






Looking Outwards 09

The artist I looked into was one Marina Zurkow, who I became interested in because I saw that she does interactive cartoons. I’ve always wanted to experiment with interactive cartoons, ever since I started becoming interested in animation. So it felt like a good fit.


Marina Zurkow is a media artist who likes delving into issues that are typically controversial and often have a sort of activist bent, but takes a wildly different approach. I couldn’t see where she went to school or anything, but she appears to have worked with a number of universities. She is based out of the United States.


The project of hers I focused on was the animation Mesocosm, which depicts a large man and a number of animals, people, and other paraphernalia all moving around. According to her website, it is an algorithmic work, meaning that “One hour of world time elapses in each minute of screen time, so that one year lasts 146 hours. No cycle is identical to the last, as the appearance and behavior of the human and non-human characters, as well as changes in the weather, are determined by a code using a simple probability equation” I found this fascinating, and it reminds me of the clock project I had worked on earlier this year. At certain parts of the animation the man does get eaten, (by birds, but only nibbles I think, not sure. No way to completely tell how far it gets) which is kinda graphic, but that’s okay its not horrid.

*NOTE, the animation requires Adobe Flash Player to view

Blog 09

This week’s blog, I studied the works of Laura Ramirez, aka Optika VJ. Her work explores a lot of the performative and aesthetic sides of live events like music concerts and festivals with more than 90,000 attending. She is very much about experimenting with projections and lighting effects in connection to spaces, public and private. What really interested me was her ability to create such a direct connection between computation and architecture, in a way that transforms facades and elevates ordinary spaces after dark. Moreover, her work engages the visuals on a level that becomes very “trippy” and creates a sense of elevation through a use of rhythmic patterns that I assume is combined with generative softwares that combines and creates intricate and eye-catching patterns. A great example of this is her project “EQUILIBRIUM” that was produced under one of her many labs that she has created under her brand, Optikal Ink Lab. Link to her website: http://optikalink.weebly.com/about.html 

LookingOutwards-09

The project Lauren developed is p5.js. I admire her development of p5.js, because we probably won’t be able to have this intro-level computing course without p5.js, which “prioritizes access and diversity in learning to code”. Beyond this class, the p5.js also provide a platform to help over 1.5 million other users on their way to learn codes.

Lauren is not only the creator of p5.js, but also an Associate Professor at UCLA Design Media Arts. Lauren got her MFA from UCLA and her BS Computer Science and BS Art and Design from MIT. Her main career is an artist, who examines social relationships on “surveillance, automation, and algorithmic living.”

More specifically, her work has focused on the influence of the internet and media on privacy. Many of her works have receive awards from different organizations. For example, her work “SOMEONE earn SOMEONE was awarded the Ars Electronica Golden Nica and the Japan Media Arts Social Impact Award. Her work LAUREN was awarded the IDFA DocLab Award for Immersive Non-Fiction.”

link to p5.js: home | p5.js (p5js.org)

Link to Biography Page:Info – Lauren Lee McCarthy (lauren-mccarthy.com)

Project 9 – Computational Portrait- Fish and Man

It was pretty challenging to come up with original ideas on what
can be creative for me , while we just using the color of pixels to
create a blurry version of original picture. After all, I decided
fishes are fun to draw, and if I can make them moving, I can generate
the picture very quickly as shown in the canvas.

It’s very laggy to view all the posts, so here is a picture:

Final Work
sketchDownload
/* Jiayi Chen
   jiayiche    Section A */
var head;
var fish = [] //array for fish
function preload(){//load the image
    head = loadImage('https://i.imgur.com/VAEIjHv.jpeg');
}

function setup() {
    createCanvas(480, 480); 
    imageMode(CENTER); //exist because I don't know if it's important
    head.loadPixels(); //load pixels
    background(220);
    head.resize(480,480); //resize head size to canvas size
}

function draw(){
    var x =floor(random(0,480));//a random x value
    var y =floor(random(0,480));//a random y value

    fish.push(makeFish(x,y)); //create more fishes

    for (var i = 0; i < fish.length; i++) { //draw all the fishes 
        fish[i].stepFunction();
        fish[i].drawFunction();
    }
    if(fish.length==1000){
        noLoop();
    }
}

function makeFish(fx,fy){
    var f = {x: fx, y: fy,
             stepFunction: stepFishes,
             drawFunction: drawFishes
         }
    return f;
}

//draw fishes according to pixel color
function drawFishes(){ 
    var o=this.x
    var p=this.y    
    push();
    noStroke();
    c= head.get(o,p)
    fill(c);
    ellipse(o,p,20,10);//body
    line(o-2,p-5,o-2,p+5);
    triangle(o+10,p,o+13,p+2,o+13,p-2)//tail
    eyeball(o,p);
    pop();

}


//fishes eye
 function eyeball(x,y){
    stroke('white')
    circle(x-5,y,1)
    ellipse(x-5,y,3,3)
 }

function stepFishes(){ //fishes moving
    this.x = this.x + random(-3,3)
    this.y = this.y + random(-3,3)
}

Blog 09

Heather Kelley is one of the five most powerful women in gaming and the most influential women in technology. She holds an MA from the University of Texas at Austin and is an Associate Teaching Professor at Carnegie Mellon University’s Entertainment Technology Center. Her works as Perfect Plum focus on under-explored aesthetic experiences and sensory interactions. 

In particular, I admire her creative expression and how she creates interactive pieces that relate to society and individuals. Specifically, I admire these aspects because they enhance the person’s experience and interaction with the work. To elaborate, I want to highlight her work in interaction design. Specifically, the “Tre Pas (Version Musicale),” creates an interactive piece where it can be described as an extremely long hopscotch as each series triggers an interactive musical composition. This is one of the many examples of her work where she cleverly creates a piece that is not only intriguing but also captures the individual’s attention by having them interact with it. 

Overall, Heather Kelley has an impressive background and I would highly recommend taking a look into the work she has done as it’s something work interacting with and experiencing. 

VR “first world puzzler” SUPERHYPERCUBE

Project 09

I wanted to create a portrait with my fav words and cute text faces! When the mouse is pressed, the pixel colors are in black and white.

Here is how it looks after some time.

sketch
// Sowang Kundeling Project 09 Section C

var img;
var imgbw;
var texts = ["( ͡° ͜ʖ ͡°)", "(づ。◕‿‿◕。)づ", "(◕‿◕✿)", "(ᵔᴥᵔ)", "♥‿♥", "~(˘▾˘~)", "ᕦ(ò_óˇ)ᕤ", "(。◕‿◕。)", "ʕ•ᴥ•ʔ", "corn", "taco", "cat"];

function preload(){
  //load image
  img = loadImage("https://i.imgur.com/1V17iyS.png");
  imgbw = loadImage("https://i.imgur.com/qedFJ3f.jpg")
  frameRate(10000);
}


function setup() {
    createCanvas(350, 350);
    //img.resize(450, 450);
    //imageMode(CENTER);
    //textMode(CENTER);
}


function draw() {
    //image(img, 0, 0, 400, 400);
    var x = random(img.width); // random coordinate for the pixel
    var y = random(img.height);

    var pixelColor = img.get(x*5, y*5); // pixel color
    var pixelColorbw = imgbw.get(x*5, y*5) // black and white pixel color
  
    if(mouseIsPressed) { // creates black and white pixels when mouse is pressed
      fill(pixelColorbw);
    }else {
      fill(pixelColor);
    }

    strokeWeight(random(5,20));
    textSize(random(5, 20));
    text(random(texts), x, y);
}

Looking Outwards 09

The artist Chloe Varelidi, usually creates games, toys, and unique products. She worked for different organizations for ten years before she founded a company called “humans who play”. Humans who play is a company who works with organizations on human-centric design. They aim to tackle problems and questions through design. Each of her projects uses different mediums to resolve the challenge. One of her projects is called Animal Badges. She created different badges that had different animals. The badges were given out to kids after they learned a new skill related to emotional learning. Each of the different animals represents a different skill like empathy, curiosity, perseverance, and compassion. I admire this project because it is helping kids learn more about their emotions. Education about emotions should be taught in school because it helps people understand what they are going through and feeling and communicate that to other people so others understand as well. It is one of the most important life skills that someone needs, not only to understand themselves better but to also interact with different people.  

https://varelidi.com/post/89194714461/animal-badges-a-sample-of-some-badges-i