Category: Section E

rmanagad-project11-sectionE-Turtle Graphics

sketch

//Robert Managad
//Section-E
//rmanagad@andrew.cmu.edu
//Project 11 -- Turtle Graphics

var turtleWormA;



function setup() {
	createCanvas(400, 400);
	
}

function draw() {
	var mil = millis(); //use of milliseconds an automatic rotation.
	background(230, 201, 148);

	//turtle drawings below, which vary on length and placement

	push();
	translate(width/2, height/2);
	rotate(mil/500);
	turtleWormA = makeTurtle(0, 0);
	turtleWormA.setColor(color(47, 24, 57));
	turtleWormA.setWeight(3);
	for (var i = 0; i < 100; i++) {
		turtleWormA.forward(2);
		turtleWormA.left(sin(i/5) * mouseY/17);
	}
	pop();

	push();
	translate(width/4, height/4);
	rotate(mil/500);
	turtleWormA = makeTurtle(0, 0);
	turtleWormA.setColor(color(47, 24, 57));
	turtleWormA.setWeight(3);
	for (var i = 0; i < 50; i++) {
		turtleWormA.forward(2);
		turtleWormA.left(sin(i/5) * mouseY/17);
	}
	pop();
	push();
	translate(width*0.75, height*0.75);
	rotate(mil/500);
	turtleWormA = makeTurtle(0, 0);
	turtleWormA.setColor(color(47, 24, 57));
	turtleWormA.setWeight(3);
	for (var i = 0; i < 50; i++) {
		turtleWormA.forward(2);
		turtleWormA.left(sin(i/5) * mouseY/17);
	}
	pop();
	push();
	translate(width*0.75, height*0.25);
	rotate(mil/500);
	turtleWormA = makeTurtle(0, 0);
	turtleWormA.setColor(color(47, 24, 57));
	turtleWormA.setWeight(3);
	for (var i = 0; i < 50; i++) {
		turtleWormA.forward(2);
		turtleWormA.left(cos(i/5) * mouseY/17);
	}
	pop();
	push();
	translate(width*0.25, height*0.75);
	rotate(mil/500);
	turtleWormA = makeTurtle(0, 0);
	turtleWormA.setColor(color(47, 24, 57));
	turtleWormA.setWeight(3);
	for (var i = 0; i < 50; i++) {
		turtleWormA.forward(2);
		turtleWormA.left(cos(i/5) * mouseY/17);
	}
	pop();
	push();
	translate(width*0.45, height*0.35);
	rotate(mil/500);
	turtleWormA = makeTurtle(0, 0);
	turtleWormA.setColor(color(47, 24, 57));
	turtleWormA.setWeight(3);
	for (var i = 0; i < 50; i++) {
		turtleWormA.forward(2);
		turtleWormA.left(cos(i/5) * mouseY/17);
	}
	pop();
	push();
	translate(width*0.85, height*0.65);
	rotate(mil/500);
	turtleWormA = makeTurtle(0, 0);
	turtleWormA.setColor(color(47, 24, 57));
	turtleWormA.setWeight(3);
	for (var i = 0; i < 50; i++) {
		turtleWormA.forward(2);
		turtleWormA.left(cos(i/5) * mouseY/17);
	}
	pop();
	push();
	translate(width*0.15, height*0.45);
	rotate(mil/500);
	turtleWormA = makeTurtle(0, 0);
	turtleWormA.setColor(color(47, 24, 57));
	turtleWormA.setWeight(3);
	for (var i = 0; i < 50; i++) {
		turtleWormA.forward(2);
		turtleWormA.left(cos(i/5) * mouseY/17);
	}
	pop();
	push();
	translate(width*0.15, height*0.55);
	rotate(mil/500);
	turtleWormA = makeTurtle(0, 0);
	turtleWormA.setColor(color(47, 24, 57));
	turtleWormA.setWeight(3);
	for (var i = 0; i < 50; i++) {
		turtleWormA.forward(2);
		turtleWormA.left(sin(i/5) * mouseY/17);
	}
	pop();
	push();
	translate(width*0.55, height*0.95);
	rotate(mil/500);
	turtleWormA = makeTurtle(0, 0);
	turtleWormA.setColor(color(47, 24, 57));
	turtleWormA.setWeight(3);
	for (var i = 0; i < 50; i++) {
		turtleWormA.forward(2);
		turtleWormA.left(sin(i/5) * mouseY/17);
	}
	pop();
	push();
	translate(width*0.60, height*0.65);
	rotate(mil/500);
	turtleWormA = makeTurtle(0, 0);
	turtleWormA.setColor(color(47, 24, 57));
	turtleWormA.setWeight(3);
	for (var i = 0; i < 50; i++) {
		turtleWormA.forward(2);
		turtleWormA.left(cos(i/5) * mouseY/17);
	}
	pop();
	push();
	translate(width*0.40, height*0.85);
	rotate(mil/500);
	turtleWormA = makeTurtle(0, 0);
	turtleWormA.setColor(color(47, 24, 57));
	turtleWormA.setWeight(3);
	for (var i = 0; i < 50; i++) {
		turtleWormA.forward(2);
		turtleWormA.left(cos(i/5) * mouseY/17);
	}
	pop();
	push();
	translate(width*0.10, height*0.90);
	rotate(mil/500);
	turtleWormA = makeTurtle(0, 0);
	turtleWormA.setColor(color(47, 24, 57));
	turtleWormA.setWeight(3);
	for (var i = 0; i < 50; i++) {
		turtleWormA.forward(2);
		turtleWormA.left(cos(i/5) * mouseY/17);
	}
	pop();
	push();
	translate(width*0.40, height*0.60);
	rotate(mil/500);
	turtleWormA = makeTurtle(0, 0);
	turtleWormA.setColor(color(47, 24, 57));
	turtleWormA.setWeight(3);
	for (var i = 0; i < 50; i++) {
		turtleWormA.forward(2);
		turtleWormA.left(sin(i/5) * mouseY/17);
	}
	pop();
	push();
	translate(width*0.80, height*0.40);
	rotate(mil/500);
	turtleWormA = makeTurtle(0, 0);
	turtleWormA.setColor(color(47, 24, 57));
	turtleWormA.setWeight(3);
	for (var i = 0; i < 50; i++) {
		turtleWormA.forward(2);
		turtleWormA.left(sin(i/5) * mouseY/17);
	}
	pop();
	push();
	translate(width*0.90, height*0.90);
	rotate(mil/500);
	turtleWormA = makeTurtle(0, 0);
	turtleWormA.setColor(color(47, 24, 57));
	turtleWormA.setWeight(3);
	for (var i = 0; i < 50; i++) {
		turtleWormA.forward(2);
		turtleWormA.left(cos(i/5) * mouseY/17);
	}
	pop();
	push();
	translate(width*0.60, height*0.10);
	rotate(mil/500);
	turtleWormA = makeTurtle(0, 0);
	turtleWormA.setColor(color(47, 24, 57));
	turtleWormA.setWeight(3);
	for (var i = 0; i < 50; i++) {
		turtleWormA.forward(2);
		turtleWormA.left(cos(i/5) * mouseY/17);
	}
	pop();
	push();
	translate(width*0.95, height*0.15);
	rotate(mil/500);
	turtleWormA = makeTurtle(0, 0);
	turtleWormA.setColor(color(47, 24, 57));
	turtleWormA.setWeight(3);
	for (var i = 0; i < 50; i++) {
		turtleWormA.forward(2);
		turtleWormA.left(cos(i/5) * mouseY/17);
	}
	pop();
	push();
	translate(width*0.10, height*0.15);
	rotate(mil/500);
	turtleWormA = makeTurtle(0, 0);
	turtleWormA.setColor(color(47, 24, 57));
	turtleWormA.setWeight(3);
	for (var i = 0; i < 50; i++) {
		turtleWormA.forward(2);
		turtleWormA.left(cos(i/5) * mouseY/17);
	}
	pop();
}

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 the Turtle Composition, I wanted to play with modifying turtle paths using trigonometric functions. I also thought about elements in nature that visually present trigonometric functions to incorporate into my work as compositional elements. I came up with a handful of ideas, but ultimately saw compositional harmony with worms popping out of holes in the ground (or armpit hair).

 

