A computational musician I found to be interesting is Mari Kimura, a violinist. The project I am focusing on is Bebe, a project made performed by violin and computer. The piece was originally written in 2008, with edits made to it in 2012. From Kimura’s description of the project, it seems she used the Max computer program to play music along with her. What caught my eye (or should I say ear) is how she created the program to follow along with her in order to let her improvise. From her comments, it seems that many computer music projects she has previously worked on put the musician in a place in which they had to play exactly to the note to keep up with the computer. I think it is amazing what she accomplished and what technology can do to improvise and keep in harmony with brilliant musicians.
// Sophia S Kim
// Section C 1:30
// sophiaki@andrew.cmu.edu
// Project-11-Turtle Freestyle
var strOpt = 1;
var turtle1;
var turtle2;
function setup() {
createCanvas(480, 400);
}
function draw() {
background(175);
if (strOpt === 1) {
orangeLines();
}
if (strOpt === 2) {
redLines();
}
if (strOpt === 3) {
greenLines();
}
if (strOpt === 4) {
purpleLines();
}
}
//function for line 1 - longest line
function line1(x, y, z){
turtle1 = makeTurtle(x, y);
turtle1.setWeight(10);
turtle1.setColor(z);
turtle1.right(30);
turtle1.penDown();
for (i = 0; i < 6; i++) {
turtle1.forward(15);
turtle1.right(50);
turtle1.forward(15);
turtle1.left(50);
}
turtle1.penUp();
}
//function for line 2
function line2(a, b, n) {
turtle2 = makeTurtle(a, b);
turtle2.setWeight(10);
turtle2.setColor(n);
turtle2.left(30);
turtle2.penDown();
for (i = 0; i < 3; i++) {
turtle2.forward(15);
turtle2.left(50);
turtle2.forward(15);
turtle2.right(50);
}
turtle2.penUp();
}
//function for line 3
function line3(j, k, f) {
turtle3 = makeTurtle(j, k);
turtle3.setWeight(10);
turtle3.setColor(f);
turtle3.right(50);
turtle3.penDown();
for (i = 0; i < 4; i++) {
turtle3.forward(15);
turtle3.right(50);
turtle3.forward(15);
turtle3.left(50);
}
turtle3.penUp();
}
//function for line 4
function line4(l, m, p) {
turtle4 = makeTurtle(l, m);
turtle4.setWeight(10);
turtle4.setColor(p);
turtle4.right(-50);
turtle4.penDown();
for (i = 0; i < 4; i++) {
turtle4.forward(15);
turtle4.right(50);
turtle4.forward(15);
turtle4.left(50);
}
turtle4.penUp();
}
//function for line 5
function line5(o, h, q) {
turtle5 = makeTurtle(o, h);
turtle5.setWeight(10);
turtle5.setColor(q);
turtle5.right(-80);
turtle5.penDown();
for (i = 0; i < 5; i++) {
turtle5.forward(15);
turtle5.right(50);
turtle5.forward(15);
turtle5.left(50);
}
turtle5.penUp();
}
//draws white lines, pink shapes, and green block in background
function orangeLines() {
//makes the green block of color in background
fill("GREEN");
noStroke();
beginShape();
vertex(0, 150);
vertex(480,75);
vertex(480, 400);
vertex(0, 400);
endShape(CLOSE);
//line color orange
line1(350, 30, "ORANGE");
line2(50, 330, "ORANGE");
line3(370, 270, "ORANGE");
line4(50, 100, "ORANGE");
line5(190, 190, "ORANGE");
}
//draws pink lines, white shapes, and blue block in background
function redLines() {
//makes the blue block in background
fill("BLUE");
noStroke();
beginShape();
vertex(0, 140);
vertex(480, 200);
vertex(480, 400);
vertex(0, 400);
endShape(CLOSE);
//line color red
line1(20, 240, "RED");
line2(250, 90, "RED");
line3(100, 90, "RED");
line4(340, 360, "RED");
line5(300, 270, "RED");
}
//draws green lines, yellow shapes, and pink block in background
function greenLines() {
//makes pink block in background
fill(255, 125, 125);
noStroke();
beginShape();
vertex(0, 150);
vertex(420, 0);
vertex(480, 0);
vertex(480, 400);
vertex(0, 400);
endShape(CLOSE);
//draw green line
line1(60, 250, "GREEN");
line2(370, 350, "GREEN");
line3(390, 50, "GREEN");
line4(50, 90, "GREEN");
line5(220, 250, "GREEN");
}
//draws orange lines, blue shapes, and yellow block in background
function purpleLines() {
//makes orange block in background
fill("GOLDENROD");
noStroke();
beginShape();
vertex(0, 0);
vertex(100, 0);
vertex(480, 300);
vertex(480, 480);
vertex(0, 480);
endShape(CLOSE);
//draws purple line
line1(350, 50, "PURPLE");
line2(120, 90, "PURPLE");
line3(90, 190, "PURPLE");
line4(350, 380, "PURPLE");
line5(220, 200, "PURPLE");
}
function mousePressed() {
strOpt ++; // mouse is pressed every time changes the lines & line colors
if (strOpt > 4) {
strOpt = 1;
}
}
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;}
Starting this project, I really wanted crinkle-cut fries. Also, in one of the studio classes I am taking for design, we talked about color theory, so I decided to combine both the “crinkle-cut fries” idea and color theory into this project. It was definitely really fun to experiment with turtles.
/*
Alexandra Kaplan
aekaplan@andrew.cmu.edu
Section C
Project - 11
*/
function setup() {
createCanvas(480, 480);
background(250, 90, 15);
}
function draw() {
var ttl1 = makeTurtle(240,240);
var ttl2 = makeTurtle(240,240);
var ttl3 = makeTurtle(width + width / 2, 240);
var ttl4 = makeTurtle(width, 245);
var ttl5 = makeTurtle(width * 2, 240);
var tt2ColR = map(mouseY, 0, height / 2, 200, 50);
// sand 1
ttl1.penDown();
ttl1.setWeight(10)
col1 = color(250, 220, 200);
ttl1.setColor(col1);
for(var i = 0; i < 10; i++){
ttl1.forward(-mouseY / 4);
ttl1.right(-mouseX /50);
ttl1.left(mouseX/100)
}
//sky
ttl2.penDown();
ttl2.setWeight(20);
col2 = color(tt2ColR, 150, 225);
ttl2.setColor(col2);
for(var j = 0; j < 200; j++){
ttl2.forward(mouseY / 4);
ttl2.right(-mouseX / 50);
}
//sand 3
ttl3.penDown();
ttl3.setWeight(10);
col3 = color(250, 230, 190);
ttl3.setColor(col3);
for(var i = 0; i < 10; i++){
ttl3.forward(-mouseY / 4);
ttl3.right(-mouseX / 50);
ttl3.left(mouseX / 100)
}
//sand 2
ttl4.penDown();
ttl4.setWeight(10);
col4 = color(250, 230, 200);
ttl4.setColor(col4);
for(var i = 0; i < 10; i++){
ttl4.forward(-mouseY / 5);
ttl4.right(-mouseX / 50);
ttl4.left(mouseX / 100);
}
ttl5.penDown();
ttl5.setWeight(10);
col5 = color(250, 220, 200);
ttl5.setColor(col5);
for(var i = 0; i < 10; i++){
ttl5.forward(-mouseY / 4);
ttl5.right(-mouseX / 50);
ttl5.left(mouseX / 100);
}
}
function keyPressed(){
background(240, 90, 15);
}
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;}
For this project, I wanted to focus on mouse interactivity and how turtles could be used to create an overall picture. Using a few different turtles, I was able to make a desert landscape with different colors of sand and a sun that can be included depending on the person using it.
earlier iterationfinal iteration with crescent sunFinal iteration
// Sophie Chen
// Section C
// sophiec@andrew.cmu.edu
// Project 11
var turtle;
function setup() {
createCanvas(480, 480);
background(0, 0, 0);
}
function draw() {
turtle = makeTurtle(width / 2 + 50, height + 50)
//gradient color
var g = map(mouseY, 0, height, 255, 0);
var r = map(mouseY, 0, width, 10, 155);
var col = color(r, g, 200);
turtle.setColor(col);
turtle.setWeight(2);
var navY = map(mouseY, 0, 480, 480, 0); // navigation Y to scale of canvas
var navX = map(mouseX, 0, 480, 480, 0); // navigation X to scale of canvas
// not visible, sets distance between blobs
for (var i = 0; i < 100; i++) {
turtle.penUp();
turtle.forward(navY / 2);
turtle.left(90.4);
turtle.forward(navX);
turtle.penDown();
// blobs along path of previous for loop
for (var j = 0; j < 100; j++){
turtle.setWeight(0.3);
turtle.right(200.5);
turtle.forward(100);
turtle.right(19.1);
}
}
}
/////////////////////////////////////////////
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;}
For this project I wanted to use turtle graphics to create something that allows the user to draw something that looks 3d, made up of the 2d patterns. I tested out a lot of different variations and ended up liking this one the most (the slower you move the mouse, the smoother the gradient). Overall I had a lot of fun with this, I’m definitely a lot more comfortable with turtle graphics now.
different iterationanother different iterationfinal version
While looking at various computational instruments, I ended up on a small tangent that lead to the discovery of not a person, but a tool. Specifically, that tool was WolframTones, created 2005 by Wolfram Research, based on research from the 1980s. I found it interesting in that unlike what I looked at during week 4, this was a tool that was more centered around what I suppose you could call the formality of music. It allows for control over tempo, pitch mapping, and instrumentation. As an extra blessing or curse, the site had so many different options that one could really engross themselves. There are already hundreds of premade musical scales, instruments, and instrument roles. It’s crazy.
WolframTones is powered by Wolfram Automata. Basically, there’s a square that’s either black or white and it’ll gontinue to grow based on a specific rule, generating complexity. There are 256 rules, and Stephen Wolfram’s experiment went through all those rules. Hopefully this image explains it a little better.
The 256 Rules
WolframTones takes these rules and flips them sideways, and uses them as notes.
The above video is an example of someone using the website and their generated music.
// Catherine Coyle
// ccoyle@andrew.cmu.edu
// Section C
// Project 11 - Composition
//var numFlowers = Number(prompt('how many flowers?'));
var numFlowers = 1;
var pastNumFlow = 1;
var firstFlower;
var flowers = [];
function setup() {
// put setup code here
createCanvas(480,480);
//print(numFlowers);
firstFlower = makeFlower();
flowers.push(firstFlower);
}
function draw() {
background(177, 237, 196);
for(var i = 0; i < numFlowers; i++) {
flowers[i].draw();
}
fill(56, 112, 90);
textSize(20);
text('# of Flowers:', width / 2 - 50, height - 50);
noStroke();
fill(32, 76, 72);
textSize(25);
text('← ' + numFlowers + ' →', width / 2 - 40, height - 10);
}
function keyPressed() {
if (keyCode == RIGHT_ARROW) {
pastNumFlow = numFlowers;
numFlowers++;
newFlower = makeFlower();
flowers.push(newFlower);
}
if ((keyCode == LEFT_ARROW) & (numFlowers > 1)) {
pastNumFlow = numFlowers;
numFlowers -= 1;
}
}
function makeFlower() {
var f = {
x: random(width),
y: random(height),
c: color(random(255), random(255), random(255)),
petals: random(30, 200),
r: random(5, 50),
ang: random(100, 360),
draw: drawFlower,
}
return f;
}
function drawFlower() {
currFlow = makeTurtle(this.x, this.y);
currFlow.setColor(this.c);
for(var i = 0; i < this.petals; i++) {
currFlow.forward(this.r);
currFlow.right(this.ang);
}
}
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;}
I kind of had an idea for an abstract garden for this project. You use the arrow keys to control the amount of ‘flowers’ (randomized spirals) on the screen. I made an object to store the properties of all the spirals and then drew them with turtles. It’s really cool and interesting to see what kinds of patterns the program can come up with!
// Kevin Thies
// Section C
// kthies@andrew.cmu.edu
// Project-11- Turtle Freestyle
var ttl; // turtle
function setup() {
// style
createCanvas(480, 480);
background(4, 20, 45);
// make the turtle with starting values
ttl = makeTurtle(width/2, height/2);
ttl.penDown();
ttl.setWeight(6);
ttl.setColor("yellow");
ttl.face(0);
}
function draw() {
background(4, 20, 45, 20);
// firefly
// move
ttl.forward(5);
// rotate
// random, flying-insect-like movement
ttl.right(map(noise(ttl.x, ttl.y), 0, 1, -180, 180));
// if mouse over jar, make it move towards mouse
if(mouseX < 360 & mouseX > 120 && mouseY > 90 && mouseY < 390) {
ttl.turnToward(mouseX, mouseY, 40);
}
// if near jar wall,
if (ttl.x > 350 || ttl.x < 130 || ttl.y > 380 || ttl.y < 100) {
// turn towards center
ttl.turnToward(width/2, height/2, 180);
ttl.forward(10);
// teleport back into jar
if (ttl.x > 350) {
ttl.goto(350, ttl.y);
print("turtle too far right");
} else if (ttl.x < 130) {
ttl.goto(130, ttl.y);
print("turtle too far left");
} else if (ttl.y > 380) {
ttl.goto(ttl.x, 380);
print("turtle too far down");
} else if (ttl.y < 85) {
ttl.goto(ttl.x, 100);
print("turtle too far up");
}
}
// firefly light
strokeWeight(0);
fill(255, 255, 0, 40);
ellipse(ttl.x, ttl.y, 40, 40);
// jar (dimensions are x 120 to 360 y 90 to 390)
fill(0, 0, 0, 0);
rectMode(CENTER);
stroke(255);
strokeWeight(2);
rect(width/2, height/2, 240, 300, 20);
fill(173, 151,64);
strokeWeight(0);
rect(width/2, 73, 240, 30, 20);
}
//////////////////////////////////////////////////////////////////////////
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;
}
I’ve done projects making “flying bugs in a jar” before, and I decided it would be a good time to try and make one with turtles. Getting the turtle to stay inside the jar was more challenging that I expected, mostly because of the way I made the turtle move. However, it responds to the cursor while it’s inside the jar. I suppose the way to expand on this project would to have multiple fireflies in the jar that have some level of collision so that they could act like a swarm.
I would add screenshots but they’d look just like the program above.
var star;
var x;
function setup() {
createCanvas(480, 480);
}
function draw() {
background(0);
mouseX = constrain(mouseX, 0, width);
mouseY = constrain(mouseY, 0, height);
star = makeTurtle(mouseX, mouseY);
star.setColor("yellow");
star.setWeight(1);
x = map(mouseX, 0, width, 0, 10000);
for (var i = 0; i < 300; i++) { // draw multiple
for (var j = 0; j < 5; j ++) { // draw star
star.penDown();
star.forward(20);
star.right(144);
}
star.penUp();
star.face(x * i / 300); // draw in a line
star.forward(i); // create spaces between stars
}
}
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;}
For this project, I wanted to create a composition surrounding the movement of my mouse. I wanted to create a shooting star that moves towards your mouse, which is similar to what you see in the first picture below. From there, I wanted to make it seem like the shooting star was falling into a hole once it arrives to the mouse’s location, which is what you see in the second picture. Lastly, I wanted to create multiple shooting stars falling into a hole.
In order to create this illusion, I had to focus on creating spirals using turtle graphics. When you move the mouse across the width of the canvas, you see that the stars form a spiral around the mouse’s location. Although you don’t see the first star move towards the mouse’s location like a shooting star, when you take screenshots like the ones below, it creates the illusion of the concept/idea that I wanted to create.
For this week’s looking outwards, the algorithmic music project that I chose is Andrius Sarpovas’ Kinetic Generative Music Installation. Through transposition and conversion, the data of half a million people is turned into energy impulses that produce a complex acoustic variation. I admire his creativity of thinking of turning statistics into a musical composition. I resonate with his belief that music is not merely songs that we usually listen to but it is also the rhythmic patterns, the space, the melody or the harmony that we encounter in our daily life. I think that turning different people’s consciousness into music is meaningful because individual’s own presence is represented in a very unique way. The project consists of metal, wood, plastic and glass which are the sources of the sounds. Aluminium bars are used to create a lasting and rich harmony. The segments of the installation were hung on wires through which the impulses were transferred to the sound activator and the damper. The algorithm of transposition and conversion turned statistics into impulses which were distributed to the segments to make sounds. These sounds created are rather relaxing, which has been achieved through the artist’s work on the the algorithm and the mechatronics. This shows that the artist sends a message to his audience that technology can not only be used to create solitude for people but also make the solitude comforting.
/*Kevin Riordan
Section C
kzr@andrew.cmu.edu
project_11*/
//details 1 changes how detailed it is horizontally, width gives pixel perfect color
//details 2 changes how detailed it is vertically, 1 gives pixel perect change
var details1 = 65;
var details2 = 5;
function preload() {//i have 2 background images, farnham jahanian or subra suresh
var myImageLink = "https://i.imgur.com/PhOrH0d.jpg";
//var myImageLink = "https://i.imgur.com/WNxbkQj.jpg";
myImage = loadImage(myImageLink);
}
function setup() {
createCanvas(480,480);
background(0);
myImage.loadPixels();//loading pixels in to use get later
}
function draw() {
var t = makeTurtle(0,0);//make my turtle 🙂
t.doTheStuff(width / details1,details2);//watch it do the stuff 🙂
}
//colorChangeDist is how often it changes color, is equal to details1
function doTheStuff(colorChangeDist,rowSize){
var pixelColor;
this.setWeight(details2);
var increment = colorChangeDist;
var numRows = height / rowSize;
for(var k = 0; k < numRows; k++){//for loop to iterate vertically
for(var i = 0; i < width; i += increment){//for loop for the odd rows
pixelColor = myImage.get(this.x,this.y);
this.setColor(color(pixelColor));
this.forward(increment);
}
this.right(90);
this.forward(rowSize);
this.right(90);//turns it back after moving it to the next row position
for(var j = width; j > 0; j -= increment){//for loop for the even rows
pixelColor = myImage.get(this.x,this.y);
this.setColor(color(pixelColor));
this.forward(increment);
}
this.left(90);
this.forward(rowSize);
this.left(90);//turns it back after moving it to the next row position
}
}
//turtle stuff
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, doTheStuff: doTheStuff};//added a function about doing stuff
return turtle;
}
I wanted to make the turtle draw out an underlying image for my project. By making two variables for how detailed I wanted the drawing to be, detail1 and detail2, I can control how clear or blurry the picture is. The images look really cool at a medium amount of detail level, and I like the way farnham and subra look when drawn by turtles. Overall, this project helped me better understand how functions work together and I had alot of fun with it.
Farnham at lowish amount of detailSubra at medium amount of detail
![[OLD FALL 2018] 15-104 • Introduction to Computing for Creative Practice](../../../../wp-content/uploads/2020/08/stop-banner.png)
