Month: October 2021

Project-09: Computational Portrait (Custom Pixel)

sketchDownload
/*Name:Camellia(Siyun) Wang; 
Section: C; 
Email Address: siyunw@andrew.cmu.edu;*/

https://imgur.com/qOtkTrJ
var img;
var i = 0;
var a = 0;

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

function setup(){
    createCanvas(380, 480);
    background(0);
    img.resize(380, 480);//resize the image to fit into canvas
    img.loadPixels();
}
//based on the example code
/*function draw(){
    var sw = map(mouseX, 0, width, 1, 5);//
    var x = random(img.width); //randomly select pixels of the image
    var y = random(img.height);
    var pointColor = img.get(x, y); //select the color of the chosen pixel
    stroke(pointColor); 
    strokeWeight(sw);
    line(x,y,x+5,y);
}*/

//based on the simple nested loop logic
/*function draw(){
    var i = random ()
    pointColor = img.get(i, a);
    noStroke();
    fill(pointColor);
    ellipse(i,a,random(1,5),random(3,7));
    i += 5;
    if(i >= 380){
        a += 5;
        i = 0;
    }
}*/

//based on spiral motion
var angle = 0;
var radius = 0;
var r = 6.2; 

function draw() {
    var center_x = width / 2;
    var center_y = height / 2;
    var x = radius *cos(radians(angle));
    var y = radius *sin(radians(angle));
    pointColor = img.get(width/ 2+x, height/2+y);
    //pick color of the chosen pixel from the center of the image 
    //picking in spiral motion which corresponds to the sipral motion of the drawn ellipses
    push();
    //translate the canvas to draw the spiral from the center outwards
    translate(center_x, center_y);
    noStroke();
    fill(pointColor);
    circle(x, y, r);
    radius += 0.1;
    angle += 5;
    r += 0.01;
    pop();
}

I started this project with duplicating the example code, then I used the nested loop logic to do the second trial. However, the way this portrait was drawn did not seem interesting enough, since there’s no change in motion and each drawn square. Therefore, I changed the drawing logic to the spiral motion. In this way, the portrait is drawn from the center in gradually amplifying ellipses, so that the final piece has a clearer shape of face in the center and blurry periphery.

First Trial-Duplicated Version
Second Trial-Nested Loop
Final Piece-Spiral Version

project-09

sketch
function preload() {
    var myImage="https://i.imgur.com/0PVv59G.jpeg";
    loadedImage=loadImage(myImage);    
}

function setup() {
  createCanvas(400,400);
  background(0);
  loadedImage.resize(400,400);   
  loadedImage.loadPixels();
  frameRate(100000000000000000000000000000000000000000000000000000000000);
}

function draw() {
  var x=random(width);
  var y=random(height);
  var pixelx=constrain(floor(x),0,width);
  var pixely=constrain(floor(y),0,height);
  var pixelcolor=loadedImage.get(pixelx,pixely);    
  noStroke();
  fill(pixelcolor);    

  square(x,y,random(0,5));    


}

LO-09

I chose to look at Camille Utterback, who focuses on interactive artworks and permanent public installations, I focused on the project Precarious

Precarious was created for the National Portrait Gallery exhibition Black Out: Silhouettes Then and Now, which opened in May, 2018. Precarious is an interactive installation that extends the historical practice of tracing human silhouettes with a mechanical apparatus on a backlit screen, by instead “tracing” gallery visitors with contemporary digital tools. Utterback uses a ceiling mounted depth camera to record peoples’ silhouettes as seen from above. Her software then continually interprets and redraws this data, rendering the silhouettes not with the stark fixedness of paper cut outs, but as tremulous outlines of bodies moving through time. The painterly aesthetic of Precarious builds on the algorithmically generated visual language which Utterback has refined over many years via her custom coded interactive drawing systems.

In the Precarious system, silhouettes are never fixed. As Utterback’s software draws peoples’ outlines, each line is translated into a series of points. The points are programmed to exert an animating force on the other points, which generates ongoing momentum in the continually redrawn forms.

Precarious

Project 9: Portrait

wpf-portraits.js
//Patrick Fisher, Section B, wpf@andrew.cmu.edu Assignment -09-project
let img;
let drawState = 0; //variable to change the type of drawing that is happeing
let x2 = 5; //startin x variable for the bouncing drawing
let y2 = 5; //startin y variable for the bouncing drawing
let r2 = 5; //startin radius variable for the bouncing drawing
let dx2; //delta for x for bouncing drawing
let dy2; //delta for y for bouncing drawing
var ly1; //first end of the line for the line drawing
var ly2; //second end of the line for line drawing
var lx; //mid x point of the line for line drawing

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