gyueunp – Looking Outwards 11

Last week, I attended Jakob Marsico and Chris Carlson’s audiovisual performance titled Body Drift. The work involved video-driven animation and multi-channel sound that created a hypnotising and ethereal effect. I also enjoyed the master class that provided a backstage look at the technologies behind the work, and that is why I chose to discuss Chris Carlson’s “Borderlands Granular,” a new musical instrument for exploring and transforming sound with granular synthesis.

A video of “Borderlands Granular” :

The software allows the user to create musical improvisations and to interact with sonic material on a fundamental level. I also appreciate its fascinating visual aspects, and how it provides a sculptural and spatial approach to making music. It is a work I wish to experiment with in the future.

More works by Chris Carlson can be found here.

adev_Project_11_Composition

adev_project_11

// Aisha Dev
// adev@andrew.cmu.edu
// Project - 11
// Section E


//TURTLE API
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;
}

// global variables for the turtles
var turtleOne;
var turtleTwo;
var turtleThree;
var turtleFour;
var turtleFive;
var turtleSix;
var turtleSeven;
var turtleEight;



function setup() {
    createCanvas(420, 420);
    background(40, 60, 40);

// turtleOne details
    turtleOne = makeTurtle(10, 0);
    turtleOne.penDown();
    turtleOne.setColor(255,0,0);
    turtleOne.setWeight(0.3);

//turtleTwo details
    turtleTwo = makeTurtle(60, 0);
    turtleTwo.penDown();
     turtleTwo.setColor(255,0,0);
    turtleTwo.setWeight(0.3);

//turtleThree details
    turtleThree = makeTurtle(110, 0);
    turtleThree.penDown();
     turtleThree.setColor(255,0,0);
    turtleThree.setWeight(0.3);

//turtleFour details
    turtleFour = makeTurtle(160, 0);
    turtleFour.penDown();
     turtleFour.setColor(255,0,0);
    turtleFour.setWeight(0.3);

//turtleFive details
     turtleFive = makeTurtle(210, 420);
    turtleFive.penDown();
     turtleFive.setColor(255,0,0);
    turtleFive.setWeight(0.3);

//turtleSix details
     turtleSix = makeTurtle(260, 420);
    turtleSix.penDown();
     turtleSix.setColor(255,0,0);
    turtleSix.setWeight(0.3);

//turtleSeven details
     turtleSeven = makeTurtle(310, 420);
    turtleSeven.penDown();
     turtleSeven.setColor(255,0,0);
    turtleSeven.setWeight(0.3);

//turtleEight details
     turtleEight = makeTurtle(360, 420);
    turtleEight.penDown();
     turtleEight.setColor(255,0,0);
    turtleEight.setWeight(0.3);
}



