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

Project 10: Visual Story Home Before The Storm

For my sonic visual story, my goal was to create a scene with simple shapes I was familiar with and I could control with my code easily and create a story with image and sound.

Visuals

I did some research online, about how artists created different scenes in P5.js (not with sounds, but only with visuals), so I could start thinking about the sequence of my story. I create simple sketches and planned which parts were non-moving and which were movable.

That helps me to categorise my code into smaller functions like function sun(); etc, and make the code as simple to comprehend as possible.

Story:

The general story was of a man trying to reach home before it is about to start raining. As cloud cover increases, he rushes home and rings the doorbell.

Sounds

I looked for short sound clips, not more than 03 seconds and successfully created a local server and preloaded them into the code.

Towards the final image

Initially, I was loading all the motion and sound simultaneously, meaning everything started at the same frameCount. But eventually I used my sketches to plan my story and have objects appear one after another. I also used the walking man from last week’s assignment, to learn how I was able to manage the variables of several objects and shapes, without having runtime errors. This was helpful to revisit, tweak the code from the old assignment and recontextualise it!

Process Video

In the initial version, my project was very noise and glitchy, but after several iterations, I was able to improve it significantly.

Mid-Process Trial Video:

Final Video after making edits:

var x;
var y;
var m = 0;
var frameCount = 0;
var sunY = 300;
var cloudX = 20;
var dir = 1;
var boing;
//walkimage code file
var character = []; //object
var walkImage = []; // an array to store the three images
function preload(){
sunrise = loadSound("http://localhost:8000/sunrise.wav"); boing = loadSound("http://localhost:8000/boing.wav"); pops = loadSound("http://localhost:8000/pop.wav"); doorbell = loadSound("http://localhost:8000/doorbell.wav"); whoosh = loadSound("http://localhost:8000/whoosh.wav"); //img = loadImage("http://i.imgur.com/svA3cqA.png"); // These URLs are for the individual walk cycle images, // stored in the imgur album http://imgur.com/a/85DTu var filenames = ["http://i.imgur.com/svA3cqA.png", "http://i.imgur.com/jV3FsVQ.png", "http://i.imgur.com/IgQDmRK.png", "http://i.imgur.com/kmVGuo9.png", "http://i.imgur.com/jcMNeGq.png", "http://i.imgur.com/ttJGwkt.png", "http://i.imgur.com/9tL5TRr.png", "http://i.imgur.com/IYn7mIB.png"]; for (var i = 0; i &lt; filenames.length; i++) { walkImage[i] = loadImage(filenames[i]); }
}
function makeCharacter(cx, cy, cdx, cdy) { //constructor function
char = {x: cx,
y: cy, //object properties
dx: cdx,
dy: cdy,
facingRight: true, //?
pos: 0,
stepFunction: stepCharacter,
drawFunction: drawCharacter,
}
return char;
}
function setup() {
createCanvas(600, 400);
background(53, 81, 98);
imageMode(CENTER);
//var tempy = 100;
var char = makeCharacter(100, 300, 5, 1);
character.push(char); //or is it walkImage[i]
useSound();
frameRate(8);
}
function soundSetup() {
boing.setVolume(0.01);
doorbell.setVolume(0.01);
pops.setVolume(0.01);
whoosh.setVolume(0.01);
//osc = new p5.Oscillator();
//osc.amp(0.25);
//osc.freq(midiToFreq(note));
//osc.start();
}
function draw() {
print(frameCount)
background(53, 81, 98);
if (frameCount >=30) { sun(); boing.play(); } noStroke(); scene(); fill(244,164,96); triangle(0, 400, 250, 200, 500, 400); door(); if (frameCount >= 80 &amp;&amp; frameCount &lt;= 100){ doorbell.play(); door(); } fill(240); rect(0, 350, 600, 400); if (frameCount >= 20){ noStroke(); cloud(); if (m == 500) { m --; } m += 1 ; whoosh.play(); } for (i = 0; i &lt; character.length; i++) { var char = character[i]; char.stepFunction(); char.drawFunction(); pops.play(); } if (this.x == 500) { this.x = 100; }
}
function scene() {
fill(244,164,96);
triangle(0, 400, 250, 200, 500, 400);
door();
}
function sun() {
var c;
noStroke();
//SUN c = color(255, 212, 0); fill(c); ellipseMode(CENTER); ellipse(100, sunY, 100); if (sunY > 100) { sunY--; }
}
function door() {
fill(255,0,0);
rect(500, 225, 80, 125)
}
function cloud(cloudX, y) {
fill(250);
ellipse(m+50,60,80,80);
ellipse(m+70,50,60);
//ellipse(120,50,30,30);
ellipse(m+120,65,70,70);
ellipse(m+30,50,80,80);
//rect(80,50,110,50, 20);
}
function stepCharacter() {
this.pos++;
this.x += this.dx;
if (this.pos == walkImage.length) { this.pos = 0 ; } if (this.x == 500){ this.pos -- ; }
}
function drawCharacter() {
//image(walkImage[this.pos], this.x, this.y);
if (this.x == 500) { //
this.x --;
image(walkImage[this.pos], 500, this.y);
} else { image(walkImage[this.pos], this.x, this.y); }
}

var x;

var y;

var m = 0;

var frameCount = 0;

var sunY = 300;

var cloudX = 20;

var dir = 1;

var boing;

//walkimage code file

var character = []; //object

var walkImage = []; // an array to store the three images

function preload(){

sunrise = loadSound("http://localhost:8000/sunrise.wav"); boing = loadSound("http://localhost:8000/boing.wav"); pops = loadSound("http://localhost:8000/pop.wav"); doorbell = loadSound("http://localhost:8000/doorbell.wav"); whoosh = loadSound("http://localhost:8000/whoosh.wav"); //img = loadImage("http://i.imgur.com/svA3cqA.png"); // These URLs are for the individual walk cycle images, // stored in the imgur album http://imgur.com/a/85DTu var filenames = ["http://i.imgur.com/svA3cqA.png", "http://i.imgur.com/jV3FsVQ.png", "http://i.imgur.com/IgQDmRK.png", "http://i.imgur.com/kmVGuo9.png", "http://i.imgur.com/jcMNeGq.png", "http://i.imgur.com/ttJGwkt.png", "http://i.imgur.com/9tL5TRr.png", "http://i.imgur.com/IYn7mIB.png"]; for (var i = 0; i < filenames.length; i++) { walkImage[i] = loadImage(filenames[i]); }

}

