P5 Sequencer- final project

finalproject

//Owen Fox
//Final project
//olf@andrew.cmu.edu
//Section C

var squares = [];
var moveSquares = [];
var sounds = [];
var noteC;
var noteD;
var noteE;
var noteF;
var noteG;
var noteA;
var noteB;
var noteHC;
var forward = 0;

function preload() {
    //C5 scale
    noteC = loadSound("https://courses.ideate.cmu.edu/15-104/f2016/wp-content/uploads/2016/12/C.wav");
    noteD = loadSound("https://courses.ideate.cmu.edu/15-104/f2016/wp-content/uploads/2016/12/D.wav");
    noteE = loadSound("https://courses.ideate.cmu.edu/15-104/f2016/wp-content/uploads/2016/12/E.wav");
    noteF = loadSound("https://courses.ideate.cmu.edu/15-104/f2016/wp-content/uploads/2016/12/F.wav");
    noteG = loadSound("https://courses.ideate.cmu.edu/15-104/f2016/wp-content/uploads/2016/12/G.wav");
    noteA = loadSound("https://courses.ideate.cmu.edu/15-104/f2016/wp-content/uploads/2016/12/A.wav");
    noteB = loadSound("https://courses.ideate.cmu.edu/15-104/f2016/wp-content/uploads/2016/12/B.wav");
    noteHC = loadSound("https://courses.ideate.cmu.edu/15-104/f2016/wp-content/uploads/2016/12/highc.wav");
}

function setup() {
    createCanvas(480, 480);
    background("red");
    frameRate(4);
    sounds = [noteC,noteD,noteE,noteF,noteG,noteA,noteB,noteHC];
    //fills an array of each individual square and gives each a sound from C to high c
    for (var x = 0; x < 8; x ++) {
        for (var y = 0; y < 8; y ++) {
            squares.push(Square(width/10 * x + width/10, height/10 * y + height/10, width/10, height/10,sounds[y]));
        }
    }

    //fills an array of each moving square
    for (var i = 0; i < 8; i ++) {
        moveSquares.push(MoveSquare(width/10,height/10 * i + height/10, width/10, height/10));

    }
}



function draw() {

    //draws each individual square
    for (var i = 0; i < squares.length; i ++) {
        squares[i].drawS();
    }

    //draws each moving square, and pushes them forward every frame
    for (var i = 0; i < moveSquares.length; i ++) {
         moveSquares[i].x = forward + (width/10);
         if((moveSquares[i].x)/(width/10) >= 9) {
            moveSquares[i].x = width/10;
         }
         moveSquares[i].drawMS();
         }

    //draws containing grid
    for(var i = 0; i < 9; i ++) {
      strokeWeight(8);
      stroke("white");
      line(width/10 * i + width/10,height/10,width/10 * i + width/10,height- height/10);
      line(width/10,height/10 * i + height/10,width - width/10,height/10 * i + height/10);
    }

    //if the x position of the moving squares is the same as a pink square that has been clicked on, a sound plays
    for(var w = 0; w < squares.length; w ++) {
        if((squares[w].x == forward) & (squares[w].on == true)) {
            squares[w].play();
        }
    }
    //increases forward variable, which controls moving square postion
    forward += width/10;
    if ((forward/(width/10)) >= 8) {
        forward = 0;
    }
}

function mousePressed() {
    for(var i = 0; i < squares.length; i ++) {
        squares[i].squareS();
    }
}

function Square(squareX,squareY,squareW,squareH,sound) {
    var square = {
    x: squareX,
    y: squareY,
    w: squareW,
    h: squareH,
    color: "lightPink",
    drawS: drawSquare,
    squareS: squareState,
    on: false,
    s: sound,
    play: soundPlay
    };
    return square
}

function drawSquare() {
    fill(this.color);
    rect(this.x,this.y,this.w,this.h);
}

//when the user clicks on a square, that square is set to "on"
function squareState() {
    println("mouse pressed");
        if((mouseX > this.x) & (mouseX < (this.x + this.w)) && (mouseY > this.y) && (mouseY < (this.y + this.h))) {
            this.color = "red";
            this.on = true;
        }
}

function MoveSquare(soundX,soundY,soundW,soundH) {
    var moveSquare = {
    x: soundX,
    y: soundY,
    w: soundW,
    h: soundH,
    drawMS: drawmoveSquare,
    };
    return moveSquare
}

function soundPlay() {
    this.s.play();
}

function drawmoveSquare() {
    fill("lightBlue");
    rect(this.x,this.y,this.w,this.h);
}

For my final project, I made a sequencer. To use: click on a pink square, and as the blue bar passes over it, it will play a note. From top to bottom, each row of the sequencer plays one note of a C5 scale.

looking outwards 12

The first project that influenced the design of my final project is the Trippy H music generator. Trippy H was a minigame that came with the original gameboy camera, and it allowed players to create their own music using a rudimentary synthesizer.

