Category: Section A

heeseoc-Project-11-Composition

sketch

//Steph Chun
//Section A
//heeseoc@andrew.cmu.edu
//Project-11

var turtle, turtle2;
var angle = 20;
var side = 5;
var angle2 = 160;
var side2 = 10;

function setup(){
    createCanvas(400,400);
    background(20,20,50);
	frameRate(10);
	//circular geometric shape
	turtle = makeTurtle(random(0,width), random(0,height));
	//spikey geometric shape expanding from the center
	turtle2 = makeTurtle(width/2, height/2);
}

function draw(){
	stroke(255);
	strokeWeight(.8);
	textSize(14);
	text("click anywhere!", 5, 20);

	//circular geometric shape 
	for (var i = 0; i < 30; i++){
		turtle.setColor(color(random(150,255), random(200,255), random(200,255)));
	    turtle.penDown();
	    turtle.setWeight(.2);
	    turtle.left(angle);
	    turtle.forward(side);
}
	turtle.right(10);
    side += .5;

    //spikey geometric shape expanding from the center
	turtle2.setColor(color(random(150,255), random(200,255), random(100,255)));
    turtle2.penDown();
    turtle2.setWeight(.3);
    turtle2.left(angle2);
    turtle2.forward(side2);
    turtle2.right(5);
    side2 += 2;

}

//creating spiral shape on mouseclick 
function mousePressed(){
	turtle = makeTurtle(mouseX, mouseY);
}


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

While I was exploring what I can do with turtles, I noticed how I can make interesting spirals through drawing lines and manipulating angles. At first, I was trying to execute these (not-so-exactly) circular spirals with some random factors on mouseclick, but then it looked somewhat boring with only those on a dark background. So I re-generated one of the spirals that I thought was interesting and placed it at the center. After a while I left the code alone, it made this interesting circular shape even though it started off as a rather angular and spikey shape, which I thought resonated with the circular shapes that are being created on mouseclick. I liked how it has an interactive component, but later on, the user is like swallowed by the dense spiral and notice the connection between the two seemingly different elements.

ssharada-project11-composition

sketch-132.js

//shariwa sharada 
//ssharada@andrew.cmu.edu
//section a 
//project 11

//setting initial starting points for the turtles
dx = 127
dX = 127

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

//creating the turtles using the below trutle commands
  turtle  = new makeTurtle(dx+20, 50);
  turtle2  = new makeTurtle(dx+50, 305);
  turtle3  = new makeTurtle(dx+90, 255);
  turtle4  = new makeTurtle(dx-60, 285);
  turtle5  = new makeTurtle(dx-90, 0);
  turtle6  = new makeTurtle(dx-110, 275);
  turtle7  = new makeTurtle(dx+100, 575);

}

function draw(){

  background(0, 10);
  noFill();

//drawing turtle shapes
  drawShape1();
  drawShape2();
  drawShape3();
  drawShape4();
  drawShape5();
  drawShape6();
  drawShape7();

}

//creating the different circles 
//sizing is varied using  the size of the object moving forward
//speed of the circles moving is depedent on the angle

//the stroke weight of each line depends on the position of the y point of the cursor
//radius of each circle is dependent on the mouseX cursor position

function drawShape1(){
    turtle.setWeight(1 + mouseY/30)
    turtle.right(2 + mouseX/100);
    turtle.forward(1);
}

function drawShape2(){
    turtle2.setWeight(random(2 + mouseY/30,9 + mouseY/30))
    turtle2.right(-3 );
    turtle2.forward(4 + mouseX/100);
}

function drawShape3(){
    turtle3.setWeight(random(1 + mouseY/30, 2 + mouseY/30))
    turtle3.right(6 + mouseX/150);
    turtle3.forward(10);
}

function drawShape4(){
    turtle4.setWeight(random(3 + mouseY/30,6 + mouseY/30))
    turtle4.right(10);
    turtle4.forward(6 + mouseX/175);
}

function drawShape4(){
    turtle4.setWeight(random(4 + mouseY/30, 2 + mouseY/30))
    turtle4.right(10);
    turtle4.forward(6 + mouseX/200);
}

function drawShape5(){
    turtle5.setWeight(random(3 + mouseY/30,6 + mouseY/30))
    turtle5.right(7);
    turtle5.forward(20 + mouseX/225);
}