function setup() {
    createCanvas(480, 480);
    img.resize(480,480); //fits image to canvas
    imageMode(CENTER);
    noStroke();
    background(255);
    img.loadPixels();
    dx2 = floor(random(1,10)); //sets delta x
    dy2 = floor(random(1,10)); //sets delta y
    while(dy2 == dx2){ //makes sure the deltas are not the same
        dy2 = floor(random(1,10));
    }
    ly1 = random(0,height); //sets the random line locations
    ly2 = random(0,height);
    lx = random(50,width-50); 
}
function draw() {
    if(drawState == 0){ //line drawings
        push();
        strokeWeight(4);
        let pix = img.get(lx,(ly1+ly2)/2);
        stroke(pix,128);
        line(lx-50,ly1,lx+50,ly2);
        ly1 = random(0,height);
        ly2 = random(0,height);
        lx = random(50,width-50);
        pop();
    }
    if(drawState == 1){ //bouncing drawing
        let pix = img.get(x2,y2);
        fill(pix,128);
        circle(x2,y2,2*r2);
        x2 += dx2;
        y2 += dy2;

        if(x2 >= width){
            dx2 = -dx2;
        }
        if(y2 >= height){
            dy2 = -dy2;
        }

        if(x2 <= 0){
            dx2 = -dx2;
        }
        if(y2 <= 0){
            dy2 = -dy2;
        }

    }
    if(drawState == 2){ //  square loop drawing
        var xy3 = mouseX/10;
        var rcnum = height/(xy3+1); //variable for the width of the square based on how many squares there are
        background(255);
        for(var col = 0; col <=xy3; col++){
            for(var row = 0; row <= xy3; row++){
                let pix = img.get((row*(rcnum))+(rcnum)/2,(col*(rcnum))+(rcnum)/2);
                fill(pix,128);
                square(row*(rcnum),col*(rcnum),(rcnum));
            }
        }
    }

}

function mousePressed (){ //changes the drawing with a press of the mouse
    if(drawState == 0) {
        background(255);
        drawState = 1;
    }
    else if(drawState == 1){
        background(255);
        drawState = 2;
    }
    else if(drawState == 2){
        background(255);
        drawState = 0;
    }
}

This project was a lot of fun. I had fun coming up with different ideas of how the photo could be revealed and while not simple, the coding process was rewardingly not strenous. I did have a lot of difficulty with imgur and p5.js trusting my image at first, including a few people commenting mean things, which was annoying.

Looking Outwards 9

The this weeks focus on women and non-binary people in tech, I am looking at the work of Adrien Segal, specifically her series on Wildfire Progression. What I really like about it, and about all Segal’s work, is that her art says something as well as just being a beautiful thing. Her Wildfire progression series is meant to share details on how destructive the California wildfires have been. The pieces seem abstract but they are actually modeled using the data of where and how a notable wildfire grew. It’s haunting seeing these and understanding they are representations of thousands of acres burned, countless lives ruined, displaced, or even some sadly lost. Adrien herself is from Oakland, California so this work in particular is very close to home. She studied at the California College of Arts and is now currently a teacher there as well. Her other activist related art includes pieces on water rights and the polar ice caps.

Adrien Segal, Wildfire Progression

Project 9: Computational Portrait (Custom Pixel)

sketchDownload
var babyImg;
var adj;

function preload() {
  babyImg = loadImage("https://i.imgur.com/9bQND1O.jpg"); 
  adj = ["cute", "baby", "adorable", "sweet", "lovely", "endearing", "tiny", "cutesy", "kawaii"];
  print(adj); //adjectives that describe the baby
}

function setup() {
  createCanvas(480, 480);
  babyImg.resize(480, 480); //resize the scale of the image to fit the canvas
  background(0);
  imageMode(CENTER); //positioning the image as center
  babyImg.loadPixels(); //loading the adjectives of the baby image
}

function draw() {
  var px = floor(random(babyImg.width)); //randomly select pixels of the image
  var py = floor(random(babyImg.height));
  var pc = babyImg.get(px, py); //bring the color of the chosen pixel
  fill(pc, 255); 
  textSize(12);
  textFont('Georgia');
  text(adj[Math.floor((Math.random()*adj.length))], px, py);
}
Baby image before and after