function makeCharacter(cx, cy, cdx, cdy) { //constructor function

char = {x: cx,

y: cy, //object properties

dx: cdx,

dy: cdy,

facingRight: true, //?

pos: 0,

stepFunction: stepCharacter,

drawFunction: drawCharacter,

}

return char;

}

function setup() {

createCanvas(600, 400);

background(53, 81, 98);

imageMode(CENTER);

//var tempy = 100;

var char = makeCharacter(100, 300, 5, 1);

character.push(char); //or is it walkImage[i]

useSound();

frameRate(8);

}

function soundSetup() {

boing.setVolume(0.01);

doorbell.setVolume(0.01);

pops.setVolume(0.01);

whoosh.setVolume(0.01);

//osc = new p5.Oscillator();

//osc.amp(0.25);

//osc.freq(midiToFreq(note));

//osc.start();

}

function draw() {

print(frameCount)

background(53, 81, 98);

if (frameCount >=30) { sun(); boing.play(); } noStroke(); scene(); fill(244,164,96); triangle(0, 400, 250, 200, 500, 400); door(); if (frameCount >= 80 && frameCount <= 100){ doorbell.play(); door(); } fill(240); rect(0, 350, 600, 400); if (frameCount >= 20){ noStroke(); cloud(); if (m == 500) { m --; } m += 1 ; whoosh.play(); } for (i = 0; i < character.length; i++) { var char = character[i]; char.stepFunction(); char.drawFunction(); pops.play(); } if (this.x == 500) { this.x = 100; }

}

function scene() {

fill(244,164,96);

triangle(0, 400, 250, 200, 500, 400);

door();

}

function sun() {

var c;

noStroke();

//SUN c = color(255, 212, 0); fill(c); ellipseMode(CENTER); ellipse(100, sunY, 100); if (sunY > 100) { sunY--; }

}

function door() {

fill(255,0,0);

rect(500, 225, 80, 125)

}

function cloud(cloudX, y) {

fill(250);

ellipse(m+50,60,80,80);

ellipse(m+70,50,60);

//ellipse(120,50,30,30);

ellipse(m+120,65,70,70);

ellipse(m+30,50,80,80);

//rect(80,50,110,50, 20);

}

function stepCharacter() {

this.pos++;

this.x += this.dx;

if (this.pos == walkImage.length) { this.pos = 0 ; } if (this.x == 500){ this.pos -- ; }

}

function drawCharacter() {

//image(walkImage[this.pos], this.x, this.y);

if (this.x == 500) { //

this.x --;

image(walkImage[this.pos], 500, this.y);

} else { image(walkImage[this.pos], this.x, this.y); }

}

Note: I have not embedded the code, because the sounds are on local servers and I wasn’t able to load them into the p5.js web editor.

LO-10: 1935 by Florian Hecker

“What do machines hear that humans cannot?”

For this week’s Looking Outwards, I looked up several artists and composers who work with sound as a part of their artwork. For all these artists I came across, sound is material to experiment with and create artistic expression. While several sound artists Rie Nakajima build objects as a part of the installation that create sound effects the audience can experience. Sound artists design sound for different spaces and environments which determines the quality and style of sound art.

While reflecting on the differences between electronic music and sound art, I learnt that many sound artists use environments and physical objects to make sounds. But computer music is unique in that sense. I research the computer musician Florian Hecker – specifically with his work 1935. I chose this work, because it does justice to expressing the medium it is creating in the overall effect of the sound.

1935 by Florian Hecker:

The final project is a soundscape that varies in modulation as different data is used as input.

In the description of this video, it describes how the sound itself embodies the listening behavior of machines.He exhibits how different sound generated by adding different inputs to the computer can show measures of abstraction and scales of resolution. He also tends to personify machines and asks, “What do machines hear that humans cannot?”. He therefore truly create an effect of a different type of non-human listening, and that computers listen differently than us.

Florian Hecker is a media artist who is affiliated to Edinburgh College of Art, the MIT art program and also showcases his work and installations at leading art galleries.

Blog link: http://florianhecker.blogspot.com/

Project 10: Sonic Story

sketch

//Jessie Chen
//D
//Project 10
//Sonic Story

//Description: A girl in her room, 
//whistling and playing guitar as the wind howls. 
//Rain follows after the wind, darkening the room and the sky. 


var windows = [];
var girl = [];
var animation = 0;
var wind;
var guitar;
var whistle;
var rain;

function preload() {
    //load window animation
    var windowFrames = [];
    windowFrames[0] = "https://i.imgur.com/znUBSxa.png";
    windowFrames[1] = "https://i.imgur.com/znUBSxa.png";
    windowFrames[2] = "https://i.imgur.com/6CCPRvu.png";
    windowFrames[3] = "https://i.imgur.com/6CCPRvu.png";
    windowFrames[4] = "https://i.imgur.com/WL8WfFv.png";
    windowFrames[5] = "https://i.imgur.com/WL8WfFv.png";
    windowFrames[6] = "https://i.imgur.com/WL8WfFv.png";
    windowFrames[7] = "https://i.imgur.com/6CCPRvu.png";
    windowFrames[8] = "https://i.imgur.com/6CCPRvu.png";
    windowFrames[9] = "https://i.imgur.com/znUBSxa.png";
    windowFrames[10] = "https://i.imgur.com/znUBSxa.png";

    for (var i = 0; i < windowFrames.length; i++) {
        windows[i] = loadImage(windowFrames[i]);
    }

    //load girl animation
    var girlFrames = [];
    girlFrames[0] = "https://i.imgur.com/cJf8oUc.png";
    girlFrames[1] = "https://i.imgur.com/StszbDY.png";
    girlFrames[2] = "https://i.imgur.com/1AHGiCS.png";
    girlFrames[3] = "https://i.imgur.com/BB829DI.png";
    girlFrames[4] = "https://i.imgur.com/6T6wsTS.png";
    girlFrames[5] = "https://i.imgur.com/KQz7nSy.png";
    girlFrames[6] = "https://i.imgur.com/BF26KsD.png";
    girlFrames[7] = "https://i.imgur.com/YGI1D50.png";
    girlFrames[8] = "https://i.imgur.com/GzWvcdv.png";
    girlFrames[9] = "https://i.imgur.com/LADpf8C.png";

    for (var i = 0; i < girlFrames.length; i++) {
        girl[i] = loadImage(girlFrames[i]);
    }

    //load sounds
    wind = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/wind.wav");
    rain = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/rain-2.wav");
    whistle = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/whistle.wav");
    guitar = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/guitar-1.wav");
}


