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

Project-10 Sonic Story

// Rishi Karthikeyan 
//rkarthik@andrew.cmu.edu
//Section B 

//HW 10 Sonic Story  

let elf; 
    var elfX = 350; var elfY = 225;
let santa; 
    var santaX = 115; var santaY = 225;
let santaWorkshop;
let santaAndReindeer; 
    var santaAndReindeerX = 160; var santaAndReindeerY = 250;
let santaOnChimney;
let kid; 
    var kidX = 100; var kidY = 275;
let tree;

let elfVoice;
let sleighBells;
let santaVoice;
let kidVoice;

var count = 0;
var centerX = 250;
var centerY = 200;
var dx = 30;
var dy = 5;

function preload() {
    //load images
    elf = loadImage('https://i.imgur.com/pu8ed6l.png');
    santa = loadImage('https://i.imgur.com/5rgNTe1.png');
    santaWorkshop =loadImage('https://i.imgur.com/bmjFtUd.png');
    santaAndReindeer = loadImage('https://i.imgur.com/t86lPuw.png');
    santaOnChimney = loadImage('https://i.imgur.com/NoL1xBz.png');
    kid = loadImage('https://i.imgur.com/F06Ekzc.png');
    tree = loadImage('https://i.imgur.com/qOOQlZt.png'); 

    //load sounds
    elfVoice = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/ElfVoice.wav");
    sleighBells = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/SleighBells.wav");
    santaVoice = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/SantaVoice.wav");
    kidVoice = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/KidVoice.wav");
}


function setup() {
    createCanvas(500, 400);
    //createDiv("p5.dom.js library is loaded.");
    useSound();
    imageMode(CENTER);
    frameRate(1);
}

function soundSetup() { 
    elfVoice.setVolume(0.5);
    sleighBells.setVolume(0.5);
    santaVoice.setVolume(0.5);
    kidVoice.setVolume(0.5);
}

function draw() {
    background(200);  

    count++;

    switch (count) {
        case 1: elfVoice.play(); break;
        case 6: sleighBells.play(); break;
        case 11: santaVoice.play(); break;
        case 16: kidVoice.play(); break;
    }
    
    if (count >= 0 & count < 5) { 
        workshop();
        dy = 10;
        elfY -= dy;
        if ( elfY <= 215) {
            elfY +=20;
        }
    }
    if (count >= 5 & count < 10) { 
        reindeer(); 
        dy = 20;
        santaAndReindeerX += dx;
        santaAndReindeerY -= dy; 
    }
    if (count >= 10 & count < 15) { 
        chimney(); 
        centerY += dy;
    }
    if (count >= 15 & count < 20) {
        home(); 
        kidY -= 5;
        if ( kidY <= 270) {
            kidY +=10;
        }
    }
    if (count >=20) {
        end(); 
    } 
    
}

function workshop() {
    nightSky();
    //snow 
    fill(255);
    rect(0, 215, width, 200);
    image(santaWorkshop, centerX+80, centerY-30, 300, 100);
    image(elf, elfX, elfY, 130, 130);
    image(santa, santaX, santaY, 206, 200);
}

function reindeer() {
    nightSky();
    //moon
    noStroke();
    fill(208);
    circle(centerX, centerY-30, 200);

    //mountains 
    fill(20, 28, 38);
    beginShape();
    vertex(0, height);
    vertex(0, 270);
    vertex(105, 225);
    vertex(205, 300);
    vertex(290, 250);
    vertex(350, 280);
    vertex(450, 205);
    vertex(width, 225);
    vertex(width, height);
    endShape(CLOSE);

    image(santaAndReindeer, santaAndReindeerX, santaAndReindeerY, 270, 225);
}

function chimney() {
    nightSky();
    //roof
    image(santaOnChimney, centerX, centerY, 230, 230);
    noStroke();
    fill(195, 70, 55);
    rect(0, 315, width, 85); 
}

function home() {
    nightSky();
    
    //wall
    noStroke();
    fill(224, 193, 173);
    rect(0, 0, width, 50);
    rect(0, 0, 50, height);
    rect(250, 0, 250, height);
    rect(0, 150, width, 200);

    //floor
    fill(225, 221, 207);
    rect(0, 300, width, 100);

    //window 
    strokeWeight(5);
    stroke(255);
    noFill();
    rect(50, 50, 100, 100);
    rect(150, 50, 100, 100);
    strokeWeight(2);
    line(50, 100, 250, 100);
    line(100, 50, 100, 150);
    line(200, 50, 200, 150);

    image(kid, kidX, kidY, 150, 125);
    image(tree, 340, 220, 300, 300);
}