I admire this project for its simplicity but also its versatility. The visual and functional design of this program inspired a lot of my project proposal.

another piece that inspired my project, is this example of early electronic music, by Jean Jacques Perrey.

i love the chirpy sounds on this record, and how innovative it was. this album and song came out in 1968, and a lot of interesting techniques and it pioneered lots of interesting electronic musical techniques and styles. This record has the sound profile that I want to emulate in my project.

 

Final Project Proposal

For my final project I want to create a sequencer in p5 js. A sequencer is basically a device that stores and plays a sequence of notes or sounds. My basic idea right now is to have different kinds of sound waves that the user can choose to turn on or off at different times, and to have the user be able to control the pitch of the sound, and the speed of the sequence.

unnamed

looking outwards 11

 

Wendy Carlos (born 1939) is an American electronic composer. Her has worked on a variety of projects, from solo albums to film scores, and assisted in the development of the first Moog synthesizer.

In Switched-on Bach(1968), one of her best known albums, Carlos recorded a series of Bach’s most famous concertos using synthesizers. At a time when electronic music was largely experimental and technical, this album helped popularize the synthesizer and electronic music to a wider audience.

I really like electronic music, especially early electro-pop, and Wendy Carlos definitely laid the groundwork for every popular electronic record for the next 50 years. In general, I like artists who can balance making interesting work while also being accessible to everyone.

(If you’re interested in checking out her work, some of her other famous pieces include, film scores for both the Original Tron and A Clockwork Orange. Her website is: wendycarlos.com)

owen fox project 11

 

turtle

//Owen Fox
//olf@andrew.cmu.edu
//Section C
//Project Week 11

var progress = 0;

//color values
var r = 0;
var g = 0;
var b = 0;
//constant
var c = 50;
//where the gradient stops and the color UI begins
var ylimit = 90;

function setup() {
    createCanvas(400,400);
    background("white");
}


function draw() {

   //draws a turtle square at every 3 by 3 pixels
    for (var x = 0; x < width/3; x ++) {
        for (var y = 0; y < width/3; y ++) {
            if (y < ylimit) {
            turtleSquare(r - x,g - x,b,x*3,y*3);
            }
        }
    }

    //prints colot values as text
    textAlign(CENTER);
    textSize(14);
    fill("white");
    text("red:" + r, c, height- c);
    text("green:" + g, width/2, height- c);
    text("blue:" + b, width - c, height- c);

}

function mouseClicked() {
    //whenever a user clicks on the three text graphics created in draw, they will change the value of the color by + 10
    if ((mouseX > c/2) & (mouseX < c + c/2) && (mouseY > height - c - c/3) && (mouseY < height - (c - c/3))) {
        background("white");
        r += 10;
    }
    if ((mouseX > width/2 - c/2) & (mouseX < width/2 + c/2) && (mouseY > height - c - c/3) && (mouseY < height - (c - c/3))) {
        background("white");
        g += 10;
    }
    if ((mouseX > width - c - c/2) & (mouseX < width - c/2) && (mouseY > height - c - c/3) && (mouseY < height - (c - c/3))) {
        background("white");
        b += 10;
    }
}

function turtleSquare(r,g,b,x,y) {
    //uses turtle graphics to draw a 3 by 3 square
    var turtle = makeTurtle(x,y);
    turtle.setColor(color(r,g,b))
    turtle.setWeight(3);
    turtle.penDown();
    turtle.forward(3);
    turtle.right(90);
    turtle.forward(3);
    turtle.right(90);
    turtle.forward(3);
    turtle.right(90);
    turtle.forward(3);
    turtle.penUp();
}



function turtleLeft(d) {
    this.angle -= d;
}


function turtleRight(d) {
    this.angle += d;
}


function turtleForward(p) {
    var rad = radians(this.angle);
    var newx = this.x + cos(rad) * p;
    var newy = this.y + sin(rad) * p;
    this.goto(newx, newy);
}


function turtleBack(p) {
    this.forward(-p);
}


function turtlePenDown() {
    this.penIsDown = true;
}


function turtlePenUp() {
    this.penIsDown = false;
}


function turtleGoTo(x, y) {
    if (this.penIsDown) {
      stroke(this.color);
      strokeWeight(this.weight);
      line(this.x, this.y, x, y);
    }
    this.x = x;
    this.y = y;
}


function turtleDistTo(x, y) {
    return sqrt(sq(this.x - x) + sq(this.y - y));
}


function turtleAngleTo(x, y) {
    var absAngle = degrees(atan2(y - this.y, x - this.x));
    var angle = ((absAngle - this.angle) + 360) % 360.0;
    return angle;
}


function turtleTurnToward(x, y, d) {
    var angle = this.angleTo(x, y);
    if (angle < 180) {
        this.angle += d;
    } else {
        this.angle -= d;
    }
}


