Computational Portrait

sketchDownload
let img;
let min, max;

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

function setup() {
  createCanvas(480, 480);
  min = 4;
  max = 40;
  imageMode(CENTER);
  noStroke();
  background(255);
  img.loadPixels();
}

function draw() {
  let randomVal = map(random()*300, 0, width, min, max);
  let x = floor(random(img.width));
  let y = floor(random(img.height));
  let pix = img.get(x, y);
  fill(pix, 128);
  triangle(x, y, x+randomVal, y, x+randomVal/2, y+randomVal);
}

My art creates randomly sized triangles that match the colors of pixels in an image. They are continuously drawn, and you can eventually see the face that is being created. I chose a picture of a redhead on imgur because I thought it would be fun to see his bright hair.

Women and Non-binary people in art

Chloe Varelidi makes what she calls “unusual games” and other products. Her career began when she got a Master in Fine Arts at Parsons’ Design and Technology Program. She worked with littleBits for many years, and their team won Creative Toy of the Year 2018. Varelidi designs interesting pieces often used for educational purposes or as toys for children. She worked with Mozilla for a while, and was also a game design director. In these various roles she has created numerous projects while collaborating with different teams. She recently founded humans who play, a design company which uses play as a force for doing good. I like her quirky and creative style and how she uses it to connect with her audience. She clearly enjoys her work and feels like it is making a difference. I also love how she can work with many groups to make cool projects.

https://varelidi.com/

Animal Badges A sample of some badges I illustrated for a social emotional learning product for youth at Mozilla. Each animal corresponds to a skill such as empathy, curiosity, perseverance and compassion.
One of Varelidi’s pieces: animal badges for a learning project

Project-09: Computational Portrait (Custom Pixel)

My Project

//Chuong Truong;
//Section B;

//global variable that holds a picture of my face;
var myFace;

//the preload function loads in my face from imgur;
function preload(){
    myFace = loadImage("https://i.imgur.com/Dd41LFT.jpg");
}

function setup() {
    createCanvas(480, 480);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
    rectMode(CENTER);
}

function draw() {
    //makes the background from pixels of the upper left part of my picture;
    for (var i = 0; i < 240; i+= 10){
        for (var j = 0; j < 240; j+= 10){
            var sectionPiece = myFace.get(i, j, 20, 20);
            image(sectionPiece, i*2, j*2, 20, 20);
        }
    }

    //lines that connect to make a grid;
    noFill();
    strokeWeight(2);
    ellipse(240, 240, 360, 360);
    stroke(random(256), random(256), random(256));
    line(0, 240, 480, 240);
    line(240, 0, 240, 480);
    for (var m = 60; m < 400; m += 20){
        stroke(random(256), random(256), random(256));
        line(m, 120, m, 360);
    }
    for (var o = 60; o < 480; o += 30){
        stroke(random(256), random(256), random(256));
        line(60, o, 420, o);
    }
    //random outlines of rectangles and circles;
    for (var h = 0; h < 100; h ++){
        stroke(random(256), random(256), random(256));
        rect(random(20, 460), random(20, 460), 20, 20);
        ellipse(random(20, 460), random(20, 460), random(5, 25), random(5, 25));
    }
    //creates the left to right diaganol sections of my picture;
    for (var l = 0; l < 1680; l += 240) {
        push();
            scale(0.25);
            var sectionPiece2 = myFace.get(l, l, 240, 240);
            image(sectionPiece2, l, l, 240, 240);
        pop();
    }
    //creates the right to left diaganol sections of my picture;
    for (var n = 1680; n > 0; n -= 240){
        push();
            scale(0.25);
            var sectionPiece3 = myFace.get(0 + n, 1680 - n, 240, 240);
            image(sectionPiece3, 0 + n, 1680 - n, 240, 240);
        pop();
    }
    noLoop();
}

For this project, I went with something simple (and hopefully acceptable). I am not that creative.

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

Picture of Anne Spalter from her website

For this Week’s LO, I will talk about Anne Morgan Spalter, a mixed-media artist that often works with AI, and her installation “Iteration.”


Spalter is known for founding the digital fine art courses at Brown University, as well as those at the Rhode Island School of Design. She originally studied math at Brown but then got her Master of Fine Art at Rhode Island School of Design. Currently, she is working on NFTs.

This image has an empty alt attribute; its file name is someOfSpalterWork.jpg
Anne’s work, “Iteration”

“Iteration” was created using two image sets, one of Spalter’s own original work and one of random airplane images. She used an algorithm to transform pictures from the first set to that of the second set piece by piece. That is to say that pictures of the first became and more and more like the second each time. She then chose specific “iterations” and painted them with oil.

A closer up view of one of the pieces in the installation.

I admire that it blended both a human and a digital touch to the final product. I also like how it looks overall; each artwork made from the process is interesting. Overall, this piece is now what I think of when I think of algorithmic computer art.


