## P5 Sequencer- final project

``````//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;

//C5 scale
}

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. ## 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

``````//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 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.  ## 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

``````//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 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: 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: ## 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

``````//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;

var img0url = "http://i.imgur.com/xoW2D1C.png";

}

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

}

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;
var g = theColorAtLocationXY;
var b = theColorAtLocationXY;

//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. ## project 7

``````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)