function turtleSetColor(c) {
    this.color = c;
}


function turtleSetWeight(w) {
    this.weight = w;
}


function turtleFace(angle) {
    this.angle = angle;
}


function makeTurtle(tx, ty) {
    var turtle = {x: tx, y: ty,
                  angle: 0.0,
                  penIsDown: true,
                  color: color(128),
                  weight: 1,
                  left: turtleLeft, right: turtleRight,
                  forward: turtleForward, back: turtleBack,
                  penDown: turtlePenDown, penUp: turtlePenUp,
                  goto: turtleGoTo, angleto: turtleAngleTo,
                  turnToward: turtleTurnToward,
                  distanceTo: turtleDistTo, angleTo: turtleAngleTo,
                  setColor: turtleSetColor, setWeight: turtleSetWeight,
                  face: turtleFace};
    return turtle;
}

uses small turtle squares to create a user generated gradient.

clicking on the color labels changes their value.

gradient-2gradient-1

Owen Fox Looking Outwards 10

Lorna, 1984, by Lynn Hershman Leeson, was a pioneering work in interactive video art. Participants controlled the actions of an agoraphobic woman named Lorna, and could observe and influence the details of her life through the videodisk interface. I like the piece because I find it a little unsettling, early video art tends to have that effect, and Lorna accentuates this by creating a sense of voyeurism. I find the multiple endings to the piece interesting as well: Lorna can either destroy the television set, commit suicide, or move to Los Angeles, a set of options which ranges from amusingly strange to profoundly upsetting.
Lynn Hershman Leeson is a famous creator of all sorts of art, but she’s mainly known for art with a focus on the interactive, she’s one of the progenitors of the entire field. Her work focuses on the relationship between watching and being watched, and also on the issue of women’s rights: many of her films and art pieces are about the struggles women face in the art world and in the world at large. She works in both San Francisco and New York City.

Lorna, and her other work, can be found here.

Owen Fox Project 10

landscape

//Owen Fox
//olf@andrew.cmu.edu
//Section C
//Project 10

//initialize movement variable
var a = 0;

function setup() {
    createCanvas(600,400);
    background(255);
    //fill canvas with green turtle squares of varying shades of green
    for (var x = 0; x < width; x += 4) {
        for (var y = 0; y < height; y += 4) {
        var c = color(random(50),random(255),random(50));
        turtlePixel(x,y,c);
        }
    }

    frameRate(48);
}

function draw() {
   //draw new turtle squares in sweeping diagonals across the canvas
    for(var y1 = 0; y1 < height; y1 += 4) {
        var c1 = color(random(50),random(255),random(50));
        turtlePixel(a * 4,y1,c1);
        a = a + 1;
        //resets animation when a is too large
        if(a * 4 > width) {
        a = 0;
        }
    }

}

function turtlePixel(x,y,c) {
var turtle = makeTurtle(x,y);
turtle.setWeight(4);
turtle.setColor(c);
turtle.penDown();
turtle.forward(4);
turtle.right(90);
turtle.forward(4);
turtle.right(90);
turtle.forward(4);
turtle.right(90);
turtle.forward(4);
turtle.penUp();

}

function turtleLeft(d) {
    this.angle -= d;
}


function turtleRight(d) {
    this.angle += d;
}


function turtleForward(p) {
    var rad = radians(this.angle);
    var newx = this.x + cos(rad) * p;
    var newy = this.y + sin(rad) * p;
    this.goto(newx, newy);
}


function turtleBack(p) {
    this.forward(-p);
}


function turtlePenDown() {
    this.penIsDown = true;
}


function turtlePenUp() {
    this.penIsDown = false;
}


function turtleGoTo(x, y) {
    if (this.penIsDown) {
      stroke(this.color);
      strokeWeight(this.weight);
      line(this.x, this.y, x, y);
    }
    this.x = x;
    this.y = y;
}


function turtleDistTo(x, y) {
    return sqrt(sq(this.x - x) + sq(this.y - y));
}


function turtleAngleTo(x, y) {
    var absAngle = degrees(atan2(y - this.y, x - this.x));
    var angle = ((absAngle - this.angle) + 360) % 360.0;
    return angle;
}


function turtleTurnToward(x, y, d) {
    var angle = this.angleTo(x, y);
    if (angle < 180) {
        this.angle += d;
    } else {
        this.angle -= d;
    }
}


function turtleSetColor(c) {
    this.color = c;
}


function turtleSetWeight(w) {
    this.weight = w;
}


function turtleFace(angle) {
    this.angle = angle;
}