Here is the link to her website, bio, and this specific work.

Project 09: Computational Portrait

sketchDownload
// This program deconstructs an image and then reconstructs it in a new way.
// The image is sliced into pieces and then drawn together in a new order
// Horizontally and vertically

var img;
var lineHeight = [];
var lineWidth = [];
var numSlices = 6;   //must be even

// slices are ordered and grouped into 4 arrays
var imgSlices1 = [];
var imgSlices2 = [];
var imgSlices3 = [];
var imgSlices4 = [];

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

function setup() {
    createCanvas(480, 480);
    imageMode(CENTER);
    noStroke();
    img.loadPixels();

    // get x and y values for the slices based on canvas size and number of slices
    for (var i=0; i<numSlices; i++) {
        let h = height/(numSlices+1);
        let h1 = height/numSlices;
        let w = width/(numSlices+1);
        let w1 = width/numSlices;
        lineHeight[i] = h1*i + h1/2;
        lineWidth[i] = w1*i + w1/2;
        // rearrange image pieces based on odd or even and fill arrays
        if (i%2==0) {
          imgSlices2.push(img.get(0, lineHeight[i], width/2, h));
          imgSlices4.push(img.get(lineWidth[i], 0, w, height));
        }
        else {
          imgSlices1.push(img.get(0, lineHeight[i], width/2, h));
          imgSlices3.push(img.get(lineWidth[i], 0, w, height));
        }
    }
}

function draw() {
    //there is some background that shows ecpecially with small numSlices values
    // this sets background to match original image
    var bgrnd = img.get(random(width), random(height));
    background(bgrnd);

    //draw image in new order
    for (var i=0; i<numSlices/2; i++) {
        image(imgSlices1[i], width/4, lineHeight[i]*2);
        image(imgSlices2[i], 3*width/4, lineHeight[i]*2);
        image(imgSlices3[i], lineWidth[i], height/2);
        image(imgSlices4[i], lineWidth[i]+width/2, height/2);
    }
    noLoop();
}

Based on what I’ve seen classmates post, I am not sure I did this project correctly. I am really happy with my outcome, though, and it is close to what I visualized before I started writing any code. When I read the prompt for this assignment, I was inspired by I video I had seen of an artist cutting up pictures and then putting them back together in strange ways that added new perspective and dimension. With this in mind, I decided to cut up the image and then layer it on top of itself in new ways. Technically, the image is displayed twice, but not the same way either time. With a quick change of code you can see how the portrait is drawn with more or fewer ‘slices’.

numSlices = 4
numSlices = 6
numSlices = 10
numSlices = 30

Generative Portrait

sketchDownload

 //Yanina Shavialena
 //Section B

//My portrait
var image;
//Places I've been/Want to go to
var words = ['Belarus','USA','Bulgaria','Poland','Spain','France','South Korea'];
//The state of mouse pressed
let pressedState = false;

//This function loads the image
function preload() {
    var imagelink= "https://i.imgur.com/CQ38vbw.jpg";
    image = loadImage(imagelink);
}
 
//This function created canvas and makes sure the picture is in dimensions of the canvas
function setup() {
    createCanvas(480, 480);
    image.resize(480, 480); 
    background(0);
    image.loadPixels();
    frameRate(10000000);
}
 
function draw() {
    //random x and y positions and get the color from that x and y from my portrait
    var x = random(width);
    var y = random(height);
    var c = image.get(x, y);

    if( pressedState == false){
        //random start controlling point
        var x1 = x + random(-25,25);
        var y1 = y + random(-25,25);
        //random final point
        var x3 = x + random(-15,15);
        var y3 = y + random(-15,15);
        //random final controlling point
        var x4 = x3 + random(-25,25);
        var y4 = y3 + random(-25,25);

        stroke(color(c));
        curve(x1, y1, x, y, x3, y3, x4, y4);

        //hearts at the beginning and final point
        heart(x,y,5,c);
        heart(x3,y3,5,c);
    }

    //puts words at random points
    else{
        noStroke();
        fill(c);
        textSize(random(10));
        text(random(words),x,y)
    }
}

//when mouse is pressed, mouseState is updated and the background is reset
function mousePressed(){
    if(pressedState == false) {
        pressedState = true;
    }
    else {
        pressedState = false;
    }
    background(0);
}

//creates hearts to use for the ends of the lines
function heart(x, y, size, color) {
    fill(color);
    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);
}

I really enjoyed this project because I could finally implement the idea of pixels and creativity. It was hard to come up with something at first but then I thought about what could describe me in my portrait so I decided to use an emoji of a heart because I think love is one of the strongest feelings on Earth and after the click of a mouse multiple countries would pop up randomly to make up an image: one of the countries is where I was born, one of the countries is where I live right now, then the remaining countries are where I visited or where I want to visit.

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