While exploring through Imgur in search of images, I found an adorable photo of a smiling baby and I was able to come up with many different adjectives (e.g. cute, adorable, sweet, lovely, etc.) when I first saw this baby. I decided to apply this thought to the project by using the words to render and display this image. It was absolutely delightful watching the rendering process of this cute baby image.

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

An interactive installation, Computer Orchestra, was first composed by Fragment.in, which is a Switzerland-based artist collective of Laura Nieder, David Colombini, and Marc Dubois. This crowdsourcing platform enables the audience to participate and lead their own orchestra by either uploading their own or downloading music samples to incorporate into the arrangement with the computers. People can simply use their hand gestures to direct and conduct the orchestra. I was really fascinated by how the Kinect motion controller detects the body movements of the conductor and transfers information to Processing through SimpleOpenNI library, where these signals are delivered to the remaining computers with the help of wifi. I think this style of generating art is really creative as it uses each assigned samples to further create an aesthetic visual feedback obtained from the generated sounds. I absolutely admire how this project enriches the experience of the user in both auditory and visual manners. Fragment.in’s artistic sensibilities significantly arises for offering the sense to the audience of being able to take control of the digital technology within one’s hands.

Reference: https://computer-orchestra.com/

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

Filipa Valente is an exhibit designer and architect who specializes I the development of designs for experiences, exhibits, and architecture. She has a background in architecture and a practice as a media artist. I think that her work on mobility is particularly intriguing. Mobility is a field that has a lot of potential with innovative design. I’m really interested in how mobility plays a role into redefining spatial design.

FI_02_(fabric images).jpg
Volvo Pure Tensions Pavilion

I was fascinated by Filipa Valente’s “The Pure Tension Pavilion” for Volvo Italia. This project is a design of a portable charger for the new Volvo V6 plug-in hybrid electric car which not only charges the car but also flat-packs to fit in the trunk of the car and assembles in less than one hour. It is also very aesthetically pleasing with its organic design, also serving as a structure that roofs the vehicle.

Project 09: Computational Portrait

First reading the instructions for this project, I was reminded of mosaic effect on images.

I proceeded to work with square pixels, but I realized that using a rounded shape like an ellipse could create a more organic jittery effect on my animated portrait.

sketch
var p = 1000;
var particles = [];

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

function setup() {
  createCanvas(480, 480);
  pixelDensity(5);
 
  for (var i = 0; i < p; i++) {
    particles[i] = new squareParticle(240, 240); //appending new square paricles to the array that will draw the shapes
  }
}

function draw() {
 
  for (var i = 0; i < particles.length; i++) {
    particles[i].update();
    particles[i].show();
  }
}


function squareParticle(x, y) { 
  this.x = x;
  this.y = y;
  this.r = random(1, 5); //range of particle size

  this.update = function() { 
    this.x += random(-3, 3);
    this.y += random(-3, 3);

    this.x = constrain(this.x, 0, width);
    this.y = constrain(this.y, 0, height);
  };

  this.show = function() {
    stroke(250);
    strokeWeight(0.1);
    var c = img.get(this.x, this.y);
    fill(c); 
    ellipse(this.x, this.y, this.r, this.r+3);
  

  }
}

Project 9

sketch

var img;

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

function setup() {
    img.resize(img.width/7, img.height/7);
    createCanvas(img.width, img.height);
    smallPoint = 4;
    largePoint = 10;
    //imageMode(CENTER);
    noStroke();
    img.loadPixels();
    textAlign(CENTER);
    text("CLICK TO CHANGE COLOR",width / 2,height / 2)

}

function draw() {
    //fill with heart
    let pointillize = map(mouseX, 0, width, smallPoint, largePoint);
    let x = floor(random(img.width));
    let y = floor(random(img.height));
    let pix = img.get(x, y);
    fill(pix, 10);
    heart(x, y, pointillize, pointillize);
    var cols = img.get(mouseX, mouseY);

    //fun text fills image according to mouse
    fill(cols);
    textStyle(BOLD);
    textSize(20);
    text("YA", mouseX, mouseY);
}

function heart(x, y, size) {
  //custom shape
  beginShape();
  vertex(x, y);
  bezierVertex(x - size / 2, y - size / 2, x - size, y + size / 3, x, y + size);
  bezierVertex(x + size, y + size / 3, x + size / 2, y - size / 2, x, y);
  endShape(CLOSE);
}

function mousePressed() {
    //background color changes
    background(color(random(255), random(255), random(255)));
}

Once I figured out how to make this project more creative, it was more fun to create. The text that follows the mouse to fill in the image was fun to play around with.