function setup() {
    createCanvas(400, 400);
    imageMode(CENTER);
    frameRate(5);
    useSound();
}


function soundSetup() {
    wind.setVolume(0.25);
    rain.setVolume(1.5);
}


function draw() {
    //sets background to light peach
    background(212, 187, 168);
    //background becomes darker as rain starts
    if (animation >= 50) {
        background(148, 139, 132);
    }

    //dots in the background
    circles();

    //color of the sky
    sky();

    //wind and rain animation and sound
    windNrain();

    //girl whistling and guitar
    playingguitar();

    animation ++;

    //stop animation when sounds end
    if(frameCount === 145) {
        noLoop();
    }
 }

function windNrain() {
    image(windows[animation%windows.length], 275, 175, 320, 350);
    //plays wind at the beginning
    if (animation == 0) {
        wind.play();
    //after wind, comes the rain
    } else if (animation == 50) {
        rain.play();
    }
}

 function playingguitar() {
    frameRate(4);
    image(girl[animation%girl.length], 150, 250, 300, 290);
    //girl is whistling
    if (animation == 1) {
        whistle.play();
    //after whistling, she starts singing and playing guitar
    } else if (animation == 6) {
        guitar.play();
    }
 }

 function sky() {
    noStroke();
    fill(153, 165, 166);
    //sky darkens with rain
    if (animation >= 50) {
        fill(85, 90, 95);
    }
    //constrain inside the window
    rect(230, 55, 100, 170);
 }

 function circles() {
    for (var x = 0; x <= width; x += 20) {
        for (var y = 0; y<= height; y += 20) {
            noStroke();
            fill(242, 220, 203, 120);
            ellipse(x, y, 10, 10);
        }
    }
}

I wanted to make a girl strumming a guitar so I drew frames for the animation using Procreate. I also made a separate animation for the window, to add extra sounds to the project (the wind and the rain). All the sounds I used were found on freesound.org (including the guitar.) Also, as the rain starts, the sky and the room darken.

Project 10 – Sonic Story

My story is a little western horse racing film. In the first scene, the gun goes off. Then the horses start galloping as the crowd cheers.

//Maggie Ma
//Section D
//Sonic Story

//STORYLINE: a little western horseracing film. 
//In the first scene, the start gun goes off.
//Then, the horses start galloping.
//Finally, the crowd cheers.

var horseImage = [];   // an array to store the images
var horse = []; //array to hold horse

//frame counter 
var frameCount = 0;

//crowd image
var crowd;

//gun image
var gun;

//race gun x position
var gunX = -200;

//horse background of first scene
var horsebg; 

//crowd scene zoom in and out
var zoomx = 0; 
var zoomy = 0;

//sounds
var neigh;
var shot;
var gallop;
var crowdcheer;

function preload(){

    neigh = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/neigh.wav");
    shot = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/gunshot-1.wav");
    gallop = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/gallop-1.wav");
    crowdcheer = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/crowd.wav");
    
    //horse running image files
    var filenames = [];
    filenames[11] = "https://i.imgur.com/Kpc8OBb.gif";
    filenames[10] = "https://i.imgur.com/G6TaUvT.gifg";
    filenames[9] = "https://i.imgur.com/lbhzzYr.gif";
    filenames[8] = "https://i.imgur.com/wuAUUaw.gif";
    filenames[7] = "https://i.imgur.com/083HFuW.gif";
    filenames[6] = "https://i.imgur.com/VpQvDCP.gif";
    filenames[5] = "https://i.imgur.com/4G68Ubf.gif";
    filenames[4] = "https://i.imgur.com/hE8DQXc.gif";
    filenames[3] = "https://i.imgur.com/6WcJ0gS.gif";
    filenames[2] = "https://i.imgur.com/T1Xwkkj.gif";
    filenames[1] = "https://i.imgur.com/2PDeXWh.gif";
    filenames[0] = "https://i.imgur.com/shnBbse.gif";

    crowd = loadImage('https://i.imgur.com/9tu2YoL.jpg');
    gun = loadImage('https://i.imgur.com/lmEa4Kh.png');
    horsebg = loadImage('https://i.imgur.com/Q9r6TGv.png');

 
    for (var i = 0; i < filenames.length; i++) {
        horseImage[i] = loadImage(filenames[i]);
    }
}

function stepCharacter() { //update function
    this.imageNumber+=1;

    //reset image cycle when reach the end of array
    if (this.imageNumber>11) {
        this.imageNumber =0; 
    }
}

function drawCharacter() {
    //making the dude walk
    image(horseImage[this.imageNumber], this.x, this.y);
}

function makeCharacter(wx, wy, wdx, wdy) { //character constructer
    w = {
        x: wx,
        y: wy, 
        dx: wdx,
        dy: wdy, 
        imageNumber: 0,
        stepFunction: stepCharacter,
        drawFunction: drawCharacter
        }
    return w;
}

function setup() {
    createCanvas(480, 350);
    useSound();
    imageMode(CENTER);
    for (var i=0; i<1; i++) { 
        var w = makeCharacter(240,170,0,0);
        horse.push(w); 
    }
    frameRate(10);
}