The artist I’ve chosen to write about this week is the amazing electronic music and effects composer, Suzanne Ciani. Beginning at the age of 22, Ciani has wom awards throughout her life for her musicianship, creativity, leadership, and contribution to the electronic music industry. She is the subject of a documentary that was filmed in 2014 to highlight her life and uniquely successful music career. As one of very few women in the music technology major here at CMU, I feel very inspired personally by Suzanne Ciani and I look up to her as a role model. Her design and production of the soundtrack to Greg Kmiec’s Xenon pinball machine is considered a significant milestone in game design history. With the use of new technology (in 1980), Ciani created a composition of interesting and catchy music that reacted directly to gameplay. This added a completely new layer to the game by providing a complex sensory experience that interacted directly with the person playing. I love this concept, and I am excited to try and implement this idea into some of my own projects.

Xenon by Suzanne Ciani, 1980

Suzanne’s website

Project 09 – Portrait

sketch
//Brandon Yi
//btyi@andrew.cmu.edu
//Section A


//Initialization
var img;
var counter = 0;

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


function setup() {
  img.resize(img.width/5, img.height/5); //Resizing image
  createCanvas(img.width, img.height); //Canvas size based on image size
  imageMode(CENTER);
  rectMode(CENTER);
  textAlign(CENTER);
  noStroke();
  background(255);
  img.loadPixels(); 
}

//drawing shapes based on mouse position to imitate loaded image
function draw() {
  if (counter == 0) {
    settingNumber();
    var pointcolor = img.get(mouseX, mouseY); //point color based on mouse position and image
    fill(pointcolor);
    rect(mouseX, mouseY, 15, 15); //draw rectangle in mouse position
  }
  else if (counter == 1) {
    settingNumber();
    var pointcolor = img.get(mouseX, mouseY);
    fill(pointcolor);
    ellipse(mouseX, mouseY, 15, 15); //draw circle in mouse position
  }
  else if (counter == 2) {
    settingNumber();
    var pointcolor = img.get(mouseX, mouseY);
    fill(pointcolor);
    rect(mouseX, mouseY, 30, 30);
  }
  else if (counter == 3) {
    settingNumber();
    var pointcolor = img.get(mouseX, mouseY);
    fill(pointcolor);
    ellipse(mouseX, mouseY, 30, 30);
  }
  else {
    settingNumber();
    var pointcolor = img.get(mouseX, mouseY);
    fill(pointcolor);
    rect(mouseX, mouseY, 50, 50);
  }
  
}

//Changing setting number and resetting canvas
function mousePressed() {
  counter++;
  counter = counter % 5;
  print(counter);
  background(255);
}

//Setting number in label
function settingNumber() {
    textSize(30);
    fill(0);
    rect(350, 590, 150, 50)
    fill(255);
    text("Setting " + (counter+1), 350, 600);
}

Project 09: Computational Portrait

sketch

//Julianna Bolivar
//jbolivar@andrew.cmu.edu
//Section D
//Computational Portrait

var img;

function preload(){
  //load image
  img = loadImage("https://i.imgur.com/eaETdlz.png");
  frameRate(10);
}


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


function draw() {
    image(img, 0, 0, 400, 400);
    for(var row = 0; row <= 200; row++) {
        for(var col = 0; col <= 200; col++){
            var x = col * 5;
            var y = row * 5;
            //pixels
            var pixelColor = img.get(x*5, y*5);
            noStroke();
            fill(pixelColor);
            //draw circle
            circle(x + 30, y + 50, 5); 
        }
    }
}

I didn’t expect my frame in frame pixels to create a distorted effect, but I really like how it looks. The spaces in between the circles allow you to see some of the original image underneath.

Project 09: Computational Portrait

portrait
var img;

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

function setup() {
    createCanvas(300, 300);
    frameRate(60);
    noStroke();
    img.resize(width, height);
    img.loadPixels();
}

function draw() {
    fill(0);
    text("keep mouse pressed for different effect", 50, 10);

    if(mouseIsPressed) { // while mouse is pressed, generate random squares 
        let pix_x = floor(random(img.width));
        let pix_y = floor(random(img.height));
        let pix = img.get(pix_x, pix_y);
        fill(pix);
        var square_x = random(width);
        var square_y = random(height);
        let mapX = map(mouseX, 0, width, 0, 20);
        square(square_x, square_y, mapX);
    } else { // otherwise, use circles 
        let x = floor(random(img.width));
        let y = floor(random(img.height));
        let pix = img.get(x, y);
        fill(pix);
        circle(x, y, random(15)); //diameter random 
    }
}

I used an image that I found on imgur by Mihaela Noroc, a Romanian photographer. I chose this particular image because it involved a lot of vibrant colors, which I thought would be fun to work with. Here are some screenshots of my portrait: