Anthony Ra – Looking Outwards 11

Thinking of computer music, I immediately thought of a musical trend that has become very popular to the younger demographic this decade – electronic dance music (EDM). EDM is essentially a collection of tracks and synths patched together using a musical software in a computer or application. My favorite EDM artist is Alan Walker, and it is solely a musical opinion rather than a computational one.

Alan Walker uses FL Studio for a lot of his tracks

Alan Walker uses a heavy dose of synth chords with a slow release on his melodies to create more of a soothing product. Within any instrument played on the computer or any synths, he is able to alter the settings and functions using his computer to create the right atmosphere for the given song.

Depending on who he is collaborating with, he also uses Cubase & Logic.

The video above shows his step by step process of patching different computational instruments together and shows us the electronic and synth collaboration with typical instruments. A lot of sounds he makes for his music are plug-ins from softwares like Nexus. Alan Walker is able to achieve his dream in being a musician without some of the fundamental qualities that one would need to become one – the ability to sings or play a musical instrument.

Sharon Yang Looking Outwards 11 Computational Music Composition

The algorithmic musical project that I would like to discuss is Apparatum. Apparatum, has been created by a solo exhibition, panGenerator. With its digital interface that generates electroacoustic sounds, the device emits purely analogue sounds. The project has been inspired musically and graphically by the “Symphony – electronic music” by Boguslaw Schaeffer. Just as Schaeffer did, the apparatus makes use of the visual language of symbols that convey the audio cues. The electroacoustic generators and filters were arranged inside two steel frames, and the two types of magnetic tape samplers are used in order to base off and create basic tones. The apparatus relies on the analog way of generating sound of spinning discs with graphical patterns on them. I admire this project because it is able to make analog sounds from a purely electronic means of creating sounds. In the era where we are constantly exposed to electronic sounds, it shows that an apparatus can be used to bring back the analog sounds. Also, its relatively simple algorithm is used in this ingenious project.

APPARATUM – the installation inspired by the Polish Radio Experimental Studio from ◥ panGenerator on Vimeo.

Video Clip of the operation of Apparatum

Source: https://www.creativeapplications.net/sound/apparatum-installation-inspired-by-the-polish-radio-experimental-studio/

Beyond the Fence

Beyond the Fence is the world’s first computer generated musical, created by Benjamin Till and a team of researchers.

Not only is 25% of the music and lyrics computer generated, but aspects of the production such as the setting and size of the cast were based on algorithms as well. Using an algorithm that sorts through over 2,000 musicals, they determined the characteristics of the best musicals and applied those to the premise of the musical. After computing these aspects of the plot, they team filled “in the dots.”

There’s a hint of Romeo and Juliet (or should that be West Side Story?) to the burgeoning relationship between Mary and Jim, a touch of Miracle on 34th Street to the George subplot, and the idea of a band of women taking a stand against oppressors has been rehearsed in the West End as recently as last year’s short-lived musical staging of Made in Dagenham.

This project is extremely interesting because most modern arguments suggest the computer will never be as creative as the human, especially concerning emotional factors, but this project applied creativity in a useful way. After computing the aspects of the plot, the team filled “in the dots.” With most computer generated work, there is a layer of human decision making (even going back to the creation of the algorithm) so things such as the dialogue and blending the lyrics from the poetry generator were created at the hands of the team. Somewhat relying on the machine to inspire their own creativity. With the advantageous use of these algorithms, the reliance on the “What-If Machine” allowed the team to use their talents elsewhere and fall prey to the surprising output of the machine.

The music was created with the algorithmic composing software, Android, the plot-generating script, PropperWryter, and lyric-generating, Clarissa the Cloud Lyricist, with their own software the “What-If Machine.” It was a collective effort of many collaborators and creators to fully realize this computational musical.

This project as a reference for sound art, is quite inspiring to go past the so-called restrictions of machine-learning and computer generated software’s to create something brand new, yet realistic and familiar. It would be really interesting to see what would happen if these algorithms ran throughout the musical, constantly changing its plot and premise- almost like an improv.

Read more about the project here & here!