function draw() {

  // the movement for each turtle


	turtleOne.right(100);
    turtleOne.forward(80);
    turtleOne.turnToward(90, mouseX, mouseY);

    turtleTwo.right(110);
    turtleTwo.forward(80);
    turtleTwo.turnToward(90, mouseX, mouseY);
  
  	turtleThree.right(170);
    turtleThree.forward(70);
    turtleThree.turnToward(90, mouseX, mouseY);
  
  	turtleFour.right(100);
    turtleFour.forward(100);
    turtleFour.turnToward(90, mouseX, mouseY);

    turtleFive.right(100);
    turtleFive.forward(100);
    turtleFive.turnToward(90, mouseX, mouseY);

    turtleSix.right(100);
    turtleSix.forward(100);
    turtleSix.turnToward(90, mouseX, mouseY);

    turtleSeven.right(100);
    turtleSeven.forward(100);
    turtleSeven.turnToward(90, mouseX, mouseY);

    turtleEight.right(100);
    turtleEight.forward(100);
    turtleEight.turnToward(90, mouseX, mouseY);
}

This project was good for experimenting with turtle graphics and just being free to learn it. I liked how this one iteration meanders across the canvas. It initially reminds me of a map with the elevation lines when it starts out but then becomes this sci-fi—dystopian—future—esque Arrival-ish language/code.