function end() {
    nightSky();
    noStroke();
    fill(255);
    textSize(50);
    text('The End', 185, 250);
}

function nightSky() {
    //night sky
    background(6, 20, 34);
    //stars 
    stroke(255);
    for (var i = 0; i < 1000; i++) {
        point(random(0,width), random(-0, height));
    }
}

Four Sounds (1) elf singing (2) sleigh bells (3) Santa talking (4) kid celebrating

I wanted to make something Christmas related. This story shows Santa delivering presents. This project was a lot of fun to create and helped me better understand how to code with images and sound.

Looking Outwards – 10: Computational Music

Holly Herndon is an electronic musician who has developed the first mainstream album, called Proto, with the help of artificial intelligence. What sets her apart is that she developed a machine learning AI named Spawn to copy her own voice, and be able to sing and harmonize with her. In regards to the learning curve of the AI, Herndon states that the beginning was uninteresting – when teaching the machine, the AI extracts rules from a training canon and follows them exactly, and is unable to go outside that canon. Herndon used different programs to teach Spawn. First, she used TensorFlow, which is a visual learning program that turned soundbytes into visual spectrograms that Spawn could ‘read’. The second program Herndon used is called SampleRNN, which is used for voice recognition, and she applied it to Spawn as a way for it to predict what would naturally come next in a flow of music. The last program used was a voice model-method which involved recording herself and her partner speaking arbitrary phrases for hours of audio that translates into hundreds of megabytes of data. At the end of the process, Spawn could independently sing unique melodies that Herndon herself is not capable of replicating. I think this usage of computation for a creative practice such as this is unprecedented, as Spawn can write music that compliments Herndon’s own style, while still being something never conceived before by a human. The AI technology is not surpassing the humans in this case, but working alongside it to create something new.

LO-10 Computer Music

Explanation and example of Computer Orchestra

Computer Orchestra was created in 2013 by Fragment.in, an artist collective comprised of Laura Perrenoud, David Colombini and Marc Dubois. They used Processing, SimpleOpenNI, and OpenKinect to create this project. Computer Orchestra is an interactive installation that uses multiple computers to allow the user to conduct their own orchestra. Their hand movements are recognized by a Kinect motion controller that transmits data to Processing through the SimpleOpenNI library. Processing then sends a signal to the main computer which gives instructions to the rest of the screens.

I admire how this piece is made to be accessible. Computer Orchestra crowdsources sounds to use and users can upload their own sounds as well. I also admire that there is a visual component to the project, along with the sound the program creates aesthetically pleasing sound waves on the screen that enhance the experience. It’s amazing to see how just one person can create the feel of an entire orchestra.

Fragment.in states that they use their work as a way to question the impact of the digital on everyday life. These artistic sensibilities are seen in Computer Orchestra through the way it highlights how one person can replace an entire orchestra with the use of digital.

Project-09 Portrait

sketch

I made this interactive work which allows the user to move their mouse around to fill out the image with the brush feature. The brush has the shape of leaves. The user can change the brush shape with key press. I want to create a painting like atmosphere. The elements at each pixel consists of text “she, 20, art” and patterns such as flowers, stars, hearts, etc.

//Heying Wang
//section B
let img;
//key words abut me
let words=['20','she','art','✿','*','♥︎','❀','♛']
var leafShape='serrate'

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

function setup() {
  createCanvas(480, 480);
  imageMode(CENTER);
  noStroke();
  background(255);
  img.loadPixels();
  img.resize(480,480);
  background(map(mouseX,0,width,0,255),70,90);
  frameRate(10000);
  
}

//find the pixel color 
function draw() {
  let x = floor(random(img.width));
  let y = floor(random(img.height));
  let pc = img.get(x, y);
  fill(pc);
  //smaller founts for important parts of the image
  //so that there will be more details
  if(x>150 & x<350 && y>0 && y<220){
      textSize(8);
  }
  else if(x>120 & x<400 && y>300 && y<400){
      textSize(12);

}else{
    textSize(15)
}
    /* brush Feature: the player can move 
    the mouse around to fill out the image faster
    the brush stroke has the shape of leaves */

    text(random(words),x,y);

    if(leafShape=='serrate'){
        fill(img.get(mouseX,mouseY));
        beginShape()
        curveVertex(mouseX,mouseY);
        curveVertex(mouseX,mouseY-8);
        curveVertex(mouseX-4,mouseY-15);
        curveVertex(mouseX,mouseY-20);
        curveVertex(mouseX+4,mouseY-15);
        curveVertex(mouseX,mouseY-8);
        endShape(CLOSE);
    }
    //change brushes
    else if (leafShape=='digitate'){
        fill(img.get(mouseX,mouseY));
        line(mouseX,mouseY,mouseX,mouseY-6);
        beginShape();
        vertex(mouseX,mouseY);
        vertex(mouseX,mouseY-5);
        vertex(mouseX+8,mouseY-8);
        vertex(mouseX,mouseY-11);
        vertex(mouseX-8,mouseY-8);
        endShape(CLOSE);
    }
    console.log(leafShape);



    

   


}

