Curran Zhang- Project-11- Composition

sketch

/*Curran Zhang
curranz
Project 11
Section A
*/

var ttl = [];


function setup(){
  createCanvas(480,480);
  background(10);
  frameRate(20);
}

function draw(){
  var x = random(5,15);
  var xx = random(10,20);
  background(0,10);
  for (var i = 0; i <ttl.length; i++) {
    ttl[i].setColor(random(150,200));
    ttl[i].setWeight(10);
    ttl[i].penDown();
    ttl[i].right (x);
    ttl[i].forward(xx);
  }
}

function mouseDragged(){
  ttl.push(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 wanted to use the simplicity of turtle graphics to create an animation that is chaotic. Beginning with a circle, I began to create and animate its motion along the mouse.

Project 11

sketch

/* Rani Randell
rrandell@andrew.cmu.edu
Section A
Project 11 */

function setup() {
    createCanvas(400, 400);
    background(255, 250, 0);
}
 
function draw() {
	

	var ttl = makeTurtle(160, 430);
	ttl.penDown();
	ttl.setColor(255);

	var i;
	var d;
	for(i=0; i<200;i++){ //makes outmost giant circle
		d=16
		ttl.forward(d);
		ttl.left(360/100);

	}
	
	ttl.penUp();
	ttl.left(90)
	ttl.forward(40);
	ttl.penDown();

	for(var j = 0; j<100; j++){
		var r = 5;
		ttl.forward(r);
		ttl.left(360/100)
	}

	ttl.penUp();
	ttl.right(90)
	ttl.forward(40);
	ttl.penDown();

	for(var k = 0; k<100; k++){
		var q = 10;
		ttl.forward(q);
		ttl.left(360/100)
	}

	ttl.penUp();
	ttl.right(90)
	ttl.forward(40);
	ttl.penDown();

	for(var j = 0; j<100; j++){
		var r = 6;
		ttl.forward(r);
		ttl.left(360/100)
	}

	ttl.penUp();
	ttl.left(70)
	ttl.forward(40);
	ttl.penDown();

	for(var j = 0; j<100; j++){
		var r = 8;
		ttl.forward(r);
		ttl.left(360/100)
	}

	ttl.penUp(); //start playing here
	ttl.left(70)
	ttl.forward(-40);
	ttl.penDown();

	for(var j = 0; j<100; j++){
		var r = 8;
		ttl.forward(r);
		ttl.left(360/100)
	}
	ttl.penUp();
	ttl.left(90)
	ttl.forward(80);
	ttl.penDown();

	for(var j = 0; j<100; j++){
		var r = 13;
		ttl.forward(r);
		ttl.left(360/100)

	}
	ttl.penUp();
	ttl.forward(50);
	ttl.right(80);
	ttl.forward(240);
	ttl.penDown();

	ttl.penUp();
	ttl.left(70)
	ttl.forward(40);
	ttl.penDown();

	for(var j = 0; j<100; j++){
		var r = 8;
		ttl.forward(r);
		ttl.left(360/100)
	}
	ttl.penUp();
	ttl.left(70)
	ttl.forward(40);
	ttl.penDown();

	for(var j = 0; j<100; j++){
		var r = 8;
		ttl.forward(r);
		ttl.left(360/100)
	}
	ttl.penUp();
	ttl.left(70)
	ttl.forward(40);
	ttl.penDown();

	for(var j = 0; j<100; j++){
		var r = 8;
		ttl.forward(r);
		ttl.left(360/100)
	}
	ttl.penUp();
	ttl.left(70)
	ttl.forward(40);
	ttl.penDown();

	for(var j = 0; j<100; j++){
		var r = 8;
		ttl.forward(r);
		ttl.left(360/100)
	}
	ttl.penUp();
	ttl.left(70)
	ttl.forward(40);
	ttl.penDown();

	for(var j = 0; j<100; j++){
		var r = 8;
		ttl.forward(r);
		ttl.left(360/100)
	}
	ttl.penUp();
	ttl.left(70)
	ttl.forward(40);
	ttl.penDown();

	for(var j = 0; j<100; j++){
		var r = 8;
		ttl.forward(r);
		ttl.left(360/100)
	}
	ttl.penUp();
	ttl.left(70)
	ttl.forward(40);
	ttl.penDown();

	for(var j = 0; j<100; j++){
		var r = 8;
		ttl.forward(r);
		ttl.left(360/100)
	}
	ttl.penUp();
	ttl.left(70)
	ttl.forward(40);
	ttl.penDown();

	for(var j = 0; j<100; j++){
		var r = 8;
		ttl.forward(r);
		ttl.left(360/100)
	}
	ttl.penUp();
	ttl.left(70)
	ttl.forward(40);
	ttl.penDown();

	for(var j = 0; j<100; j++){
		var r = 8;
		ttl.forward(r);
		ttl.left(360/100)
	}
	ttl.penUp();
	ttl.left(70)
	ttl.forward(40);
	ttl.penDown();

	for(var j = 0; j<100; j++){
		var r = 8;
		ttl.forward(r);
		ttl.left(360/100)
	}
	ttl.penUp();
	ttl.left(70)
	ttl.forward(40);
	ttl.penDown();

	for(var j = 0; j<100; j++){
		var r = 8;
		ttl.forward(r);
		ttl.left(360/100)
	}
	ttl.penUp();
	ttl.left(70)
	ttl.forward(40);
	ttl.penDown();

	for(var j = 0; j<100; j++){
		var r = 8;
		ttl.forward(r);
		ttl.left(360/100)
	}
	ttl.penUp(); //
	ttl.left(70)
	ttl.forward(40);
	ttl.penDown();

	for(var j = 0; j<100; j++){
		var r = 8;
		ttl.forward(r);
		ttl.left(360/100)
	}
	ttl.penUp();
	ttl.left(70)
	ttl.forward(40);
	ttl.penDown();

	for(var j = 0; j<100; j++){
		var r = 8;
		ttl.forward(r);
		ttl.left(360/100)
	}
	ttl.penUp();
	ttl.left(70)
	ttl.forward(40);
	ttl.penDown();

	for(var j = 0; j<100; j++){
		var r = 8;
		ttl.forward(r);
		ttl.left(360/100)
	}
	ttl.penUp();
	ttl.left(70)
	ttl.forward(40);
	ttl.penDown();

	for(var j = 0; j<100; j++){
		var r = 8;
		ttl.forward(r);
		ttl.left(360/100)
	}
	ttl.penUp();
	ttl.left(70)
	ttl.forward(40);
	ttl.penDown();

	for(var j = 0; j<100; j++){
		var r = 8;
		ttl.forward(r);
		ttl.left(360/100)
	}
	ttl.penUp();
	ttl.left(70)
	ttl.forward(40);
	ttl.penDown();

	for(var j = 0; j<100; j++){
		var r = 8;
		ttl.forward(r);
		ttl.left(360/100)
	}
	ttl.penUp();
	ttl.left(70)
	ttl.forward(40);
	ttl.penDown();

	for(var j = 0; j<100; j++){
		var r = 8;
		ttl.forward(r);
		ttl.left(360/100)
	}
	ttl.penUp();
	ttl.left(70)
	ttl.forward(40);
	ttl.penDown();

	for(var j = 0; j<100; j++){
		var r = 8;
		ttl.forward(r);
		ttl.left(360/100)
	}
	ttl.penUp();
	ttl.left(70)
	ttl.forward(40);
	ttl.penDown();

	for(var j = 0; j<100; j++){
		var r = 8;
		ttl.forward(r);
		ttl.left(360/100)
	}
	ttl.penUp();
	ttl.left(70)
	ttl.forward(40);
	ttl.penDown();

	for(var j = 0; j<100; j++){
		var r = 8;
		ttl.forward(r);
		ttl.left(360/100)
	}
	ttl.penUp();
	ttl.left(70)
	ttl.forward(40);
	ttl.penDown();

	for(var j = 0; j<100; j++){
		var r = 8;
		ttl.forward(r);
		ttl.left(360/100)
	}
	ttl.penUp();
	ttl.left(70)
	ttl.forward(40);
	ttl.penDown();

	for(var j = 0; j<100; j++){
		var r = 8;
		ttl.forward(r);
		ttl.left(360/100)
	}
	ttl.penUp();
	ttl.left(70)
	ttl.forward(40);
	ttl.penDown();

	for(var j = 0; j<100; j++){
		var r = 8;
		ttl.forward(r);
		ttl.left(360/100)
	}
	ttl.penUp();
	ttl.left(70)
	ttl.forward(40);
	ttl.penDown();

	for(var j = 0; j<100; j++){
		var r = 8;
		ttl.forward(r);
		ttl.left(360/100)
	}
	ttl.penUp();
	ttl.left(70)
	ttl.forward(40);
	ttl.penDown();

	for(var j = 0; j<100; j++){
		var r = 8;
		ttl.forward(r);
		ttl.left(360/100)
	}
	ttl.penUp();
	ttl.left(70)
	ttl.forward(40);
	ttl.penDown();

	for(var j = 0; j<100; j++){
		var r = 8;
		ttl.forward(r);
		ttl.left(360/100)
	}

	ttl.penUp();
	ttl.left(100);
	ttl.forward(30);
	ttl.right(10);
	ttl.forward(20);
	ttl.penDown();

	for(var t = 0; t<100; t++){
		var r = 3;
		ttl.forward(r);
		ttl.left(360/100)
	}
	ttl.penUp();
	ttl.left(100);
	ttl.forward(30);
	ttl.right(10);
	ttl.forward(20);
	ttl.penDown();

	for(var t = 0; t<100; t++){
		var r = 3;
		ttl.forward(r);
		ttl.left(360/100)
	}
	ttl.penUp();
	ttl.left(100);
	ttl.forward(30);
	ttl.right(10);
	ttl.forward(20);
	ttl.penDown();

	for(var t = 0; t<100; t++){
		var r = 3;
		ttl.forward(r);
		ttl.left(360/100)
	}
	ttl.penUp();
	ttl.left(100);
	ttl.forward(30);
	ttl.right(10);
	ttl.forward(20);
	ttl.penDown();

	for(var t = 0; t<100; t++){
		var r = 3;
		ttl.forward(r);
		ttl.left(360/100)
	}



	
}

//turtle code template

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 my project I was really inspired by Tomas Saraceno’s large scale installation work Webs of Tension. This work is a vast room of giant cubes made of iron bars on each cube edge. But within the open air cube are thousands of spiderwebs, made to show the vast interconnectivity that they use daily and we admire but isn’t constructed for only human purposes. Underneath the cubes are giant lights that illuminate the thousands of imperfect yet beautiful webs. When I saw this it really spoke to me so I felt I could try to recreate that with turtle graphics. Below is a link to his website:

https://studiotomassaraceno.org/

Jonathan Liang – Project 11 – Composition

sketch

//Jonathan Liang
//jliang2
//Section A

//draw lines on people haha

var t1;
var underlyingImage;
var longboy = -1;

function preload() {
    var myImageURL = "https://i.imgur.com/UveUHg1l.jpg";
    underlyingImage = loadImage(myImageURL); //load picture
}



function setup() {
	background(255);
    createCanvas(350, 480);
    image(underlyingImage, 0, 0);
    underlyingImage.loadPixels();
    t1 = makeTurtle(width/2, height/2);
    frameRate(35);
   
   
}

function draw() {
	if (longboy == 1) {
		t1.goto(mouseX, mouseY);
		t1.penDown();
		followTheMouse();

	}	

	if (longboy == -1) {
		t1.penUp();
		// t1.goto(mouseX, mouseY);

	}

	
}

function followTheMouse() {
	
	t1.setColor('black');
	t1.setWeight(3);
	t1.forward(2);
	t1.turnToward(mouseX, mouseY, 10);
	
}

function mousePressed() {
	longboy *= -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;
}

It all starts with an idea, but you can never tell where an idea can end up. Because ideas spread, they change, they grow, they connect us with the world. And in a fast-moving world, where good news moves at the speed of time and bad news isn’t always what is seems. Because when push comes to shove, we all deserve a second chance, to score. A simple picture of an ordinary boy can be transformed. Ordinary boy can become the incredible hulk, thanks to turtles.

Jamie Dorst Project 11

sketch

/*
Jamie Dorst
jdorst@andrew.cmu.edu
Section A
Project-11
*/

var turtlesArray = [];
var mouseClicks = [];

function setup() {
    createCanvas(460, 480);
    background(0);
}

function draw() {
    // change frame rate slower
    frameRate(5);
    // make turtle in center of screen
    var turtle1 = makeTurtle(width / 2, height / 2);
    turtle1.setColor(255);
    turtle1.goto(random(0, 460), random(0, 460));
    // make another same turtle in center of screen
    var turtle2 = makeTurtle(width / 2, height / 2);
    turtle2.setColor(255);
    turtle2.goto(random(0, 460), random(0, 460));
    // make another same turtle in center of screen
    var turtle3 = makeTurtle(width / 2, height / 2);
    turtle3.setColor(255);
    turtle3.goto(random(0, 460), random(0, 460));
    // draw new turtles on a loop too
    for (var i = 0; i < turtlesArray.length; i++) {
        turtlesArray[i].goto(random(0, 460), random(0, 460));
    }
    // stop updating turtles past 10 clicks by removing them from the array
    if (turtlesArray.length > 10) {
        turtlesArray.shift();
    }
    // put translucent black screen over canvas every 10 clicks
    // not when there have been 0 clicks
    if (mouseClicks.length === 0 & mouseClicks.length < 10) {
        textAlign(CENTER);
        noStroke();
        fill(0);
        rect(0, 460, 460, 480);
        fill(255);
        text("keep clicking to start fading", width / 2, 470);
    } else if (mouseClicks.length % 10 === 0) {
        // translucent box over canvas
        fill(0, 0, 0, 30);
        noStroke();
        rect(0, 0, 460, 460);
        // instructions text
        noStroke();
        fill(0);
        rect(0, 460, 460, 480);
        fill(255);
        text("click to stop fading", width / 2, 470);
    } else if (mouseClicks.length === 11) {
        // clear array so it never exceeds 10 items
        for (var j = 0; j < 11; j++) {
            mouseClicks.shift();
        }
    }
    print(mouseClicks.length)
}

function mousePressed() {
    // new turtle when mouse is pressed at location mouse was pressed
    var newTurtle = makeTurtle(mouseX, mouseY);
    // color and weight are random
    newTurtle.setColor(color(random(255), random(255), random(255)));
    newTurtle.setWeight(random(1, 5));
    // push the new turtle onto the turtles array
    turtlesArray.push(newTurtle);
    // count how many clicks there have been total
    mouseClicks.push("click")
}


//-----------TURTLE-----------//
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 started with the base white star type thing, where the turtle starts at the center of the canvas but then always spreads out a random amount.  I then wanted to let the user click to add more turtles, where they would have a new random stroke and color, and they would move around randomly within the canvas. Every 10 clicks, a faded black screen is added over the canvas. I implemented this because I felt that the lines became overwhelming at a certain point, and this would help tame them.

A screenshot of my project while the fading is going on
A screenshot of my project when the fading is not going on, and it has run for a while
A screenshot of my project when you’ve only clicked once, and it hasn’t run for too long

Jonathan Liang – Looking Outwards – 11

Adrien Kaeser’s Weather Thingy is a custom built sounds controller that modifies the sounds produced by musical instruments based on real-time climate settings. Weather Thingy is composed of two parts: a weather station on a tripod microphone and a custom built controller connected to a weather station. The station has climate sensors like a rain gauge, a wind vane, and a anemometer that assign various parameters received to audio effects. The main goal of Adrien’s work is to offer a new perspective to a replayability of a song. Since the same song with change based on the surrounding climate, it offers an unique experience each time the song is heard.

 

Weather Thingy – Real time climate sound controller

 

Looking Outwards – 11

Denial of Service: “Onryō”

I found this project really interesting because the visual artist, Palmer Eldritch, combined a series of tech-noir chaos, their reactivity, and rotoscoping into his video and audio outputs. The sequences are made possible through the use of Max/Jitter with a bunch of different visual elements that are made by softwares like Ready, After Effects, GForce Suite, 3DSMax/VRay, Sound Forge/Waves, and many others.  This work was also possible courtesy of Paul Fennell through his creations made on Max/Jitter. Eldritch made changes and modified an open source code to suit his thoughts and the direction of his project. As a result, many overlays were a result of experimentation with noise patterns and sonifications courtesy of Tomasz Sulej.

Article: by FilipVisnjic, January 3rd, 2017

Judy Li-Project-11-Composition

judyli: Composition Project 11

/*
Judy Li
Section A
judyli@andrew.cmu.edu
Project-11
*/

var ttl1 = [];//turtle 1
var ttl2 = [];//turtle 2
var ttl3 = [];//turtle 3
var ttl4 = [];//turtle 4
var opacity = 255;//starting color

function setup() {
    createCanvas(480, 480);
    background("white");
    strokeJoin(MITER);
    strokeCap(PROJECT);
    //ttl1
    for (var i = 0; i < 10; i++) {
        ttl1.push(makeTurtle(0, 0));
        ttl1[i].penDown();
        ttl1[i].right(36 * i);
    }
    //ttl2
    for (var j = 0; j < 10; j++) {
        ttl2.push(makeTurtle(480, 0));
        ttl2[j].penDown();
        ttl2[j].left(36 * j);
    }
    //ttl3
    for (var k = 0; k < 10; k++) {
        ttl3.push(makeTurtle(0, 480));
        ttl3[k].penDown();
        ttl3[k].right(36 * k);
    }
    //ttl4
    for (var l = 0; l < 10; l++) {
        ttl4.push(makeTurtle(480, 480));
        ttl4[l].penDown();
        ttl4[l].left(36 * l);
    }
}

function draw() {
    var dir = random(15, 90);
    var dist = random(10, 25);
    if (opacity > 100) {
        opacity -= 10;
    }
    else opacity = 205;
    for (var i = 0; i < 10; i++) {
        //1
        ttl1[i].setColor(opacity);
        ttl1[i].setWeight(2);
        ttl1[i].forward(dist);
        ttl1[i].right(dir);
        //2
        ttl2[i].setColor(opacity);
        ttl2[i].setWeight(2);
        ttl2[i].forward(dist);
        ttl2[i].left(dir);
        //3
        ttl3[i].setColor(opacity);
        ttl3[i].setWeight(2);
        ttl3[i].forward(dist);
        ttl3[i].right(dir);
        //4
        ttl4[i].setColor(opacity);
        ttl4[i].setWeight(2);
        ttl4[i].forward(dist);
        ttl4[i].left(dir);
    }
}


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 turtle pattern that fills up the background. I made turtles at four different starting points so that the canvas is filled up more quickly and with more depth of color through differences in color as they move about. When I played with different moves and directions, I liked this composition the best because it looks like the way a knit hat is supposed to be made.

Knit hat coming together almost
Completed knit hat

Erin Fuller – LookingOutwards-11

The piece “Order from Chaos” is a beautiful composition of computed visual and audio work. The track was produced by London based electronica and techno producer Max Cooper. The track was originally inspired by a moment where Cooper was captivated by the sound of hard rain hitting a roof window at his apartment. He recorded the sound with binaural mics, microphones that capture audio the same way your real ears hear sounds, and used the initial recording as a seed for the rest of the track. The pattern from the raindrops based on their closest structure, that creates an emergent rhythm, an initially detailed and chaotic form which slowly develops into something with a recognizable structure.

chaos-3
Gif of Video

While the prompt is focused on computer music, it would not be fair not to note the mesmerizing visual animations done by French-based Houdini Fx artist, motion graphic artist and Director, Maxime Causeret.

chaos-2
Gif of Video

Erin Fuller – Turtle Composition

//Erin Fuller
//SectionA
//efuller@andrew.cmu.edu
//Project 11

var t = [0, 1, 2]; //start w/ 3 turtles
var targetX = 0;

function setup() {
    createCanvas(480, 480);
    background(0);
    for (var i = 0; i < t.length; i++) { //initialize turtles
    	t[i] = makeTurtle(0, height / 2 + random(-100, 100));
	    t[i].setColor(color(random(100), random(255), random(255), 50));
	}
	frameRate(40); //slow down turtle!!!
}

function draw() {
    targetX += 1; //updates target with each frame
    var targetY = (width / 2) - 90 * sin(radians(targetX)); //sine wave

    noStroke(); //makes target curve "invisible"
    point(targetX, targetY);

    for (var j = 0; j < t.length; j++) {
	    t[j].penDown();
	    t[j].setWeight(4);  

    	t[j].forward(1.5); 
    	t[j].turnToward(targetX, targetY, 2); //orient towards sine wave
    	t[j].left(random(-5, 5)); //adds noise

    	if (targetX === width) { //restarts when reachinf edge of screen
    		targetX = 0; //restart target
    		for (var k = 0; k < t.length; k++) {
    			t[k].penUp(); //stops turtles moves them back
    			t[k].goto(0, height / 2 + random(-100, 100));
    			t[k].penDown(); //restart turtle
    		}
    	}
    }
}

function mousePressed() {
	var newTurtle = makeTurtle(mouseX,mouseY); //making new turtle at mouse press
	newTurtle.setColor(color(random(100), random(255), random(255), 50));
	t.push(newTurtle); //push turtle onto array
}


//------------------------------------------------------------------------------------  

// makeTurtle(x, y) -- make a turtle at x, y, facing right, pen down
// left(d) -- turn left by d degrees
// right(d) -- turn right by d degrees
// forward(p) -- move forward by p pixels
// back(p) -- move back by p pixels
// penDown() -- pen down
// penUp() -- pen up
// goto(x, y) -- go straight to this location
// setColor(color) -- set the drawing color
// setWeight(w) -- set line width to w
// face(d) -- turn to this absolute direction in degrees
// angleTo(x, y) -- what is the angle from my heading to location x, y?
// turnToward(x, y, d) -- turn by d degrees toward location x, y
// distanceTo(x, y) -- how far is it to location x, y?

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

My composition is three turtles chasing a sine wave, but the turtles can never catch it fully because of added noise that makes them wander off track. If you click your mouse, you add a new turtle!

Before Turtles Restarted Along with Target Curve, Oops
A Nice Turtle Chase
Faster Frame Rate Produced a Tighter Turtle Chase

Audrey Zheng – Looking Outwards – 11

Atlås from binaura on Vimeo.

 

The creators: Binaura is making creative coding, interaction design, experimental interfaces, sonic toys and other, reactive environments. The collective regularly gives international workshops and lectures on these topics. The collective consists of Ágoston Nagy and Bence Samu.

Atlås is an anti game environment that generates music among a conversational cognitive space. As part of its existence, there are automatically generated tasks that are solved by machine intelligence without the need of human input. It also asks questions ad infinitum: questions that are dealing with presence, human cognition and imagination, corporate driven automatisms, advanced listening practices, silence.

I picked this beautiful app because of its beautiful generative UI. I love the geometric forms, flat design with shadows, circular text and color scheme. It makes for a very aesthetically pleasing composition.

Atlas

How it was made: The project is developed with free and open source tools with an educational aspect in mind. The main application is written in javascript, using the p5js library that is embedded into a regular Swift iOS application. This example template can be used to write and play with your own app using p5js within an iOS app. The sound synthesis is written in Pure Data, that is a useful graphical programming language to develop interactive sonic events. It can be integrated into all type of projects and applications using LibPd. This example template can be used to write and play with your own app using libPd within an iOS app.