function makeTurtle(tx, ty) {
    var turtle = {x: tx, y: ty,
                  angle: 0.0,
                  penIsDown: true,
                  color: color(128),
                  weight: 1,
                  left: turtleLeft, right: turtleRight,
                  forward: turtleForward, back: turtleBack,
                  penDown: turtlePenDown, penUp: turtlePenUp,
                  goto: turtleGoTo, angleto: turtleAngleTo,
                  turnToward: turtleTurnToward,
                  distanceTo: turtleDistTo, angleTo: turtleAngleTo,
                  setColor: turtleSetColor, setWeight: turtleSetWeight,
                  face: turtleFace};
    return turtle;
}

originally my idea was like this:

20161104_233413

where random party people, pets and decorations would be generated, but that was too hard and I gave up.

I decided to make something vaguely pointillist instead, because I figured that would simplify the coding process.

heres my brainstorm that’s closer to the finished product:

20161104_233446

Owen Fox Looking Outwards 9

In this post I’ll be looking at this Gerhard Richter painting, entitled 4900 colors, from this Looking Outwards post. in the original post, the author pointed out that even though every color in this piece was chosen at random, the painting still seems to evoke something. I agree, and I think that the way people can find patterns in things that are totally random is really interesting. In this painting in particular, the white squares look like the outline of some sort of object to me, and I think that by curating random elements so that some of them contrast in neat ways with eachother, artists can create very evocative works of art through random processes.

I also think it’s interesting that this piece, with each square painted at random, is indistinguishable from paintings where the artist chose colors deliberately. This kind of serialized art could potentially be made without an artist at all, and that’s cool to see in a very ego-driven medium.

Richter’s work can be found here.

Owen Fox project 9

customportrait

//Owen Fox
//olf@andrew.cmu.edu
//Section C
//Project week 9

var face0;
var x = 0;
var y = 0;
var r1 = 128;
var r2 = 255;
var g1 = 0;
var g2 = 230;
var b1 = 0;
var b2 = 230;

function preload() {
    //loads image of roommate's face
    var img0url = "http://i.imgur.com/xoW2D1C.png";
    face0 = loadImage(img0url);

}


function setup() {
    createCanvas(410, 804);
    background(0);
    face0.loadPixels();

}

function draw() {

    customPixel(x,y,face0,r1,g1,b1,r2,g2,b2);

    x = x + 10;
    //resets x to 0 after each line
    if (x > width) {
    x = 0;
    y = y + 10;
    }
    //when the progression reaches the bottom of the page, restarts and chooses a new random color pallete
    if (y > height) {
    clear();
    background(0);
    x = 0;
    y = 0;
    r1 = random(0,100);
    g1 = random(0,100);
    b1 = random(0,100);
    r2 = random(101,255);
    g2 = random(101,255);
    b2 = random(101,255);
    }



}

function customPixel(px,py,img,redstart,redstop,greenstart,greenstop,bluestart,bluestop) {

    //based on example code
    this.px = px;
    this.py = py;

    //gets the color of a given pixel of the image, then creates variables for each rgb value
    var theColorAtLocationXY = img.get(px, py);
    var r = theColorAtLocationXY[0];
    var g = theColorAtLocationXY[1];
    var b = theColorAtLocationXY[2];

    //maps natural colors to a monochromatic color pallete, or any colors assigned to the function
    red = map(r,0,255,redstart,redstop);
    green = map(g,0,255,greenstart,greenstop);
    blue = map(b,0,255,bluestart,bluestop);

    //draws each circle
    noStroke();
    fill(red,green,blue);
    ellipse(px, py, 10, 10);

}

draws a series of colored circles based on a picture taken of my roommate. When the circle progression gets to the bottom the program restarts, this time with a new set of colors.

 

ex1

project 7

curve

var x = [];
var y = [];
var con = 0;
var mult = 1;
var col = [];
var rectX = 0;
var rectY = 25;
var rpY;

function setup() {
    createCanvas(400, 425);
    rpY = height - rectY;
}

function draw() {
	background("lightPink");
  strokeWeight(.5);
  for (var i = 0; i < width; i ++) {
  var term = 12 * con * cos(i) * sin(i);
  x[i] = term * cos(i);
  y[i] = term * sin(i);
  line(x[i] + width/2,y[i] + height/2,x[i+1] + width/2,y[i+1] + height/2);
  }
  con = mult * con + 1;
  if (con > 500) {
  con = mult * con + 2;
  }
  if(con > 1000) {
  con = mult * con + 3;
  }
  if (con > 6000) {
  con = mult * con + 50;
  }
  if (con > 10000) {
  con = 0;
  }
  println(con);
  fill("black")

  rect(rectX,rpY,10,25);
}

function mouseDragged() {
  rectX = mouseX;
  if (rectX > width - 10) {
  rectX = width - 10;
  }
  if (rectX < 0) {
  rectX = 0;
  }
  mult = rectX/50;

}

structured around an astroid radial curve

move slider to adjust speed (epilepsy warning for higher settings, imo)