Tanvi Harkare – Project 11 – Composition

sketch

var l = 50;
var m = 10;
var R = 100;
var G = 200;
var B = 50;

function setup(){
    frameRate(10);
    createCanvas(400, 400);
    background(0);
    myTurtle = makeTurtle(mouseX, mouseY);
    myTurtle.setWeight(6);
    myTurtle.penDown(); 
}

function draw(){
    var c = color(R, G, B)
    myTurtle.setColor(c);
    myTurtle.turnToward(mouseX, mouseY, l);
    myTurtle.forward(m);
    if (frameCount % 100 === 0){
        newColor();
    }
}

function newColor(){
    m = random(0, 20);
    l = random(0, 100);
}

function mouseClicked(){
    R = random(0, 255);
    G = random(0, 255);
    B = random(0, 255);
}

function keyPressed(){
    background(0);
}

//// change nothing under this line ////
function turtleLeft(d) {
    this.angle -= d;
}
 
function turtleRight(d) {
    this.angle += d;
}
 
function turtleForward(p) {
    var rad = radians(this.angle);
    var newx = this.x + cos(rad) * p;
    var newy = this.y + sin(rad) * p;
    this.goto(newx, newy);
}
 
function turtleBack(p) {
    this.forward(-p);
}
 
function turtlePenDown() {
    this.penIsDown = true;
}
 
function turtlePenUp() {
    this.penIsDown = false;
}
 
function turtleGoTo(x, y) {
    if (this.penIsDown) {
      stroke(this.color);
      strokeWeight(this.weight);
      line(this.x, this.y, x, y);
    }
    this.x = x;
    this.y = y;
}
 
function turtleDistTo(x, y) {
    return sqrt(sq(this.x - x) + sq(this.y - y));
}
 
function turtleAngleTo(x, y) {
    var absAngle = degrees(atan2(y - this.y, x - this.x));
    var angle = ((absAngle - this.angle) + 360) % 360.0;
    return angle;
}
 
function turtleTurnToward(x, y, d) {
    var angle = this.angleTo(x, y);
    if (angle < 180) {
        this.angle += d;
    } else {
        this.angle -= d;
    }
}
 
function turtleSetColor(c) {
    this.color = c;
}
 
function turtleSetWeight(w) {
    this.weight = w;
}
 
function turtleFace(angle) {
    this.angle = angle;
}
 
function makeTurtle(tx, ty) {
    var turtle = {x: tx, y: ty,
                  angle: 0.0, 
                  penIsDown: true,
                  color: color(128),
                  weight: 1,
                  left: turtleLeft, right: turtleRight,
                  forward: turtleForward, back: turtleBack,
                  penDown: turtlePenDown, penUp: turtlePenUp,
                  goto: turtleGoTo, angleto: turtleAngleTo,
                  turnToward: turtleTurnToward,
                  distanceTo: turtleDistTo, angleTo: turtleAngleTo,
                  setColor: turtleSetColor, setWeight: turtleSetWeight,
                  face: turtleFace};
    return turtle;
}

I was inspired by the etch a sketch toy, which draws small lines that can potentially create an interesting drawing. The turtle turns towards the direction of the mouse. Every 100 frames, the line type changes to be more jagged or more smooth. When you click the mouse on the canvas, it changes the color of the line. If you press any key, the background erases to create a blank slate – similar to shaking an etch a sketch.

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.

Yoo Jin Shin-LookingOutwards-11

Sonic Playground

Sonic Playground by Yuri Suzuki is “an outdoor sound installation that features ingenious, colourful sculptures that modify and transmit sound in unusual, engaging and playful ways.” The colors used in the installation are so vibrant and really catch the eyes of those passing by.

The software behind this installation was designed by Luca Dellatorre using Grasshopper, as a parametric design plug-in in Rhinoceros. “The plug in he wrote is a 3D raytracing tool that allows the user to select a sound source and send sound in a certain direction or towards a certain geometry, in this case the shape of the acoustic mirrors or the bells at the start and end of the pipes to see how the sound is reflected and what is the interaction with the object.” It’s cool to see how such a seemingly simple installation can have such a complex architecture on the back-end.

