/*
Alice Fang
Section E
acfang@andrew.cmu.edu
Project-11-Turtle Graphics
*/
var ttl;
var r;
var g;
var b;
var state = 0;
function setup() {
createCanvas(400, 400);
background(180, 40, 80);
ttl = makeTurtle(width / 2, height / 2);
}
function mousePressed() {
if (state === 0) { // make line strokes based on mouse location
r = random(0, 256); // randomized colors
g = random(0, 256);
b = random(0, 256);
ttl.goto(mouseX, mouseY);
ttl.setWeight(random(1, 10)); // randomized stroke weight, length, angle
ttl.setColor(color(r, g, b));
ttl.penDown();
ttl.forward(random(10, 100));
ttl.right(random(30, 355));
} else if (state === 1) { // make swirlies
ttl.penUp();
ttl.goto(mouseX, mouseY);
ttl.setWeight(random(1, 4));
ttl.penDown();
swirly();
ttl.penUp();
}
}
function swirly() { // function to create swirly
for (var i = 0; i < 30; i++) {
ttl.setColor(color(240, 240, 80));
ttl.forward((30 - i) / random(2, 4));
ttl.right(random(20, 40));
}
}
function keyPressed() { // press ENTER key to change between. lines and swirlies
if (keyCode === ENTER) {
state = state + 1;
}
if (state > 1) {
state = 0;
}
}
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;}
combination
making patterns
drawing lines
only swirls
For this project, I wanted to create something simple and colorful. I was inspired by my current phone wallpaper, and I couldn’t choose between which version I liked better so I included both as potential interactions someone could have with the program.
My current phone wallpaper!
Click on the canvas to make marks, and press the ENTER key to switch between the lines and the jagged swirlies!
The ARC creates generative music by responding to touch sensors in different objects
At the South by Southwest (SXSW) festival in 2016, Deloitte Digital created an interactive space where people could use touch sensors to generate electronic music. Known as the ARC (Audience Reactive Composition), the space holds programmable objects that use sensors to adjust the amplitude, pitch, and other elements of exclusive tracks. According to DJ Baio, an electronic artist with expertise on the project, the installation is controlled using Ableton software. Ableton, which is commonly used in electronic live concerts, can be used to adjust notes, frequency, and samples of audio to create unique versions of tracks so every performance is unique. I admire this project as it allows people with no experience in the computational sound world to create their own generative music. Moreover, adopting responsive technology to make music allows endless opportunities to create that would otherwise be impossible.
/*
Dani Delgado
Section E
ddelgad1@adnrew.cmu.edu
Project 11
*/
//set global variables
var trl;
var trlSet = 1;
function poly(){
//create the first polygon to iterate
for (var i = 0; i < 6; i ++) {
trl.penDown();
trl.forward(4.5);
trl.left(60);
trl.penUp();
}
}
function poly2() {
//create the second polygon to iterate
for (var j = 0; j < 5; j++) {
trl.penDown();
trl.forward(5);
trl.left(70);
trl.penUp();
}
}
function poly3() {
//create the third polygon to iterate
for (var j = 0; j < 1; j++) {
trl.penDown();
trl.forward(6);
trl.left(180);
trl.penUp();
}
}
function poly4() {
//create the fourth polygon to iterate
for (var p = 0; p < 50; p++){
trl.penDown();
trl.forward(0.1);
trl.left(360/50);
trl.penUp();
}
}
function setup() {
//setup canvas dimensions
createCanvas(480, 400);
frameRate(20);
}
function draw() {
var set = int(trlSet);
//the following if statements creates a list of possible turtle screens
//draw the first turtle screen
//this turtle is basic, cream background and gray spiral
if (set === 1) {
background(255, 240, 230);
//create the turtle
trl = makeTurtle(width / 2, height / 2);
trl.setColor(60);
trl.setWeight(1.25);
trl.penUp();
//draw the spiral
for (var j = 0; j < mouseY / 1.25; j ++){
trl.penUp();
var dist = 1 + j * 0.7;
trl.forward(dist)
poly();
trl.left(180);
trl.forward(dist);
trl.left(180);
//rotate
trl.left(mouseX / 25);
constrain(mouseX, 0, 480);
//change the widths as the turtle increases
if (j > 100) {
trl.setWeight(1.75);
}
if (j > 125) {
trl.setWeight(2.25);
}
if (j > 150) {
trl.setWeight(2.75);
}
}
}
//draw the second turtle screen
//this turtle is slightly modified from the first
//the colors are inverted and the spacing has changed
if (set === 2) {
background(60);
//create the turtle
trl = makeTurtle(width / 2, height / 2);
trl.setColor(255, 190, 180);
trl.setWeight(1.25);
trl.penUp();
for (var j = 0; j < mouseY * 1.1; j ++){
//draw a turtle spiral
var dist = 1 + j * 0.25;
trl.forward(dist)
poly();
trl.left(180);
trl.forward(dist);
trl.left(180);
//rotate
trl.left(mouseX / 25);
constrain(mouseX, 0, 480);
//change the widths as turtle increases
if (j > 100) {
trl.setWeight(1.75);
}
if (j > 125) {
trl.setWeight(2.25);
}
if (j > 150) {
trl.setWeight(2.75);
}
}
}
//create the third turtle screen
//for this one, I changed the color mode to HSB to get a rainbow
if (set === 3) {
background(240);
//create the turtle
trl = makeTurtle(width / 2, height / 2);
//set colors
push();
colorMode(HSB, 255);
var col = 0;
trl.setWeight(1.5);
trl.penUp();
//create spiral
for (var j = 0; j < mouseY / 1.5; j ++){
trl.penUp();
var dist = 1 + j * 2;
trl.forward(dist)
col = col + 255 / (mouseY / 1.25);
trl.setColor(color(col, 255, 255));
poly();
trl.left(180);
trl.forward(dist);
trl.left(180);
//rotate
trl.left(mouseX / 20);
constrain(mouseX, 0, 480);
//make the variable weights
if (j > 100) {
trl.setWeight(2);
}
if (j > 125) {
trl.setWeight(2.5);
}
if (j > 150) {
trl.setWeight(3);
}
}
pop();
}
//create the fourth trutle screen
//this screen has multiple turtle spirals
if (set === 4) {
push();
background(60);
//create the turtle
trl = makeTurtle(width / 2, height / 2);
//set colors
colorMode(HSB, 255);
var col = 0;
trl.setWeight(1.5);
trl.penUp();
//create the first spiral
for (var j = 0; j < mouseY / 1.10; j ++){
trl.penUp();
var dist = 1 + j * 0.25;
trl.forward(dist);
col = col + 255 / (mouseY / 1.25);
trl.setColor(color(col, col, col));
poly2();
trl.left(180);
trl.forward(dist);
trl.left(180);
//rotate
trl.left(mouseX / 15);
constrain(mouseX, 0, 480);
//variable wieghts
if (j > 100) {
trl.setWeight(2);
}
if (j > 125) {
trl.setWeight(2.5);
}
if (j > 150) {
trl.setWeight(3);
}
}
pop();
//create the second turtle spiral
//this one is dashed lines and on the top left
trl = makeTurtle(0, 0);
//set colors
push();
translate(100, 100)
colorMode(HSB, 255);
var col = 0;
trl.setWeight(1.5);
trl.penUp();
//make the spiral
for (var j = 0; j < mouseY; j ++){
trl.penUp();
var dist = 1 + j * 0.5;
trl.forward(dist)
col = col + 255 / (mouseY / 1.25);
trl.setColor(color(col, col, 255));
poly3();
trl.left(180);
trl.forward(dist);
trl.left(180);
//rotate
trl.left(mouseX);
constrain(mouseX, 0, 480);
//variable widths
if (j > 100) {
trl.setWeight(2);
}
if (j > 125) {
trl.setWeight(2.5);
}
if (j > 150) {
trl.setWeight(3);
}
}
pop();
//create the third spiral
//this one is dashed lines and on the bottom right
trl = makeTurtle(0, 0);
//set colors
push();
translate(350, 300)
colorMode(HSB, 255);
var col = 0;
trl.setWeight(1.5);
trl.penUp();
//spiral draw
for (var j = 0; j < mouseY; j ++){
trl.penUp();
var dist = 1 + j * 0.5;
trl.forward(dist)
col = col + 255 / (mouseY / 1.25);
trl.setColor(color(col, col, 255));
poly3();
trl.left(180);
trl.forward(dist);
trl.left(180);
//rotate
trl.left(mouseX);
//varaible widths
if (j > 100) {
trl.setWeight(2);
}
if (j > 125) {
trl.setWeight(2.5);
}
if (j > 150) {
trl.setWeight(3);
}
}
pop();
}
//create the fifth turtle screen
//this one is a thick spiral that gets darker in the center
if (set === 5) {
push();
background(255);
//create the turtle
trl = makeTurtle(width / 2, height / 2);
//set colors
colorMode(HSB, 255);
var col = 0;
trl.setWeight(30);
trl.penUp();
//draw the spiral
for (var j = 0; j < mouseY; j ++){
trl.penUp();
var dist = 1 + j * 0.2;
trl.forward(dist)
col = col + 255 / (mouseY / 1.25);
trl.setColor(color(255, col, col));
poly4();
trl.left(180);
trl.forward(dist);
trl.left(180);
//rotate
trl.left(mouseX / 25);
constrain(mouseX, 0, 480);
}
pop();
}
}
function mousePressed() {
//this function runs trhough all of the screens
trlSet += 1;
//if you reach the last screen, it reseats to the first
if (trlSet > 5) {
trlSet = 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;}
Spirals have always given me a great deal of difficulty to figure out, so I wanted to take advantage of this project to get some practice in playing around with some turtle spirals.
There were a lot of different variations I went through, so I decided that instead of choosing and over-complicating one, I should just put them all into one program which can flip through the different iterations to explore the process and play around with each one (as I find it kinda mesmerizing to see what placing your mouse on different parts of the page will do).
first turtle screensecond turtle screen (mouse X to the left)second turtle screen (mouseX to the right)third turtle screenfourth turtle screen (mouseX to the right)fourth turtle screen (mouseX in the middle)fifth and final turtle screen
/*Julie Choi
15-104 Section E
jjchoi@andrew.cmu.edu
Project-11
*/
var shapeSize = 50;
function setup() {
createCanvas(400, 400);
background(0);
}
function mousePressed(){
//randomize angle to create different compositions
var angle = random(30, 90);
//create turtle variable
var turtle = makeTurtle(mouseX, mouseY);
// set like color to light turquoise
turtle.setColor(color(162, 215, 207));
//draw geometric composition
for(var x = 0; x < 20; x++){
turtle.penDown();
turtle.forward(shapeSize);
turtle.right(angle);
turtle.forward(shapeSize);
turtle.right(angle);
turtle.forward(shapeSize);
turtle.right(angle);
turtle.forward(shapeSize);
turtle.right(angle);
//alter angle when ever new shape is drawn
shapeSize -= 1;
turtle.right(25);
}
}
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 week’s composition project, I enjoyed the freedom that we had with the turtle graphics. My project was created after I had fun creating randomized circular geometric shapes. I used some techniques that I learned from the video lectures and the recitation.
After many clicks, my composition creates an abstract spider web.
Ryoji Ikeda is a sound artist primarily interested in generating sound tones and noise rather than instrumentals and voice. I am particularly interested in his audiovisual concert, Datamatics, which is an art project exploring making the intangible nature of data into something perceivable. Through a multisensory experience, Ikeda creates a soundscape generate based off of pure data. The soundtrack is jarring and almost hypnotic, with many layers and frequencies that create the feeling of being overwhelmed. Paired with the binary nature of the visuals, Ikeda presents a very accurate feeling of data and its presence in our lives. However, since I am viewing this work from a web page, I would like to know more about how this piece was incorporated into a physical environment and what other interactions were present within that space to enhance the communication of pure data.
/*
Mimi Jiao
wjiao@andrew.cmu.edu
Section E
Project 11
*/
var toggle = 0; //toggle between images drawn
var increment = 0; //increment for moving turtle and drawing turtle
function setup() {
createCanvas(400, 400);
background(0);
}
function draw() {
//first drawing image
if (toggle === 0) {
for (var i = 0; i < 260; i ++) {
var play = makeTurtle(cos(i) * 100 + 200, 200 + sin(i) * 100);
play.penDown();
play.setColor(color(0, 255, 0));
play.right(increment);
play.forward(increment);
}
increment += 1;
if (increment > 850) {
fill(0)
rect(0, 0, width, height);
increment = 0;
}
}
//second drawing image
if (toggle === 1) {
for (var i = 0; i < 360; i ++) {
var play = makeTurtle(width / 2, 200 + sin(i));
play.penDown();
play.setColor(color(255, 0, 0));
play.left(increment);
play.forward(increment);
}
increment ++;
}
//third drawing image
if (toggle === 2) {
for (var i = 1; i <= 800; i ++) {
var play = makeTurtle(random(.1,.65) * 2**2 * cos(PI/i)/sin(PI/i),
2**cos(PI/i)/sin(PI/i)
);
play.penDown();
play.setColor(color(0, 0, 255));
play.right(i);
play.forward(i);
}
}
//fourth drawing image
if (toggle === 3) {
for (var i = 0; i < 360; i ++) {
//increment = map(mouseX, 0, windowWidth, 0, width);
var play = makeTurtle(random(400), random(400) + sin(i));
play.penDown();
play.setColor(color(255, 0, 255));
play.left(increment);
play.forward(increment);
}
increment += 1;
}
//fifth drawing image
if (toggle === 4) {
for (var i = 1; i <= 800; i ++) {
var play = makeTurtle(.45 * 2**2 * cos(PI/i)/sin(PI/i),
2**cos(PI/i)/sin(PI/i)
);
play.penDown();
play.setColor(color(0, 255, 255));
play.right(increment);
play.forward(increment);
}
increment += 1;
if (increment > 950) {
fill(0)
rect(0, 0, width, height);
increment = 0;
}
}
//image reset back to black
if (toggle === 5) {
fill(0);
rect(0, 0, width, height);
}
}
//if mouse is pressed, toggle between the drawn images
function mousePressed() {
toggle ++;
if (toggle > 5) {
toggle = 0;
}
}
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: .005,
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 wanted to create something where you could toggle between states to see different drawings. I wanted to play with curves and spirals so I went back to mathworld.com to find some math equations.
Some process shots:
/* Rachel Lee
Section E
rwlee@andrew.cmu.edu
Project 11: Freestyle Turtles
*/
function setup() {
createCanvas(480, 480);
background(10, 50, 100);
}
function draw() {
var m = 300; // variable to be mapped
// maps mouseX position and controls scale/ how far turtle turns right
var scale = map(m, 0, mouseX, 100, 300);
// drawing first turtle (violet)
var turtle1 = makeTurtle(mouseX, mouseY);
turtle1.setColor(color(240, 185, 240, 60));
turtle1.setWeight(0.25);
for (i = 0; i < 360; i++) {
turtle1.penDown();
turtle1.right(60);
turtle1.forward(30);
turtle1.right(scale);
turtle1.forward(15);
}
// drawing second turtle (orange)
var turtle2 = makeTurtle(mouseX, mouseX);
scale = map(m, 0, mouseX, 20, 250);
turtle2.setColor(color(240, 165, 140, 150));
turtle2.setWeight(0.1);
for (i = 0; i < 100; i++) {
turtle2.penDown();
turtle2.right(60);
turtle2.forward(40);
turtle2.right(scale);
turtle2.forward(5);
}
frameRate(5); // slows down frame rate
}
// turtle graphics implementation for p5.js
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 week’s assignment, I wanted to create a turtle graphics composition that was reminiscent of a spirograph. I really enjoyed playing with these when I was younger, and was constantly excited by what kinds of mandalas would yield from the different tracing tools. This assignment was really fun, especially experimenting with the intricacies of each mark made, playing with transparencies and investigating scale.
Example composition created via changing mouseX positions
final product of wassiliscope How light frequency is translated to sound
Christopher Yamane’s “wassiliscope” is a project in which Yamane developed a telescope that translates light frequencies from the eyes to audible frequencies. I admire this because it is a fresh, original idea of something transparent to a form that you can feel and hear at the same time. I personally like how there is less of subjectivity and abstraction to this sound art because it also involves some concepts from physics. I also admire the form of the wassiliscope because of its simplicity, but translation process from sound to music is not so simple. The wassiliscope analyzes the average frequency of the light waves to the center of the telescope with a camera inside Then, the light waves are sent to the triangle wave oscillator and transfer to the head phones that are attached to the telescope. There is artist’s sensibility to the form of the wassiliscope because he made the wassiliscope look as though the telescope and the headphones are one object. There is no unnaturalness to the form although the headphones are attached to the back of the telescope. Also, the simple white color of “wassiliscope” gives a nice delicate, simple feeling.
//Jenny Hu
//Section E
//jjh1@andrew.cmu.edu
//Project 11
var myTurtle;
var startFrame;
var newWeight;
var newColor;
var randWeight;
function setup() {
createCanvas(400, 400);
background(250);
myTurtle = makeTurtle(width / 2, height / 2);
myTurtle.setColor(color(20));
myTurtle.penDown();
resetCanvas();
frameRate(10);
}
function draw() {
var step = (frameCount - startFrame)/30.0;
// timePassed();
//change the grayness of the turtle
newColor = random(0 , 70);
myTurtle.setColor(color(newColor));
//change the weight of the turtle
newWeight = random(0,1);
ink(myTurtle);
//move my turtle
myTurtle.forward(step);
myTurtle.left(16.0);
//stops, so you can admire the cute fingerprint composition
if (myTurtle.y < 100) {
myTurtle.penUp();
}
}
//reset the turtle when you click
function mousePressed(){
resetCanvas();
}
//reset the turtle
function resetCanvas() {
background(250);
startFrame = frameCount;
myTurtle.penUp();
myTurtle.goto(width / 2, height / 2);
myTurtle.penDown();
}
//changes the weight of the turtle to resemble ink
function ink(myTurtle){
randWeight = random(0 , 2);
newWeight = newWeight + randWeight;
myTurtle.setWeight(newWeight);
}
///API Below///
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 do something akin to a ‘computer’s fingerprint’. I was interested to give it the feeling of ink, which makes each print feel unique. Unlike humans where each print is different, a computer is capable of making ‘perfect’ geometries— which makes the spiral feel fitting. Each generation of this spiral is unique though, due to the random generation of both width of each stroke and tone of gray.
var turtle
var a = 5;
function setup(){
createCanvas(400,400);
background(94,69,255);
frameRate(10);
turtle = makeTurtle(random(0,width), random(0,height));
//create geometric shape
}
function draw(){
//circular geometric shape
for (var i = 0; i < 50; i++){
turtle.setColor(color(243, 231, 177));
turtle.penDown();
turtle.setWeight(.2);
turtle.right(20); //turns 100 degrees every times it loops
turtle.forward(a);
}
turtle.left(20);
a += 0.1; //the length increases
turtle.penUp();
if (mouseIsPressed){ //BIRD creating a NEST
fill(240, 77, 37) //BODY
ellipse(mouseX + 30, mouseY + 10, 50, 30);
fill(254, 225, 115); //beak
triangle(mouseX, mouseY, mouseX-5, mouseY-5, mouseX-20, mouseY+20);
fill(240, 77, 37) //HEAD
ellipse(mouseX, mouseY, 20, 20);
fill(146, 211, 203) //eye
ellipse(mouseX - 1, mouseY, 5, 5);
}
}
function mousePressed(){
turtle = makeTurtle(mouseX, mouseY);
}
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 used turtle to create a nest for each bird. Every time you click on the screen, a nest and a bird will appear. The nest’s size will eventually keep increasing to create a chaos. It was really enjoyable to experimenting with different angles and sizes.
![[OLD FALL 2018] 15-104 • Introduction to Computing for Creative Practice](../../../../wp-content/uploads/2020/08/stop-banner.png)