gyueunp – Project-11: Playing with your Turtles

Turtles

//GyuEun Park
//15-104 E
//gyueunp@andrew.cmu.edu
//Project-11

function setup() {
    createCanvas(400, 400);
    
}

function draw() {
    background(random(50,70));
    var turtle = makeTurtle(width-35, height-365);
    turtle.penDown();
    turtle.setColor(0);
    for (var i = 0; i < 9800; i++) {
        turtle.forward(50);
        turtle.right(141.5);
        turtle.forward(420);
        if (i % 20 === 0) {
            turtle.forward(70);
        }
    }
}


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;}

In all honesty, learning how to use turtle graphics was one of the coolest things I learned in this course; I just love the intricate designs that I am able to create with them. I experimented with various turtle object API (application programmer’s interface) to reach this final design. I like the sense of dimension it has as a result of the overlapping lines. As with many of my works, visual complexity and simplicity coexist in this piece. Here is a screenshot of the final version.

Since it is difficult to illustrate them in hand-drawn sketches, I have decided to include multiple screenshots of from the experimentation process.

 

   

 

svitoora-Project-11- Petri Dish

Petri Dish

// 
// Supawat Vitoorapakorn
// Svitoora@andrew.cmu.edu
// Section E
// Petri Dish

// Create Node
function makeTurtle(tx, ty) {
	var turtle = {
		x: tx,
		y: ty,
		life_index: random(-.5, .5) //random seem for bug bheavior
	};
	return turtle;
}

var time = 1; // Time variable
var w = 480;
var h = 480;
var turtles = []

function setup() {
	createCanvas(w, h);
	background(255);
	num_node = 15;
	for (i = 0; i < num_node; i++) {
		t = makeTurtle(random(0, w), random(0, h));
		turtles.push(t);
	}
}

// Ease turtles towards mouse
function turtle_move() {
	speed = .045;
	for (i in turtles) {
		if (turtles[i].x < mouseX) {
			dx = abs(turtles[i].x - mouseX)
			turtles[i].x += dx * speed
		} else {
			dx = abs(turtles[i].x - mouseX)
			turtles[i].x -= dx * speed
		}
		if (turtles[i].y < mouseY) {
			dy = abs(turtles[i].y - mouseY)
			turtles[i].y += dy * speed
		} else {
			dy = abs(turtles[i].y - mouseY)
			turtles[i].y -= dy * speed
		}
	}
}

// Add Perlin noise to movement of turtle
function add_life() {
	if (mouseIsPressed == false) {
		SIZE = 10; //magnitude of noise movement add
	} else {
		SIZE = 30;
	}
	for (i in turtles) {
		life = turtles[i].life_index
		turtles[i].x += (noise(time * life) - .5) * SIZE;
		turtles[i].y += (noise(time * life / 2) - .5) * SIZE;
	}
}

// Draws membrane of turtles
function membrane() {
	strokeWeight(1);
	fill(0, 0, 0, 255 * .1);
	beginShape(TRIANGLE_STRIP);
	for (i in turtles) {
		x = turtles[i].x
		y = turtles[i].y
		curveVertex(x, y);
	}
	endShape(CLOSE);
}

// Connect lines
function connect_lines() {
	stroke(0, 0, 0, 255 * .25)
	for (i in turtles) {
		x_0 = turtles[i].x
		y_0 = turtles[i].y
		for (i in turtles) {
			x_1 = turtles[i].x
			y_1 = turtles[i].y
			line(x_0, y_0, x_1, y_1);
		}
	}
}

function draw() {
	time += .1;
	background(255, 255, 255, 255 * .75);
	turtle_move();
	add_life()
	for (i in turtles) {
		fill(0, 0, 0, 255 * .75);
		ellipse(turtles[i].x, turtles[i].y, 10, 10)
	}
	membrane();
	connect_lines();
}