Jenny Hu — Looking Outwards 11: Computer Music

For this week’s looking outwards post, I will discuss the artist Mileece, a sound artist and environmental designer who is known for her methods of making music with plants.

Mileece creates generative music , one track which can be listened to above, and on this link. The way she generates this music is by essentially reading electrical currents given off by plants via electrodes, and processing the current into binary code— which is then processed and animated into sound. Often, this creates sound that feels like music.

Vice created great documentation of her process at the following video:

What I love about Mileece’s music is the duality of the generative work. In some ways, the music is generated purely from the plant, it’s a radical change in our perception of what a plant is and is capable of, but it’s reprocessed by the computer. The computer is a key part of our ability to interpret the plant as music in the first place. Because of this, it feels impossible to define her music without the discussion of computation.

Will we start to breed plants to generate totally new sounds?

cmhoward-project11-composition

cmhoward-week-11

var sq1StartWidth = 90;
var sq1StartHeight = 50;
var sq2StartWidth = 375;
var sq2StartHeight = 100;
var sq3StartWidth = 135;
var sq3StartHeight = 150;
var sq4StartWidth = 425;
var sq4StartHeight = 200;
var sq5StartWidth = 240;
var sq5StartHeight = 350;
var sq1length;
var sq2length;
var sq3length;
var sq4length;
var sq5length;

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

function draw() {
    background(0);
    // var mx = constrain(mouseX, 0, width - sq2length);
    // var my = constrain(mouseY, 0, height - sq2length);
    // sq1StartWidth = mx - sq1length;
    // sq1StartHeight = my - sq1length;
    // sq2StartWidth = mouseX + (mx/2);
    // sq2StartHeight = mouseY + (my/2);
    sq1length = map(mouseX, 0, width, 10, 50);
    sq2length = map(mouseX, 0, width, 10, 50);
    sq3length = map(mouseX, 0, width, 20, 40);
    sq4length = map(mouseX, 0, width, 75, 25);
    sq5length = map(mouseX, 0, width, 50, 60);
    square_1();
    square_2();
    square_3();
    square_4();
    square_5();
    lines();
}

function square_1() {
    square1 = makeTurtle(sq1StartWidth, sq1StartHeight);
    square1.color = ('white');
    square1.penDown();
    square1.face(90);
    square1.forward(sq1length);
    square1.right(90);
    square1.forward(sq1length);
    square1.right(90);
    square1.forward(sq1length);
    square1.right(90);
    square1.forward(sq1length);
    square1.penUp();
}

function square_2() {
    square2 = makeTurtle(sq2StartWidth, sq2StartHeight);
    square2.color = ('white');
    square2.penDown();
    square2.face(90);
    square2.forward(sq2length);
    square2.right(90);
    square2.forward(sq2length);
    square2.right(90);
    square2.forward(sq2length);
    square2.right(90);
    square2.forward(sq2length);
    square2.penUp();
}

function square_3() {
    square3 = makeTurtle(sq3StartWidth, sq3StartHeight);
    square3.color = ('white');
    square3.penDown();
    square3.face(90);
    square3.forward(sq3length);
    square3.right(90);
    square3.forward(sq3length);
    square3.right(90);
    square3.forward(sq3length);
    square3.right(90);
    square3.forward(sq3length);
    square3.penUp();
}

function square_4() {
    square4 = makeTurtle(sq4StartWidth, sq4StartHeight);
    square4.color = ('white');
    square4.penDown();
    square4.face(90);
    square4.forward(sq4length);
    square4.right(90);
    square4.forward(sq4length);
    square4.right(90);
    square4.forward(sq4length);
    square4.right(90);
    square4.forward(sq4length);
    square4.penUp();
}

function square_5() {
    square5 = makeTurtle(sq5StartWidth, sq5StartHeight);
    square5.color = ('white');
    square5.penDown();
    square5.face(90);
    square5.forward(sq5length);
    square5.right(90);
    square5.forward(sq5length);
    square5.right(90);
    square5.forward(sq5length);
    square5.right(90);
    square5.forward(sq5length);
    square5.penUp();
}