function drawShape6(){
    turtle6.setWeight(random(1 + mouseY/30, 5 + mouseY/30))
    turtle6.right(-7);
    turtle6.forward(13 + mouseX/250);
}

function drawShape7(){
    turtle7.setWeight(random(1 + mouseY/30, 5 + mouseY/30))
    turtle7.right(-4);
    turtle7.forward(10 + mouseX/250);
}


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

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(255, random(40, 110)),
                  weight: 5,
                  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 was inspired by brush strokes and watercolour paint because of which I tried to create these circles by making the flow of the circles the brush stroke style. As the cursor moved, the thickness of the stroke changes like the brush stroke.

^thin line weights with a lower mouseY value

^thick line weights with a higher mouseY value

heeseoc-LookingOutwards-11

I happened to stumble upon this piece named Automatic Orchestra while I was browsing the internet for algorithmic or computational compositions. It is basically an audio installation, orchestrated by networked machines and people. Students from the University of the Arts, Bremen and the Copenhagen Institute of Interaction Design created the setup, which consists of twelve pods, each with a controller attached to speakers. All pods are wired together to form a network transmitting musical data. Therefore the data travels through each unit before it is passed on to the next one. An interesting part of this project is that each pod will interpret and alter the same data that has been passed on based on its individual algorithmic rule set, which is like having their own personalities as instruments. So the music takes on different qualities depending upon the artist who programmed it. In contrary to the immediate impression of “computational music” that feels very robotic and cyber, this piece has some humanistic attributes that adds an extra point of interest.

http://resonate.io/2015/projects/automatic-orchestra/

keuchuka – looking outwards – 11


Circuli in action

Circuli is a generative musical instrument conceptualized and developed by Batuhan Bozkurt in 2012, and is now an IOS app. The circles on the interface grow at a constant rate, and do not overlap. Bigger circles push and shrink smaller circles when in contact. A circle pops and makes noise when its boundary intersects the center of another circle. The pitch is decided by the position of the circle on the background. The bigger the hole is, the higher the pitch. The envelope of the produced sound seems to be determined by a number of parameters including the final circle size and the time of interaction between two involved circles. This project to me seems to make sense visually and is coherent to its audio component. It creates a multi-sense concert in a way.

source : https://earslap.com/page/circuli.html

keuchuka – project – 11

project11

//Fon Euchukanonchai
//15-104 Section A
//keuchuka@andrew.cmu.edu
//Project-11

//variables for shape change
var addCai = 0
var addDe = 0
var addFu = 0
var addXi = 0
var addAi = 0
var c = 10
var jitter;

//for differnt turtles
var pX = 40 
var pY = 0
var pYMove = 1

var fX = 130
var fY = 100
var fYMove = 1

var tX = 225
var tY = 0
var tYMove = 1

var cX = 310
var cY = 100
var cYMove = 1

var dX = 405
var dY = 0
var dYMove = 1

//loading Chinese character images
function preload(){

	aiPic = loadImage("https://i.imgur.com/o5xIMAW.png")
	fuPic = loadImage("https://i.imgur.com/GA5Rnem.png")
	xiPic = loadImage("https://i.imgur.com/5sx0vnR.png")
	caiPic = loadImage("https://i.imgur.com/LJIdHCA.png")
	dePic = loadImage("https://i.imgur.com/iuYqMLD.png")

}

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