This is my first time playing with the noise() function and I absolutely love it! Try clicking and moving your mouse around the canvas. I wanted to create a digital petri dish inspired by seeing Euglena protist under the microscope:

Image result for euglena

 

SaveSave

SaveSave

agusman-Project11-TurtleGraphicsFreestyle

sketch

//Anna Gusman
//agusman@andrew.cmu.edu
//Section E
//Turtle Graphics


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;
}

var t1;

function setup() {
    createCanvas(400,400);
    background(0);
    t1 = makeTurtle(200, 200);
    t1.setColor(255);
    t1.setWeight(1);
    t1.penDown();

    var sideLength = 20;
    for(var i = 0; i < 100; i++) {
        t1.penDown();
        sideLength = sideLength - 20;
        t1.right(2);
        makeSquare(sideLength);

    }
  }

function makeSquare(sideLength)
    {t1.forward(sideLength);
    t1.right(90);
    t1.forward(sideLength);
    t1.right(90);
    t1.forward(sideLength);
    t1.right(90);
    t1.forward(sideLength);
    t1.right(90);

    ellipse(t1.x,t1.y,10,10)
    t1.penUp();
    t1.right(90);
    t1.forward(sideLength)
    t1.right(90);
    t1.forward(sideLength)

    ellipse(t1.x,t1.y,10,10)
}

Inspired by my struggles with the lab this week, I wanted to dive a bit further into the mechanism of iterated rotation. Here’s a simple transformation I thought looked really lovely.

elizabew – Looking Outwards – 11 – sectionE

Atlås from binaura on Vimeo.

For a computational music piece, I decided to look into Agoston Nagy’s work, Atlås—a guided and generative music experience made for iOS. What I really admire about this application is that not only does it let users discover and create music with “interactive sonic sounds”, but it allows users to be transferred to a beautiful digital environment that is visually unlike traditional music. It generates tasks in between spaces that are solved by the application itself within the digital environment ( without the need for users to know how to solve it) which helps to make the application more than just a “music maker.

The app is made using javascript and the p5js library that is embedded in a Swift iOS application. The sound is written in Pure Data—”a graphical programming language to develop interactive sonic events”.

Agoston Nagy says that he wanted to create something that creates a narrative which would help to guide users through an experience. He wanted to bring up thought provoking questions that are focused on communication between people. He applied these thoughts into the app by bringing up these questions in between the music experiences.

Screenshots of the application—questions appear throughout the computational music experience

Sheenu-Project 11-Composition

sketch