function lines() {
    line(sq1StartWidth, sq1StartHeight, sq2StartWidth, sq2StartHeight);
    line(sq1StartWidth, sq1StartHeight + sq1length, sq2StartWidth, sq2StartHeight + sq2length);
    line(sq1StartWidth - sq1length, sq1StartHeight, sq2StartWidth - sq2length, sq2StartHeight);
    line(sq1StartWidth - sq1length, sq1StartHeight + sq1length, sq2StartWidth - sq2length, sq2StartHeight + sq2length)   

    line(sq3StartWidth, sq3StartHeight, sq2StartWidth, sq2StartHeight);
    line(sq3StartWidth, sq3StartHeight + sq3length, sq2StartWidth, sq2StartHeight + sq2length);
    line(sq3StartWidth - sq3length, sq3StartHeight, sq2StartWidth - sq2length, sq2StartHeight);
    line(sq3StartWidth - sq3length, sq3StartHeight + sq3length, sq2StartWidth - sq2length, sq2StartHeight + sq2length)   

    line(sq3StartWidth, sq3StartHeight, sq4StartWidth, sq4StartHeight);
    line(sq3StartWidth, sq3StartHeight + sq3length, sq4StartWidth, sq4StartHeight + sq4length);
    line(sq3StartWidth - sq3length, sq3StartHeight, sq4StartWidth - sq4length, sq4StartHeight);
    line(sq3StartWidth - sq3length, sq3StartHeight + sq3length, sq4StartWidth - sq4length, sq4StartHeight + sq4length) 

    line(sq5StartWidth, sq5StartHeight, sq4StartWidth, sq4StartHeight);
    line(sq5StartWidth, sq5StartHeight + sq5length, sq4StartWidth, sq4StartHeight + sq4length);
    line(sq5StartWidth - sq5length, sq5StartHeight, sq4StartWidth - sq4length, sq4StartHeight);
    line(sq5StartWidth - sq5length, sq5StartHeight + sq5length, sq4StartWidth - sq4length, sq4StartHeight + sq4length)     
}

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 explore creating animated geometric forms. With turtle graphics, there are a lot of variables that one can easily explore with easier access so this was the perfect excuse to turn a doodle I always do into an actual project. Doodles below…

While these are more complex, they are based on the same principle of connecting squares and rectangles which was the basis for my project.

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/

Vicky Zhou – Project 11 – Computation

sketch

/*Vicky Zhou
vzhou@andrew.cmu.edu
Section E
Project 11 - Freestyle with Turtles*/

//turtle array
var ttl = [];

function setup() {
	createCanvas(480, 480);
	background(180, 200, 250);
	//initializing the turtle array
	for (var i = 0; i < 5; i ++){
		t = makeTurtle(0, 0);
		ttl.push(t);
	}
}


function draw() {
	for (var i = 0; i < 5; i ++){
		fill(190, 210, 210, 200);
		stroke("blue");
		//drawing the triangle
		triangle(ttl[i].x, ttl[i].y,
			ttl[i].x + 10, ttl[i].y + 60,
			ttl[i].x + 100, ttl[i].y + 100);
		//moving the triangle
		moveTurtle();
	}

}

//function to move the triangles 
function moveTurtle() {
	for (var i = 0; i < 5; i ++){
		dx = abs(ttl[i].x - mouseX);
		if (ttl[i].x < mouseX) {
			ttl[i].x += dx / 50;
		}
		else {
			ttl[i].x -= dx / 20;
		}
		dy = abs(ttl[i].y - mouseY);
		if (ttl[i].y < mouseY) {
			ttl[i].y += dy / 100 + i;
		}
		else {
			ttl[i].y -= dy / 100 + i;
		}
	}
}



//---------------------------------------------------------------------------
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 project, because the prompt was so vague I was not entirely sure what I wanted my end product to be. However, I did want my computational turtles to be interactive with the mouse, so I centered the project around a turtle that would follow your mouse tracking and leave behind a trace. I played around with ellipses, rectangles, but then settled on a triangle because of how neatly some edges could settle in each other.