function soundSetup () {
    neigh.setVolume(0.8);
    shot.setVolume(0.5);
}
function draw() {
    background(255);

    frameCount++;
    if (frameCount >= 0& frameCount < 160) { //race gun goes off scene
        image(horsebg, 240, 196, width, height); //background
        image(gun, 200 + gunX, height-250, width, height); //gun image
        if (frameCount >= 0 & frameCount < 70){ 
            gunX += 7; //gun slides in
        } else if (frameCount >= 90 & frameCount <160) {
            gunX -=12; //gun slides out
        } 
    }
   
    else if (frameCount >=100 & frameCount <300) { //horse galloping scene
        for (var i=0; i<1; i++) { //three people walking
            var w = horse[i];
            push();
            w.stepFunction();
            w.drawFunction();
            pop();
        }

    } else if (frameCount >=300 & frameCount < 400) { //crowd cheering scene
        image(crowd, 240, 196, width + zoomx, height + zoomy);
        zoomx +=3; //zoom in x
        zoomy += 3; //zoom in y 

    } else if (frameCount >= 400 & frameCount <450) { //end scene
        background(0);
        fill(255);
        textFont('Courier New Italic')
        textSize(16);
        text('the great race.', width-200, height-75);
    
    }else if (frameCount >= 450) {
        background(0);
        noLoop();
    }

    //sound play
    if (frameCount == 88) {
        shot.play();
    } else if (frameCount == 130){
        gallop.play();
    } else if (frameCount == 200){
        neigh.play();
    } else if (frameCount == 270) {
        crowdcheer.play();
    } else if (frameCount > 400) {
        crowdcheer.stop();
    }
}

Project 10-2020 Election Highlights Sonic Story

My sound story includes some highlights from the 2020 Presidential Election. I included audio clips from debates, the presidential anthem, and TikTok songs with special guest the Fly that landed on Mike Pence’s head.

election

function preload() {
    // load sounds for sound story
    buzz = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/flybuzz.wav");
    talk = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/imspeaking.wav");
    president = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/presidential.wav");
    banjo = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/banjo.wav");
    loser = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/loser.wav");
}
//set values for brownian motion of fly
var Y = 0;
var X = 5;
var noiseParam= 0;
var noiseStep= 0.1;

function setup() {
    // you can change the next 2 lines:
    createCanvas(480, 480);
    //======== call the following to use sound =========
    useSound();
    imageMode(CENTER);
    frameRate(14);
}
function soundSetup() { // setup for audio generation
    //set volumes for sounds
    buzz.setVolume(0.1);
    talk.setVolume(0.5);
    president.setVolume(0.5);
    banjo.setVolume(1.0);
    loser.setVolume(0.4);

}
function Joe() {
    background(0,86,217);
    //draw joe biden 
    noStroke();
    //shirt
    fill(245);
    rect(145,414,200,100);
    //neck
    fill(225,176,161);
    beginShape();
    curveVertex(162,314);
    curveVertex(161,368);
    curveVertex(224,438);
    curveVertex(272,437);
    curveVertex(331,375);
    curveVertex(331,321);
    endShape(CLOSE);
    //face
    fill(250,218,205)
    beginShape();
    curveVertex(180,53);
    curveVertex(153,84);
    curveVertex(155,119);
    curveVertex(152,160);
    curveVertex(142,213);
    curveVertex(172,247);
    curveVertex(218,255);
    curveVertex(258,261);
    curveVertex(291,270);
    curveVertex(361,270);
    curveVertex(369,254);
    curveVertex(371,212);
    curveVertex(363,139);
    curveVertex(360,90);
    curveVertex(344,65);
    curveVertex(252,48);
    endShape(CLOSE);
    //left ear
    fill(225,176,161);
    beginShape();
    curveVertex(122,181);
    curveVertex(112,191);
    curveVertex(105,214);
    curveVertex(123,257);
    curveVertex(153,225);
    endShape(CLOSE);
    //right ear
    beginShape();
    curveVertex(372,206);
    curveVertex(393,230);
    curveVertex(402,239);
    curveVertex(395,267);
    curveVertex(358,302);
    curveVertex(369,250);
    endShape(CLOSE);
    //frame
    noFill();
    stroke(200)
    strokeWeight(3)
    line(204,173,303,179);
    arc(252,210,44,44,radians(200), 0)
    //left lens
    strokeWeight(4)
    fill(29,31,34,230)
    beginShape();
    curveVertex(174,172);
    curveVertex(159,190);
    curveVertex(157,221);
    curveVertex(181,242);
    curveVertex(218,233);
    curveVertex(245,198);
    curveVertex(231,175);
    curveVertex(202,171);
    endShape(CLOSE);
    //right lens
    beginShape();
    curveVertex(274,181);
    curveVertex(262,197);
    curveVertex(277,226);
    curveVertex(309,250);
    curveVertex(334,245);
    curveVertex(348,220);
    curveVertex(345,192);
    curveVertex(326,181);
    curveVertex(303,177);
    endShape(CLOSE);
    //hair
    noStroke();
    fill(255);
    beginShape();
    curveVertex(205,24);
    curveVertex(167,43);
    curveVertex(141,73);
    curveVertex(125,112);
    curveVertex(119,139);
    curveVertex(115,165);
    curveVertex(117,185);
    curveVertex(137,198);
    curveVertex(143,204);
    curveVertex(164,92);
    curveVertex(183,62);
    curveVertex(213,52);
    curveVertex(251,49);
    curveVertex(331,67);
    curveVertex(357,100);
    curveVertex(368,223);
    curveVertex(383,215);
    curveVertex(391,165);
    curveVertex(379,113);
    curveVertex(371,73);
    curveVertex(337,44);
    curveVertex(305,27);
    curveVertex(251,26);
    endShape(CLOSE);
    //mask
    fill(0);
    beginShape();
    curveVertex(129,185);
    curveVertex(148,211);
    curveVertex(167,233);
    curveVertex(190,243);
    curveVertex(223,245);
    curveVertex(240,244);
    curveVertex(277,255);
    curveVertex(324,263);
    curveVertex(362,257);
    curveVertex(385,222);
    curveVertex(391,228);
    curveVertex(373,255);
    curveVertex(365,287);
    curveVertex(361,327);
    curveVertex(334,353);
    curveVertex(312,375);
    curveVertex(284,400);
    curveVertex(241,413);
    curveVertex(200,389);
    curveVertex(167,342);
    curveVertex(145,310);
    curveVertex(122,285);
    curveVertex(119,257);
    curveVertex(135,226);
    curveVertex(125,193);
    endShape(CLOSE);
    //left shoulder
    fill(43,43,55);
    beginShape();
    curveVertex(164,347);
    curveVertex(152,412);
    curveVertex(161,478);
    curveVertex(0,478);
    curveVertex(0,423);
    curveVertex(108,395);
    endShape(CLOSE);
    //right shoulder
    beginShape();
    curveVertex(335,362);
    curveVertex(343,418);
    curveVertex(335,480);
    curveVertex(399,480);
    curveVertex(438,480);
    curveVertex(480,480);
    curveVertex(480,447);
    curveVertex(394,419);
    endShape(CLOSE);  
    //left collar
    fill(255);
    beginShape();
    curveVertex(159,345);
    curveVertex(234,437);
    curveVertex(187,479);
    curveVertex(157,479);
    curveVertex(145,407);
    endShape(CLOSE);
    //right collar
    beginShape();
    curveVertex(335,358);
    curveVertex(355,406);
    curveVertex(347,480);
    curveVertex(308,480);
    curveVertex(267,434);
    endShape(CLOSE);
    //tie knot
    fill(50,50,74);
    beginShape();
    curveVertex(233,430);
    curveVertex(219,445);
    curveVertex(223,480);
    curveVertex(263,480);
    curveVertex(289,454);
    curveVertex(266,424);
    endShape(CLOSE);
}