function keyTyped(){
    
    if(key==='d'){
        leafShape='digitate'
    }
    else if(key==='s'){
        leafShape='serrate'
    }
}

LookingOutwards-09

heyingw Section B

Project: Christina Phazero Curlee, “from Video Art to Video Game”, Breathe,2016

I think it’s amazing how the artist is able to turn her difficulty with depression to power and creativity that helps her build her unique, artistic, and meaningful games. Christina explained that before she started to make games, she was stuck in her own world and detached from the rest of the world. She has been struggling with depression for years. But in the process of making games, Christina began to connect with others as she needed to understand what the players are thinking at every stage to make good games. She became more social, and more curious about the world and other people. Her games spark a dialog between her and her players. Christina began to understand how they experienced the world, and make them understand her world through games. My peer admires the artist’s ability to use video game as a platform for communication and interaction. I think that’s definitely true. The video games served as bridges between Christina and the players, and also the world. Also, her games deal with meaningful topics such as child abuse, racial and sexual violence, marginalization, beauty standards, etc. She also incorporated illustration and photography. This makes her games different from regular shooting games that we see on the market. Her games become art that left deep impression on players and made people think.

The artist talks about her works

My peer’s Looking Outwards post: https://courses.ideate.cmu.edu/15-104/f2020/2020/10/26/08_lo_creativepractice/

Looking Outwards – 09

I think Xander’s cited project, thispersondoesnotexist.com, is a fascinating project involving AI. I agree with Xander’s notes about the controversy but I don’t agree that people should worry about this type of system. It’s really interesting to me how they can form a full face out of cherry picking and choosing different features to make a face. Xander talked about how this type of software could be used for facial recognition but I also think this could exist as sort of a payment type in the future. I think that the technology can be adapted to then recognize people from their faces and be able to connect them to their bank account or credit card info.

Link: https://courses.ideate.cmu.edu/15-104/f2020/2020/10/08/lookingoutwards-06-2/

Project 09 – Computational Portrait (Custom Pixel)

I chose to use a selfie of me for this project. I resized the image so that my face would fit in the canvas, and then had words appearing to reveal the selfie. I used the following words : “annie”, “jean”, “flag”, “blue”, “brown”, “tan”, “red”, etc. I used these words because it described images in the actual picture, such as the background, me, and colors within the picture.

I had a little difficulty at first about trying to figure out another creative way to reveal the picture. However, from a previous LO post that I had made, I was inspired by an artist who used common words associated with each other on Google to graphically display data, therefore I chose the words that would be related to/associated with my selfie to appear as it seemed most reasonable.

sketch

//Annie Kim
//anniekim@andrew.cmu.edu
//Section B
//anniekim-09-Project

var img;
//words describing pic
var words = ["annie", "jean", "flag", "selfie", "snapchat", "blue", "red", "tan", "brown"]


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

function setup() {
	createCanvas(480, 480);
	background(0);
	img.loadPixels();
	frameRate(1000);

}

function draw() {
	//resizing selfie
	img.resize(480, 480);
	var x = random(width);
	var y = random(height);
	//getting exact pixel color to fill in words later
	var pixelx = constrain(floor(x), 0, width);
	var pixely = constrain(floor(y), 0, height);
	var pixelcolor = img.get(pixelx, pixely);

	noStroke();
	fill(pixelcolor);
	textSize(random(8, 18));
	textFont('Helvetica');
	text(words[Math.floor(random(0, 9))], x, y);
	
}

This is as the words are starting to appear..

This is when the picture is almost entirely resolved..

This is the selfie that shows when the words are done appearing.

Project 9 – Computational Portrait (Custom Pixel)

Following the original image’s brick theme, I kept the project simple while trying to mimic the aesthetic of bricks/tiles.

sketch

var portrait;

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

function setup() {
    createCanvas(480, 320);
    background(255);
    portrait.loadPixels();
    portrait.resize(width, height);
    frameRate(30);
}