function draw(){
    frameRate(40);
    var backC = 255
    //creating "drag" effect with transaparent bg
    background(backC,60);

	noFill();
	stroke(255,0,0);
	strokeWeight(3)
    rect(0,0,width,height,30)

    noStroke();

////////////AI//////////////

var turtlec = new Turtle(pX + 23, pY - 19);

	//drawing the shape
    for(var i = 0; i < 20; i ++){
    turtlec.penUp();
    turtlec.forward(5)
    turtlec.penDown();
    turtlec.setColor(color(255,0,0,10));
    turtlec.setWeight(2);
    turtlec.forward(c);
    turtlec.right(30+addAi);
    turtlec.forward(c);
    turtlec.right(30+addAi);
    turtlec.forward(c)
    turtlec.right(30+addAi);
    turtlec.forward(c);
    turtlec.left(30+addAi);

    c = random(10,11)
    
    //changing the shape when mouse is pressed
    if (mouseIsPressed){
	addAi = addAi += 1
	}

	if (addAi == 20){
		addAi = 0
	}
}

//inserting the image of character, adding jitter, and reverse motion when it hits walls
image(aiPic, pX+jitter, pY+jitter)
tint(255, 127);    

    pY = pY += pYMove
    jitter = random(1,3)

    if(pY > height-50){
    	pYMove = -1
    } else if (pY < 20){
    	pYMove = 1
    }

// above comments can be used for all following characters

////////////XI//////////////

var turtlec2 = new Turtle(tX + 23, tY - 19);

    for(var i = 0; i < 20; i ++){
    turtlec2.penUp();
    turtlec2.forward(5)
    turtlec2.penDown();
    turtlec2.setColor(color(255,0,0,10));
    turtlec2.setWeight(2);
    turtlec2.forward(c);
    turtlec2.right(30+addXi);
    turtlec2.forward(c);
    turtlec2.right(30+addXi);
    turtlec2.forward(c)
    turtlec2.right(30+addXi);
    turtlec2.forward(c);
    turtlec2.left(30+addXi);

    c = random(10,11)
    if (mouseIsPressed){
	addXi = addXi += 1
	}

	if (addXi == 20){
		addXi = 0
	}

}


image(xiPic, tX+jitter, tY+jitter)
tint(255, 127);

    tY = tY += tYMove

    jitter = random(1,3)


    if(tY > height-50){
    	tYMove = -1
    } else if (tY < 20){
    	tYMove = 1
    }


///////////FU//////////

var turtlec3 = new Turtle(fX + 28, fY - 19);

    for(var i = 0; i < 20; i ++){
    turtlec3.penUp();
    turtlec3.forward(5)
    turtlec3.penDown();
    turtlec3.setColor(color(255,0,0,10));
    turtlec3.setWeight(2);
    turtlec3.forward(c);
    turtlec3.right(30+addFu);
    turtlec3.forward(c);
    turtlec3.right(30+addFu);
    turtlec3.forward(c)
    turtlec3.right(30+addFu);
    turtlec3.forward(c);
    turtlec3.left(30+addFu);

    c = random(10,11)
  
  if (mouseIsPressed){
	addFu = addFu += 1
	}

	if (addFu == 20){
		addFu = 0
	}

}


image(fuPic, fX+jitter, fY+jitter)
tint(255, 127);

    fY = fY += fYMove



    jitter = random(1,3)


    if(fY > height-50){
    	fYMove = -1
    } else if (fY < 25){
    	fYMove = 1
    }




///////////CAI//////////

var turtlec4 = new Turtle(cX + 28, cY - 19);

    for(var i = 0; i < 20; i ++){
    turtlec4.penUp();
    turtlec4.forward(5)
    turtlec4.penDown();
    turtlec4.setColor(color(255,0,0,10));
    turtlec4.setWeight(2);
    turtlec4.forward(c);
    turtlec4.right(30+addCai);
    turtlec4.forward(c);
    turtlec4.right(30+addCai);
    turtlec4.forward(c)
    turtlec4.right(30+addCai);
    turtlec4.forward(c);
    turtlec4.left(30+addCai);

    c = random(10,11)
  
  if (mouseIsPressed){
	addCai = addCai += 1
	}

	if (addCai == 20){
		addCai = 0
	}

}




image(caiPic, cX+jitter, cY+jitter)
tint(255, 127);

    cY = cY += cYMove

    jitter = random(1,3)


    if(cY > height-50){
    	cYMove = -1
    } else if (cY < 25){
    	cYMove = 1
    }

///////////DE//////////

var turtlec5 = new Turtle(dX + 28, dY - 19);

    for(var i = 0; i < 20; i ++){
    turtlec5.penUp();
    turtlec5.forward(5)
    turtlec5.penDown();
    turtlec5.setColor(color(255,0,0,10));
    turtlec5.setWeight(2);
    turtlec5.forward(c);
    turtlec5.right(30+addDe);
    turtlec5.forward(c);
    turtlec5.right(30+addDe);
    turtlec5.forward(c)
    turtlec5.right(30+addDe);
    turtlec5.forward(c);
    turtlec5.left(30+addDe);

    c = random(10,11)

  if (mouseIsPressed){
	addDe = addDe += 1
	}

	if (addDe == 20){
		addDe = 0
	}


}




image(dePic, dX+jitter, dY+jitter)
tint(255, 127);

    dY = dY += dYMove

    jitter = random(1,3)


    if(dY > height-50){
    	dYMove = -1
    } else if (dY < 20){
    	dYMove = 1
    }




}