//draw mike pence
function Mike(){
    background(248,95,90);
    noStroke();
    //shirt
    beginShape();
    fill(241, 237, 234);
    curveVertex(218,346);
    curveVertex(187,374);
    curveVertex(171,395);
    curveVertex(179,479);
    curveVertex(278,479);
    curveVertex(295,391);
    curveVertex(261,351);
    endShape(CLOSE);
    //left shoulder
    fill(0);
    beginShape();
    vertex(172,268);
    vertex(127,282);
    vertex(87,298);
    vertex(44,323);
    vertex(0,331);
    vertex(0,479);
    vertex(193,479);
    vertex(172,380);
    vertex(160,300);
    endShape(CLOSE);
    //right shoulder
    beginShape();
    vertex(325,286);
    vertex(334,294);
    vertex(351,312);
    vertex(396,330);
    vertex(448,354);
    vertex(479,368);
    vertex(479,479);
    vertex(258,479);
    vertex(289,402);
    vertex(316,304);
    endShape(CLOSE);
    //left ear
    fill(236, 166, 133);
    beginShape();
    curveVertex(185,145);
    curveVertex(175,127);
    curveVertex(167,133);
    curveVertex(165,149);
    curveVertex(165,177);
    curveVertex(165,201);
    curveVertex(168,214);
    curveVertex(175,217);
    endShape(CLOSE);
    //right ear
    beginShape();
    curveVertex(363,203);
    curveVertex(378,194);
    curveVertex(388,198);
    curveVertex(387,214);
    curveVertex(371,231);
    curveVertex(359,252);
    curveVertex(349,267);
    curveVertex(339,272);
    curveVertex(331,263);
    endShape(CLOSE);
    //neck
    beginShape();
    curveVertex(181,251);
    curveVertex(172,288);
    curveVertex(183,309);
    curveVertex(195,323);
    curveVertex(223,353);
    curveVertex(242,358);
    curveVertex(279,342);
    curveVertex(309,317);
    curveVertex(317,290);
    endShape(CLOSE);
    //right collar
    fill(255)
    beginShape();
    curveVertex(329,279);
    curveVertex(282,335);
    curveVertex(260,347);
    curveVertex(243,355);
    curveVertex(261,376);
    curveVertex(273,407);
    curveVertex(281,427);
    curveVertex(313,362);
    curveVertex(323,315);
    endShape(CLOSE);
    //face
    fill(244, 180, 150)
    beginShape();
    curveVertex(232,81);
    curveVertex(213,114);
    curveVertex(198,145);
    curveVertex(185,166);
    curveVertex(177,199);
    curveVertex(175,237);
    curveVertex(181,279);
    curveVertex(193,307);
    curveVertex(211,328);
    curveVertex(238,340);
    curveVertex(273,335);
    curveVertex(299,321);
    curveVertex(322,291);
    curveVertex(341,257);
    curveVertex(360,214);
    curveVertex(361,187);
    curveVertex(362,143);
    curveVertex(357,101);
    curveVertex(335,116);
    curveVertex(289,103);
    curveVertex(255,87);
    endShape(CLOSE);
    //right hair
    fill(241, 237, 234);
    beginShape();
    curveVertex(363,74);
    curveVertex(380,95);
    curveVertex(387,130);
    curveVertex(375,171);
    curveVertex(357,217);
    curveVertex(356,122);
    curveVertex(356,104);
    endShape(CLOSE);
    //left hair
    fill(255);
    beginShape();
    curveVertex(254,36);
    curveVertex(219,54);
    curveVertex(199,84);
    curveVertex(190,112);
    curveVertex(184,136);
    curveVertex(180,183);
    curveVertex(209,132);
    curveVertex(233,87);
    curveVertex(277,100);
    curveVertex(323,114);
    curveVertex(341,116);
    curveVertex(358,100);
    curveVertex(363,79);
    curveVertex(352,60);
    curveVertex(327,40);
    curveVertex(295,30);
    endShape(CLOSE);
    //collar
    beginShape();
    curveVertex(177,255);
    curveVertex(165,273);
    curveVertex(162,307);
    curveVertex(170,357);
    curveVertex(178,406);
    curveVertex(181,418);
    curveVertex(209,376);
    curveVertex(231,354);
    curveVertex(195,320);
    curveVertex(177,289);
    endShape(CLOSE);    
    //tie bottom
    fill(184, 14, 18);
    beginShape();
    curveVertex(223,394);
    curveVertex(209,430);
    curveVertex(196,478);
    curveVertex(261,479);
    curveVertex(257,433);
    curveVertex(239,392);
    endShape(CLOSE);
    //tie knot
    fill(229, 25, 30);
    beginShape();
    curveVertex(225,354);
    curveVertex(201,379);
    curveVertex(221,398);
    curveVertex(246,402);
    curveVertex(264,380);
    curveVertex(256,360);
    endShape(CLOSE);
}