function draw() {
    //image(portrait, 0, 0, width, height);
    var x = random(width);
    var y = random(height);
    var porX = constrain(floor(x), 0, width);
    var porY = constrain(floor(y), 0, height);
    var colr = portrait.get(porX, porY);
    stroke(255);
    fill(colr);
    rect(x, y, random(10, 25), random(10, 25));
}

Looking Outwards – 09

For this Looking Outwards assignment, I chose to look at Flora’s blog post from last week. Flora’s post mentioned how she really liked the “Summer ’91” piece by Sarah Groff Hennigh-Palermo because the work had a smooth visual flow, with mesmerizing warm tones. I thought this was accurately describing the work because upon first glance at the work, I immediately thought of a hot summer day, but an enjoyable type of hot weather. It’s very appealing to the eyes especially during dark seasons and cold weather right now.

I think that in order to add to this discussion, Sarah’s type of artistic style should be talked more in-depth. Upon looking at her portfolio of modern artwork, it was very apparent that her work tends to relate to the “rare aesthetic/deeply hidden memories” trend, where the art tends to remind you of something you’ve seen long ago.

According to Sarah’s own website, my assumption about her art style was correct because she claims to focus on “hybrid nostalgia” with her work. I always tend to find these aesthetics amusing because in a way, it gives me deja vu or a quick glimpse of an old, fading, memory.

LO – 08

This is Flora’s original blog post from last week.

Below is the link to Sarah Groff Hennigh-Palermo’s work website.

http://art.sarahghp.com/works/

This is “Summer ’91” by Sarah Groff Hennigh-Palermo.

This is “Make Manifest” by the artist. This is the one that for some reason gave me ‘deja-vu’ vibes, and reminded me a lot of familiar images that I seem to remember from a while ago.

Project 09 – Portrait

peach1

let img;
let smallPoint, largePoint;
 var angle = 0


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

function setup() {

  createCanvas(500,500);
  imageMode(CENTER);
  noStroke();
  background(255);
  img.loadPixels();
  
}

function draw() {
  //retrive the image pixels in different sections to be able to assign specific 
  //pixel sizes for each section
  let x = floor(random(img.width));
  let y = floor(random(img.height/4));
  let y1 = floor(random(img.height/2));
  let y2 = floor(random(img.height/4*3));
  let y3 = floor(random(img.height));
  let pix = img.get(x, y);
  let pix1 = img.get(x, y1);
  let pix2 = img.get(x, y2);
  let pix3 = img.get(x, y3);
  //pixels are drawn where the mouse location is 
  let pixM = img.get(mouseX,mouseY);

//when the mouse is pressed, make the rectangles horizontally oriented,
//sizes change according to mouseY value
if (mouseIsPressed){
  fill(pix3);
  rectMode(CENTER)
  	rect(x,y3, 50, mouseY/50);
  fill(pix2)
  	rect(x,y2, 25,mouseY/100)
  fill(pix1)
	rect(x,y1, 10, mouseY/150)
  fill(pix)
	rect(x,y, 5, mouseY/200)
  fill(pixM)
	rect(mouseX,mouseY,5,10)
}
//naturally, rectangles are vertical. They are larger at the top of the canvas
//and towards the bottom, get smaller in size to get fading away/gradient effect.
//get larger proportionally (across different sections) as mouseX increases
 else{
  fill(pix);
  rectMode(CENTER)
  	rect(x,y, mouseX/50, 50);
  fill(pix1)
  	rect(x,y1, mouseX/100,25)
  fill(pix2)
	rect(x,y2, mouseX/150,10)
  fill(pix3)
	rect(x,y3, mouseX/200,5)
  fill(pixM)
	rect(mouseX,mouseY,5,10)
}
}
//when the mouse is clicked, the colors invert
function mousePressed(){
	filter(INVERT)

}

I had a lot of trouble with being able to manipulate the individual pixels – I wanted to make the pixels deliberately dynamic and varied, which I had trouble with because I couldn’t change them after they appeared. So, my solution was the divide up the image canvas – when I was using the “get pixels” function, I only retrieved the pixels for portions of the image. This way, I could depict those different portions with different pixels. I chose to use rectangles throughout, but of varying sizes across the different portions of the canvas in order to create the effect that the picture is fading or loading into existence. The sizes of the rectangles furthermore varies proportionally across the sections according to the mouseX location. When the mouse is pressed, the rectangles are oriented horizontally instead. I also added an invert filter that creates color interest when the mouse is clicked.