//=======================================================
// TURTLE GRAPHICS IMPLEMENTATION

function Turtle(x, y) {
  this.x = x;
  this.y = y;
  this.angle = 0.0;
  this.penIsDown = true;
  this.color = color(128);
  this.weight = 1;
 
  this.left = function(d) {
    this.angle -= d;
  };
  this.right = function(d) {
    this.angle += d;
  };
  this.forward = function(p) {
    var rad = radians(this.angle);
    var newx = this.x + cos(rad) * p;
    var newy = this.y + sin(rad) * p;
    this.goto(newx, newy);
  };
  this.back = function(p) {
    this.forward(-p);
  };
  this.penDown = function() {
    this.penIsDown = true;
  };
  this.penUp = function() {
    this.penIsDown = false;
  };
  this.goto = function(x, y) {
    if (this.penIsDown) {
      stroke(this.color);
      strokeWeight(this.weight);
      line(this.x, this.y, x, y);
    }
    this.x = x;
    this.y = y;
  };
  this.distanceTo = function(x, y) {
    return sqrt(sq(this.x - x) + sq(this.y - y));
  };
  this.angleTo = function(x, y) {
    var absAngle = degrees(atan2(y - this.y, x - this.x));
    var angle = ((absAngle - this.angle) + 160) % 160.0;
    return angle;
  };
  this.turnToward = function(x, y, d) {
    var angle = this.angleTo(x, y);
    if (angle < 180) {
      this.angle += d;
    } else {
      this.angle -= d;
    }
  };
  this.setColor = function(c) {
    this.color = c;
  };
  this.setWeight = function(w) {
    this.weight = w;
  };
  this.face = function(angle) {
    this.angle = angle;
  }
}

The shape that turtle graphics can make really reminded me of the stamps of lucky red Chinese stamps (they’re flower-like radial compositions). I tried to replicate that in this project, having these stamps bounce in a banner type organization and taking advantage of turtle graphics in loop, have it change shape slightly when the mouse is pressed.


normal state of shape

changed state of shape when mouse is pressed

jknip-Project-11-Composition

sketch

/*Jessica Nip
Section A
jknip@andrew.cmu.edu
Project-11
*/
var t6;
var start;
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;
}

//--------------turtle API above-------

//design simple pattern
function pattern(t6) {
    t6.forward(60);
    t6.left(90);
    t6.forward(40);
    t6.left(90);
    t6.forward(30);
    t6.left(90);
    t6.forward(40);
    t6.left(90);
    t6.forward(20);
    t6.right(90);
    t6.forward(20)
    t6.right(90);
    t6.forward(30);
    t6.right(90);
    t6.forward(40);
    t6.right(90);
    t6.forward(50);
    t6.right(90);
    t6.forward(50);
    t6.left(90);
}


function setup() {
    createCanvas(300,300);
    background(0);
    //define given parameters
    strokeJoin(MITER);
    strokeCap(PROJECT);
    //set row one position
    start = 30;
    t6 = makeTurtle(0,start);
    //determine initial color and weight
    t6.setColor(0);
    t6.setWeight(1); 
}

function draw() {
    //maximize width and height across canvas
    while(t6.y < height){
        while(t6.x < width) { 
            pattern(t6);
        }
        //redefine starting position for other rows
        t6.penUp();
        start = start + 100;
        t6.goto(0,start);
        t6.penDown();
    }
}

//when mouse is pressed, rndomize color and thickness
function mousePressed(){
    t6.x = mouseX;
    start = mouseY;
    t6.y = mouseY;
    t6.setColor(color(200, random(0,100),random(0,100)));
    t6.setWeight(random(1,3));
}

Here are some possible abstract gradient compositions that can be created with my sketch. I wanted to utilize a simple pattern created in black and white below, and transform that into warm hues represented by varying thicknesses of the repetition.

yushano_Looking Outwards 11

Florian Hecker: “Event, Stream, Object”