function Kamala() {
    background(0,180,255);
    //draw kamala
    //hair behind face
    fill(43,32,22);
    beginShape();
    curveVertex(378,86);
    curveVertex(418,127);
    curveVertex(447,218);
    curveVertex(452,272);
    curveVertex(429,304);
    curveVertex(429,326);
    curveVertex(419,343);
    curveVertex(395,345);
    curveVertex(398,365);
    curveVertex(433,364);
    curveVertex(429,388);
    curveVertex(399,398);
    curveVertex(424,434);
    curveVertex(386,454);
    curveVertex(396,430);
    curveVertex(371,407);
    curveVertex(345,384);
    curveVertex(341,350);
    endShape(CLOSE);
    beginShape();
    fill(164,122,97);
    curveVertex(199,280);
    curveVertex(164,333);
    curveVertex(224,479);
    curveVertex(343,479);
    curveVertex(363,330);
    endShape(CLOSE);
    //right shoulder
    beginShape();
    fill(49,46,50);
    curveVertex(357,411);
    curveVertex(354,444);
    curveVertex(328,480);
    curveVertex(480,480);
    curveVertex(480,346);
    curveVertex(361,327);
    curveVertex(363,376)
    endShape(CLOSE);
    //left shoulder
    fill(59,58,64);
    beginShape();
    curveVertex(193,308);
    curveVertex(199,393);
    curveVertex(231,480);
    curveVertex(0,480);
    curveVertex(0,367);
    curveVertex(91,339);
    endShape(CLOSE);
    //necklace
    push();
    translate(10,25)
    fill(255);
    circle(345,343,15)
    circle(218,415,15);
    circle(221,429,15);
    circle(226,438,15);
    circle(233,449,15);
    circle(349,368,15);
    circle(349,381,15);
    circle(347,396,15);
    circle(344,407,15);
    circle(340,415,15);
    circle(337,428,15);
    circle(329,440,15);
    circle(321,450,15);
    circle(316,460,15);
    circle(350,355,15);
    pop();
    //face
    noStroke();
    fill(194,150,121)
    beginShape();
    curveVertex(353,71);
    curveVertex(393,113);
    curveVertex(415,177);
    curveVertex(405,204);
    curveVertex(414,244);
    curveVertex(401,281);
    curveVertex(376,331);
    curveVertex(369,359);
    curveVertex(341,366);
    curveVertex(305,350);
    curveVertex(235,298);
    curveVertex(219,179);
    curveVertex(238,59);
    endShape(CLOSE);
    //hair
    fill(59,44,23);
    beginShape();
    curveVertex(313,49);
    curveVertex(285,40);
    curveVertex(215,56);
    curveVertex(155,113);
    curveVertex(118,203);
    curveVertex(106,277);
    curveVertex(107,297);
    curveVertex(124,319);
    curveVertex(95,334);
    curveVertex(147,337);
    curveVertex(163,359);
    curveVertex(191,382);
    curveVertex(169,389);
    curveVertex(145,367);
    curveVertex(157,387);
    curveVertex(196,399);
    curveVertex(194,427);
    curveVertex(153,433);
    curveVertex(126,419);
    curveVertex(156,449);
    curveVertex(193,449);
    curveVertex(233,427);
    curveVertex(248,392);
    curveVertex(267,370);
    curveVertex(254,337);
    curveVertex(233,328);
    curveVertex(247,312);
    curveVertex(251,247);
    curveVertex(254,217);
    curveVertex(297,203);
    curveVertex(336,153);
    curveVertex(365,121);
    curveVertex(387,91);
    curveVertex(366,72);
    curveVertex(339,56);
    endShape(CLOSE);
}
//draw the fly 
function Fly(x,y) {
        push();
        translate(200,100);
        stroke(154, 137, 120);
        strokeWeight(2);
        fill(0);
        circle(x, y, 12);   //draw fly body
        pop();    
    }