var myTurtle;
var startFrame;
function setup() {
    createCanvas(400, 400);
    background(220);
    myTurtle=makeTurtle(width/2,height/2);
    myTurtle.setColor(color(0))
    myTurtle.setWeight(2);
    myTurtle.penDown();
    myTurtle.left(90);
    myTurtle.forward(10);

}
function draw() {
	var rand = random(0,10);
	if(rand>5){
		myTurtle.left(45);
		myTurtle.forward(5);
		//myTurtle.penUp();
	} else if (rand<5){
		myTurtle.right(45);
		myTurtle.forward(5);
		//myTurtle.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;}

This is a project that didn’t come out as planned, yet looked very interesting in the end. I originally tried to make the turtle generate structures that looked similar to trees or tree roots using arrays. I was planning to find a way to make the program create a turtle using a For loop and push that turtle into the array on command. Although, I admit that I wasn’t sure where to start when thinking about this, I still tried my best to do what I wanted to do and got started. I was working on the code and wanted to give the program a test run. When I ran the program, it generated these octagonal structures and lines all over the canvas. That is when I realized that this structure was more interesting than the tree structure I had in mind.

elizabew – project – 11 – composition

sketch

//Elizabeth Wang
//Section E
//elizabew@andrew.cmu.edu
//Project 11

var myTurtle = [];//array to store turtles
var movingTurtle = []; //array to store moving turtle
var d = 100; //degrees to keep movingTurtle moving
var dl = 50;//degrees to keep movingTurtle moving

function setup() {
  createCanvas(480, 480);
  background(32,50,103);
  frameRate(10);
}

function draw() {
  for(var i = 0; i < movingTurtle.length; i++) {
    //moving "bats"
    movingTurtle[i].setColor(color(25,61,mouseX));
    movingTurtle[i].setWeight(.5);
    movingTurtle[i].penDown();
    movingTurtle[i].forward(10);
    movingTurtle[i].right(d);
    movingTurtle[i].forward(2);
    movingTurtle[i].left(dl);
    movingTurtle[i].forward(15);
    d = d + 5; //makes the turtle move around the canvas continuously
    dl = dl + 2;
  }

  for(var i = 0; i < myTurtle.length; i++) {
    myTurtle[i].setColor(color(255,248,193));
    myTurtle[i].setWeight(2);
    myTurtle[i].penDown();
    myTurtle[i].forward(20); //flower/star shape
    myTurtle[i].right(90);
    myTurtle[i].forward(40);
    myTurtle[i].right(45);
    if (i % 10 == 0) { //every 10, large star
      myTurtle[i].setColor(color(255,224,9));
      myTurtle[i].forward(50);
      myTurtle[i].left(180);
  }
}

}

function mousePressed() {
  myTurtle.push(makeTurtle(mouseX, mouseY));//turtle appears when mouse is pressed
}

function mouseDragged(){
  movingTurtle.push(makeTurtle(mouseX, mouseY)); //turtle follows mouse dragging
}

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;
}

Image using only mousePressed
Image using both mousePressed and mouseDragged

For this project, I wanted to create turtles that look like stars in the night sky, while also adding texture that could imitate fog. I made it so that the fog would change color as well in order to somewhat mirror the way fog changes tone depending on where the light source is.

At first I drew different star patterns on paper and then transferred my two favorite into the program. I made it so that smaller stars appear more often than the larger stars in an effort to imitate the “north star” with smaller stars surrounding it. I’m fairly happy with how it turned out, but if I could, it might have been fun to play with adding more visually different stars into the mix.

juyeonk-Project-11-Composition

sketch

//Claire Koh
//Section E
//juyeonk@andrew.cmu.edu
//Project-11

var t1; // Linked to makeTurtle

function setup() {
    createCanvas(480, 300);
    
    t1 = makeTurtle(width/2,height/2); // sets the starting coordinate for the turtle
    t1.penDown();
    
}



function draw() {
    background(0);
    t1.forward(1)
    t1.turnToward(mouseX, mouseY, 10);
    
    drawCarrots(); // draws the Carrot
}


//Draws the carrot that follows around the cursor
function drawCarrots () {
    noStroke();
    fill(56, 88, 48);
    triangle(mouseX, mouseY, mouseX+3, mouseY - 20, mouseX+6, mouseY)
    triangle(mouseX+6, mouseY, mouseX + 9, mouseY - 20, mouseX+10, mouseY-3)
    fill(255,156,0);
    triangle(mouseX, mouseY - 10, mouseX-5, mouseY + 30, mouseX + 10, mouseY - 3)
}



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) {
    push();
    
   
    if (this.penIsDown) {
      strokeJoin(MITER);
      strokeCap(PROJECT);
      stroke(this.color);
      strokeWeight(this.weight);
      line(this.x, this.y, x, y);
      this.x = x;
      this.y = y;
        
        
        noStroke();
    fill(174, 237, 201);
    ellipse(this.x, this.y, 30,50);
    
    fill(56, 88, 48);
    ellipse(this.x, this.y, 20,40);
    
    ellipse(this.x, this.y + 31, 12)
    }
    pop();
    
    
    
    
}


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 take the term “turtle” literally and make a turtle that follows around the cursor. The turtle is constantly moving, but its point of destination is always changing according to the new location of mouseX and mouseY. When reaches the cursor, it will circle around the cursor, but as soon as you move the mouse it will start moving towards the mouse again.

One thing that I could have done is rotating the turtle towards the mouse so that its head will always facing the cursor. But unfortunately the push and pop commands and the translate and rotate commands did not work as I expected.