“Event, Stream, Object is a sound installation by German artist Florian Hecker, that has now been acquired for MMK’s collection in Frankfurt. Presented in the exhibition ”Radical Conceptual“ (February 19 – August 22, 2010), the work consists of a loudspeaker system suspended from the ceiling used to convey a computer-generated, eight-channel sound composition. Each individual loudspeaker plays a sequence of sounds allocated to it and, in itself complex, becomes a part of the acoustic whole with its differing frequencies and volumes”.

What I like about this sound installation is that the mirrors that hung from the ceiling can actually alter the atmospheric sounds’ waves, besides that it can reflect the visitors’ appearance. His concept of incorporating space and architecture into music. His projects are not actually traditional music that is composed. Rather, it is more like a interactive sound art because the sound shift and vary depending on the listener. When the audience change their physical locations in the space and also their personal biases and points of reference, the sound will change as well. I think his idea that listing is driven by the desire for understanding is shown here in a very elegant way. Also, the mirrors are able to generate eight channels of sound, which makes the sound very dimensional.
I think the idea of taking the listeners into account of sound generating is really appealing and interesting. It not only attracts the audience to pay attention on or play with your work, but also provides more opportunities for artists in creation.

akluk – Section A – Looking outwards-11

For week 11’s Looking Outwards, I have decided to write about “If vi was ix” by TRUMPIN or Gerhard Trimpin.

I have written about a project of his in a previous looking outwards. In this project, he created a sound sculpture as the center piece of the Seattle’s Experience Music Project. It is basically a 50 ft sculpture with seven hundred acoustic and electric guitars. He also programmed the guitars to play music from all different kinds of genre from Scottish ballads to punk rock. He also wrote it so that the guitar could tune itself to make sure that it is in tune and in sync. It is also called the guitar tornado because it resembles the shape of a tornado. It doesn’t describe specifically what algorithms are used to create the program that plays different genres of music. What TRUMPIN always seems to do with his work is not only involve music or sound, but also incorporate a very unique visual aesthetic. Attached below is the link to the piece of work.

Link

mmiller5-Project-11

sketch

var turts = [];
var turtCount = 20; //set how many turtles you want

function setup() {
    createCanvas(400, 400);
    background(255);
    //populate turts array, make them different colors and weights
    for (var i = 0; i < turtCount; i ++) {
	turts[i] = makeTurtle(random(width), random(height));
	turts[i].setColor(map(i, 0, turtCount, 0, 255));
	turts[i].setWeight(i + 1)
    }
}

function draw() {
    //make first turtle follow mouse
    turts[0].turnToward(mouseX, mouseY, turts[0].angleTo(mouseX, mouseY));
    turts[0].forward(lerp(0, turts[0].distanceTo(mouseX, mouseY), .02));
    //make rest of turtles follow previous turtle
    for (var i = 1; i < turts.length; i ++) {
	turts[i].turnToward(turts[i - 1].x, turts[i - 1].y,
			    turts[i].angleTo(turts[i - 1].x, turts[i - 1].y));
	turts[i].forward(lerp(0, turts[i].distanceTo(turts[i - 1].x,
						     turts[i - 1].y), .02));
    }
}


// Turtles!
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 thinking about animal imprinting and thought it would be neat to have some turtles imprinted on each other.  One turtle follows the mouse, the next turtle follows that turtle, and so on, and since each of the turtles is a different color and size you get some cool line effects on the canvas.

jknip-SectionA-LookingOutwards-11

Atlas app’s visual style

Atlås by Agoston Nagy (2017)

Atlås is an “anti game [app] environment” where music is generated via a conversational cognitive space — users answer questions surrounding presence, human cognition and imagination, while also playing simple game mechanics that create sound. I really admire the visual aesthetic of this app, and the minimal interactions it has with the users — making users feel like music generation is a simple task for anyone. The app is developed using open source tools, specifically using p5js/javascript. The artist aims to use the experience to investigate the autonomy of algorithms and machine learning. Nagy was able to showcase his artistic sensibilities through interactivity and machine learning — he started developing this as part of his PhD thesis, and was especially interested in combining sound, visual, and literary analogies sensitively and in a visually pleasing manner.

http://www.creativeapplications.net/processing/atlas-guided-generative-and-conversational-music-experience-for-ios/

http://www.binaura.net/atlas/