function Trump() {
    background(241,59,58);
    //trump
    //left side hair
    fill(245,234,176);
    beginShape();
    curveVertex(108,100);
    curveVertex(85,148);
    curveVertex(89,204);
    curveVertex(97,237);
    curveVertex(92,295);
    curveVertex(107,325);
    curveVertex(133,339);
    curveVertex(138,228);
    curveVertex(140,160);
    curveVertex(159,124);
    curveVertex(151,84);
    endShape(CLOSE);
    //right ear
    fill(245,152,93)
    beginShape();
    curveVertex(381,163);
    curveVertex(398,217);
    curveVertex(395,271);
    curveVertex(383,302);
    curveVertex(368,308);
    curveVertex(365,247);
    endShape(CLOSE);
    //left shoulder
    fill(14,16,47);
    beginShape();
    curveVertex(155,406);
    curveVertex(188,480);
    curveVertex(0,480);
    curveVertex(0,422);
    curveVertex(48,381);
    curveVertex(136,341);
    endShape(CLOSE);
    //right shoulder
    beginShape();
    curveVertex(346,375);
    curveVertex(382,376);
    curveVertex(417,387);
    curveVertex(463,390);
    curveVertex(480,397);
    curveVertex(480,480);
    curveVertex(324,480);
    curveVertex(336,408);
    endShape(CLOSE);
    //left collar
    fill(255);
    beginShape();
    curveVertex(140,366);
    curveVertex(213,427);
    curveVertex(235,437);
    curveVertex(231,479);
    curveVertex(187,479);
    curveVertex(153,405);
    endShape(CLOSE);
    //right collar
    beginShape();
    curveVertex(339,395);
    curveVertex(340,480);
    curveVertex(317,480);
    curveVertex(270,480);
    curveVertex(275,438);
    endShape(CLOSE);
    //tie knot
    fill(68,73,215)
    beginShape();
    curveVertex(285,420);
    curveVertex(241,420);
    curveVertex(227,450);
    curveVertex(233,480);
    curveVertex(277,480);
    curveVertex(309,480);
    curveVertex(303,442);
    endShape(CLOSE);
    //face
    noStroke();
    fill(246,162,102)
    beginShape();
    curveVertex(147,176);
    curveVertex(135,233);
    curveVertex(135,296);
    curveVertex(129,328);
    curveVertex(128,346);
    curveVertex(157,403);
    curveVertex(213,440);
    curveVertex(277,452);
    curveVertex(331,424);
    curveVertex(365,357);
    curveVertex(372,323);
    curveVertex(371,233);
    curveVertex(368,183);
    curveVertex(365,112);
    curveVertex(299,111);
    curveVertex(157,119);
    endShape(CLOSE);
    //right side hair
    fill(245,234,176)
    beginShape();
    curveVertex(355,95);
    curveVertex(336,121);
    curveVertex(346,146);
    curveVertex(350,179);
    curveVertex(371,249);
    curveVertex(391,152);
    curveVertex(395,105);
    curveVertex(374,83);
    endShape(CLOSE);
    //left ear
    fill(245,152,93)
    beginShape();
    curveVertex(140,231);
    curveVertex(103,226);
    curveVertex(91,233);
    curveVertex(94,260);
    curveVertex(105,284);
    curveVertex(119,323);
    curveVertex(137,332);
    curveVertex(147,318);
    curveVertex(141,271);
    endShape(CLOSE);
    //top hair
    fill(248,232,145)
    beginShape();
    curveVertex(293,31);
    curveVertex(213,42);
    curveVertex(147,58);
    curveVertex(93,95);
    curveVertex(113,109);
    curveVertex(145,107);
    curveVertex(165,132);
    curveVertex(207,145);
    curveVertex(265,136);
    curveVertex(319,131);
    curveVertex(359,119);
    curveVertex(385,115);
    curveVertex(396,89);
    curveVertex(351,51);
    endShape(CLOSE);
    //top of right side hair
    fill(245,234,176)
    beginShape();
    curveVertex(153,105);
    curveVertex(173,129);
    curveVertex(151,181);
    curveVertex(135,224);
    curveVertex(115,147);
    curveVertex(131,119);
    endShape(CLOSE);
}
//draw first title slide: '2020 ELECTION HIGHLIGHTS'
function Title() {
    background(255);
    textAlign(CENTER);
    textSize(50);
    textStyle(BOLD);
    fill(241,59,58)
    text('2020', width/2, height/2-70);
    fill(0,86,217);
    text('ELECTION', width/2, height/2);
    fill(241,59,58);
    text('HIGHLIGHTS', width/2, height/2+70);
}
//draw last slide: 'BYE DON'
function End() {
    background(255);
    textAlign(CENTER);
    textSize(50);
    textStyle(BOLD);
    fill(0,86,217);
    text('BYE', width/2, height/2-35);
    fill(241,59,58);
    text('DON', width/2, height/2+35);
}

function draw() {
    background(255);
    //first scene is the title slide, and playing banjo tiktok music
    if (frameCount >= 0 & frameCount < 80) { 
        Title();
        if (!banjo.isPlaying()) {
            banjo.play();
        } 
    }
    //second scene is the fly buzzing around mike pence's head
    if (frameCount >= 80 & frameCount < 130) { 
        banjo.stop();
        Mike();
        Fly(X,Y);
        if (!buzz.isPlaying()) {
            buzz.play();
        }
        buzz.play();
        X+=random(-5,5); 
        Y+=random(-5,5);
        noiseParam+= noiseStep;
    }
    //third scene is kamala harris telling mike pence that she is speaking during the VP debate
    if (frameCount >= 130 & frameCount < 170) { 
        buzz.stop();
        if (!talk.isPlaying()) {
            talk.play();
        }
        Kamala(); 
    }
    //fourth scene is trump while a clip of supalonely plays 
    if (frameCount >= 170 & frameCount < 240) { 
        talk.stop();
        Trump();
        if (!loser.isPlaying()) {
            loser.play();
        } 
    }
    //fifth scene is joe biden with hail to the chief playing
    if (frameCount >= 240 & frameCount < 400) { 
        loser.stop();
        Joe();
        if (!president.isPlaying()) {
            president.play();
        } 
    }
    //last scene is the end slide with the banjo tiktok music playing
    if (frameCount >= 400 & frameCount < 460) { 
        End();
        if (!banjo.isPlaying()) {
            banjo.play();
        } 
    }
    //after the last slide, loop back to the first and continue to cycle through the frames
    if (frameCount == 460) {
        frameCount = 0;
        background(255);
    }
}

Looking Outwards 10 – Aphex Twin

https://www.bing.com/videos/search?q=aphex+twin+4&docid=608012986934038317&mid=85290F2AD34FFDF7115B85290F2AD34FFDF7115B&view=detail&FORM=VRAASM&ru=%2Fvideos%2Fsearch%3Fq%3Daphex%2Btwin%2B4%26qpvt%3Daphex%2Btwin%2B4%26FORM%3DVDRE

Aphex Twin – “4”

Eamonn Burke

This is one of my favorite electronic songs, because it seems to blur the line between repetition and randomness in rhythm.
The beat is entrancing to me, but the changes in frequency in speed also keep your attention as you listen, as well as the pauses
and extra sound effects.

There seems to be an oscillation in the background that ranges from a very high frequency to a middle range one. One top of this,
there are notes playing at a high but varying speed, which appear to slightly oscillate in amplitude themselves. The last layer is
the beat, which repeats at a high tempo, and at certain parts of the song it speeds up greatly, creating a sort of “stutter” effect.

As I said before, I think that Aphex Twin’s creative sensibilities come in using these tools to create a high energy and spontaneous
track that commands your attention and sounds different every time you hear it, because of the unpredictability of the changes in the
melodies and rhythm.

Portrait – Painting

Painting


var strokeX = 7		//horizontal size of dots
var strokeY = 7		//vertical size of dots
var size = 7		//space between dots
var portrait;		//my image
var painted = [];		//the painted 
var erased = [];		//the erased area
var erasing;		//boolen for whether or not erasing has been activated
var brushSize = 20		//defines what is "near mouse"

function preload(){
	portrait = loadImage("https://i.imgur.com/iJq4Jtv.jpg")		//loading imgur image into variable
}

function paint(){			//draw function for paint object
    fill(portrait.get(this.x,this.y))		//calling the color at the certain image coordinate
		ellipse(this.x,this.y,strokeX,strokeY)		//drawing an ellipse at that coordinate
}

function erase(){
	fill(255,241,175)
		ellipse(this.x,this.y,strokeX,strokeY)
}

function makePaint(px,py){		//constructor for paint object
p = {x:px,y:py,		
	drawfunction:paint
}
return p;
}

function makeErase(ex,ey){		//constructor for erase objecg
e = {x:ex,y:ey,
	drawfunction:erase
}
return e;
}


function setup() {

createCanvas(300, 400);
   background(255,241,175);		//beige
   noStroke();
   ellipseMode(CORNER);		//ellipses defined by "corner"

}


function draw() {

	background(255,241,175)		//beige

	for(i=0;i<painted.length;i++){		//display function for paint object
		painted[i].drawfunction()		//calling the draw function for the array of objects
}


if(mouseIsPressed){
	 for(x=0;x<=width;x+=size){		//for loop to set up dots
		for(y=0;y<=height;y+=size){
			if (nearMouse(x,y) == true){
				if(erasing == false){
					var p = makePaint(x,y)
			        	painted.push(p)
			        brush(mouseX,mouseY)
			    }
			        if(erasing == true){
			        	var e = makeErase(x,y)
			        		painted.push(e)
			        	eraser(mouseX,mouseY)
			    }
			}
		}
	}
}


	fill(128,88,43);	//brown
		rect(0,0,width,20);		//drawing the border
		rect(0,0,20,height);
		rect(0,380,width,20);
		rect(280,0,20,height)

	fill(255);		
		textSize(7);
		text('Press P and Drag to Paint',20,13);		//instructions
		text('Press E and Drag to Erase', 195,13);
		text('Press A to paint abstractly',20,391);
		text('Press R to paint realistically',190,391);
		text('b for smaller brush',120,8);
		text("B for bigger brush", 120,15);
}

function nearMouse(x,y){
	if (dist(x,y,mouseX,mouseY)<brushSize){		//if the mouse is within "brush size" of given x and y coordinates
		return true;
	}
	return false;
}

function brush(x,y){		//drawing the paintbrush
	
	push();
		rectMode(CENTER);
			fill(222,184,142);		//light brown
				rect(x,y+20,15,70);		//the handle
		ellipseMode(CENTER);
			
	if(mouseIsPressed){
		fill(portrait.get(x,y))		//fill with color of image coordinate that it is above
		}else{
			fill(0)		//fill black is not pressing
}
		ellipse(x,y-5,20,12)		//the brush
		triangle(x,y-25,x-10,y-5,x+10,y-5)
	pop();
}

function eraser(x,y){
	
	push();
		rectMode(CENTER);
			fill(245,116,240)		//pink
				rect(x,y,30,40)		//eraser shape
	pop();
}

function keyPressed (){

	if(key=="a"){
		strokeX = random(5,100)		//pick random shape of the dots, and random seperation
		strokeY = random(5,100)
		size = random(0,5)
	}

	if(key=="r"){		//shrink the dots and space between
		strokeX = 2
		strokeY = 2
		size = 2
	}

	if(key == "B"){
		brushSize +=5		//increase the brush size (more dots included in nearmouse function)
	}

	if(key == "b"){			//decrease brush size (less dots included)
		brushSize -=5
	}

	if(key == "p"){
		erasing = false		//not erasing (painting)
	}

	if(key =="e"){
		erasing = true		//erasing (not painting)
	}
}

LO – Digital Grotesque

LO- Computational Fabrication

As a fellow studier of architecture, I also admired this piece’s structural qualities. However, it seems my peer and I are taking two different scopes when admiring the project. He remarked on the delicate ornate detailing, while I find myself inspired differently. To me this project ponders a larger idea, that at one point in our future not only products, but entire environments will be digitally fabricated. I agree with my peer that the intricate detail is astounding and impressive, but I would disagree that it is the “main idea” of the work. I think that it’s actually the opposite: I see this project as attempting to ponder a massive, and extremely scary question: can an environment be digitally manufactured with a level of detail that actually makes it impossible to distinguish from a “natural environment”. Like a simulation, the detail is there not to draw attention, but to dismiss attention that might expose the environment as “fake”. For example, someone standing in an empty room knows it’s man made, because no natural environment really looks like it. In the middle of a forest, however, we don’t even consider that the environment is fake, because of the sheer amount of detail.

https://www.bing.com/videos/search?q=digital+grotesque+vimeo&&view=detail&mid=87EF57FBFB7556D6E77787EF57FBFB7556D6E777&&FORM=VRDGAR&ru=%2Fvideos%2Fsearch%3Fq%3Ddigital%2Bgrotesque%2Bvimeo%26FORM%3DHDRSC4

Project 9: Portrait

sketch

var picture;
var size = 20
var x = 0;
var y = 0;

//load image
function preload() {
    picture = loadImage("https://i.imgur.com/bOywqob.jpg");
    
}

function setup() {
    createCanvas(600, 500);
    background(255,0,255);

    //load pixels from image
    picture.loadPixels();
}

function draw() {
  //pixel colors of the image at x and y position
    var col = picture.get(x, y);
        fill(col);
        noStroke();
        rect(x, y, size);
        var xpos = mouseX - x;
        var ypos = mouseY - y;
        x += xpos / 5;
        y += ypos / 5;  
    }
function mousePressed() {
  size += 10
  
}

Project-09

sketch

I found the stock photo on imgur and experimented with the two different shapes. At first, I didn’t have noFill() for the shapes, so the circle half looked funny because there were white circles all over the place. The diamond side looked better because everything was square. I ended up putting in the noFill(), so both halves look much more similar once enough of the shapes have drawn.

SharedScreenshot 1

Image after the program has run for a few seconds

SharedScreenshot2

Image after the program runs for awhile