Category: Section B

Turtle Composition

// Matthew Erlebacher
// Section B
// merlebac@andrew.cmu.edu
// Project-11

var turtle1;
var turtle2;
var turtle3;
var turtle4;

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

function setup() {
    createCanvas(480, 480);
    background(125);

    var color1 = (255, 255, 0);
    // Creates yellow color
    turtle1 = makeTurtle(0, height / 2);
    // Creates the first turtle
    turtle1.penDown();
    turtle1.setColor(color1);
    turtle1.setWeight(4);
    // Prepares turtle for movement

    var color2 = (255, 0, 0);
    // Creates red color
    turtle2 = makeTurtle(width, height / 2);
    // Creates second turtle
    turtle2.penDown();
    turtle2.setColor(color2);
    turtle2.setWeight(4);
    // Prepares turtle for movement

    var color3 = (0, 255, 0);
    // Creates green color
    turtle3 = makeTurtle(width / 2, 0);
    // Creates third turtle
    turtle3.penDown();
    turtle3.setColor(color3);
    turtle3.setWeight(4);
    // Prepares turlte for movement

    var color4 = (0);
    // Creates black color
    turtle4 = makeTurtle(width / 2, height);
    // Creates fourth turtle
    turtle4.penDown();
    turtle4.setColor(color4);
    turtle4.setWeight(4);
    // Prepares turtle for movement
}

function draw() {
    turtle1.forward(1);
    // Moves turtle1 forward
    turtle1.turnToward(mouseX, mouseY, 1);
    // Turns turtle1 toward mouse

    turtle2.forward(1);
    // Moves turtle2 forward
    turtle2.turnToward(480 - mouseX, mouseY, 1);
    // Turns turtle2 away from mouseX toward mouseY

    turtle3.forward(1);
    // Moves turtle3 forward
    turtle3.turnToward(mouseX, 480 - mouseY, 1);
    // Turns turtle3 toward mouseX away from mouseY

    turtle4.forward(1);
    // Moves turtle4 forward
    turtle4.turnToward(480 - mouseX, 480 - mouseY, 1);
    // Turns turtle4 away from mouse
}

// 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?

Overall this project wasn’t that difficult. I decided to have the turtles movements based on the location of the mouse. Each of them have different interactions with the mouse.

sketch

var circPositions = [33, 66, 132, 198, 264, 330]; //5 dots in the middle

function setup() {
  createCanvas(400, 400);
  background(0);
  frameRate(10); //reduce lag, choose frequency of updates
}

function draw() {
  fill(mouseX, mouseY, mouseY) //color interacts with mouse position
  for(var i = 1; i < 6; i++) { //create the dots
    ellipse(circPositions[i], 200, 10, 10);
  }
  for(var b = 1; b < 100; b++){ //create turtle lines / marks with loop
    var turtle = makeTurtle(circPositions[b], random(0, 400)); //set variable for turtle
     turtle.penDown();
     turtle.setColor(mouseX); //shade depending on the mouse position
     turtle.setWeight(0.1 * mouseY / 10); //changes weight depending on mouse position
     turtle.right(random(1, 360)); //mark changes depending on a random factor
     turtle.forward(3); //small mark
     
  if (mouseIsPressed === true) { //when mouse is pressed, make large web like lines
  makeTurtle(circPositions[b], 100);
  turtle.penUp();
  turtle.right(90);
  turtle.setWeight(1);
  turtle.penDown();
  turtle.forward(100);
}
     
  if (keyIsPressed === true){ //clear and reset canvas
       background(0);
}
}




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

I wanted to create something like a spider web using the turtle tool we were given. I allowed for two different types of art to be created. The results differ depending on the user and their mouse movements.

Although I wouldn’t say that this project is polished or complete, I think it was a great learning opportunity for me. While playing around with a turtle, or many turtles, creating hundreds of thin lines, I realized that turtle graphics (or at least that style of turtle graphics) allowed me to create an entirely different aesthetic — one reminiscent of hand drawing.

This is a bit ironic, since the final product is not that reminiscent of hand drawing…

After I had gotten all excited about making these pencil sketch images, I began to play around with more abstract drawings. There were a bunch of these that I was playing around with, and honestly I’m not sure which I like best compositionally, but the last one I worked on was this eyeball-esque shape.

The program takes a bunch of straight lines, and bends them towards the center, creating the illusion of a hard circle filled with a bunch of ellipses.

Then, as the line reaches the center, sin() switches from positive to negative, and it bends in the other direction, moving out towards the parameter.

The lines then proceed to curl again towards the center, creating a sort of loose rim around the circle. I enjoy the slowing effect as the line curls, since it creates the feeling of tension or elasticity. I hope you enjoy!

sketch

//Jonathan Perez
//Section B
//jdperez@andrew.cmu.edu
//Project 11
var t1; //turtle
var r0 = [] //initialized random radii from center
var face1 = [] //initialized random face
var face2 = [] //second initialzed face before drawing line
var w = .25 //starting angle

function curl(d) {
    //function that produces the furling and unfurling effect
    //the w variable is incremented to return values from 1 to -1 smoothly
    //and the value is scaled by d / 9
    return sin(2 * PI * (w)) * d / 9; 
}


function drawLine() {
    t1.penDown();
    for (var i = 0; i < 53; i++) {
        var d = t1.distanceTo(240, 240); //turtle distance from center
        t1.setWeight(d / 400 + 0.00); //line thickens as it gets further from center
        t1.forward(10);
        t1.left(curl(d)); //
        if (t1.x > width || t1.x < 0 || t1.y > height || t1.y < 0) {
            return;
        }
    }
}


function setup() {
    createCanvas(480, 480);
    t1 = makeTurtle(240, 240);
    for (var i = 0; i < 250; i++) {
        //create the starting points for each line
        face1.push(random(360));
        r0.push(random(0 + random(20)));
        face2.push(random(360));
    }
}

function draw() {
    //background(200, 200, 170);
    background(255)
    //fill(0);
    //ellipse(width/2, height/2, 37, 37)
    t1.setColor(0);
    t1.setWeight(0.3);
    for (var i = 0; i < 250; i++) {
        t1.penUp();
        //go to respective starting position
        t1.goto(width/2, height/2);
        t1.face(face1[i]);
        t1.forward(r0[i]);
        t1.face(face2[i]);
        //draw line
        drawLine();
    }
    w += .0025
}

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

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

SaveSave

sketch

/*Rachel Park
rsp1@andrew.cmu.edu
Section B @ 10:30AM
Project 11: Turtle...anything*/

var myTurtle;//global variable for defining a new name for the turtle
function setup() {
  createCanvas(330,400);
  background(0);
  noLoop();
  myTurtle = new makeTurtle(width/2-50,20)//the turtle
}

function draw() {
  var dragon = dragonCurve(14);//variable to substitute in for function
  turtleDraw(dragon,200,90,2);//drawing the line
}

function dragonCurve(depth){//using L-system logic to create pattern
    if(depth === 0){
      return 'FX';}

    var turtle = dragonCurve(depth - 1);
    var newTurtle = '';
    for(var i = 0; i < turtle.length; i++){
        if(turtle.charAt(i) === 'X'){
            newTurtle += 'X+YF+';
        }
        else if (turtle.charAt(i) === 'Y'){
            newTurtle += '-FX-Y';
        }
        else {
            newTurtle += turtle.charAt(i);
        }
    }
    return newTurtle;
}


//------------------------------------------------
function turtleDraw(text, startx, starty, length) {//using turtle functions to draw out the patterns
    var direction = 0;
    var x = startx;//initial horizontal position of line
    var y = starty;//initial verticle position of line

    for(var i = 0; i < text.length; i++){

        if(text.charAt(i) === 'F'){
            //'F', draw forward length in direction
            var endx = x + length * Math.cos(direction * 0.017453292519);
            var endy = y + length * Math.sin(direction * 0.017453292519);

            var red = x/400 * 255;
            var green = y/400 * 255;
            var blue = (x + y + 300)/400 * 255;
            c = stroke(red,green,blue);
            myTurtle.setColor(c);//setting gradient color of lines

            line(x,y,endx,endy);//drawing the line
            x = endx;//reinitializing to new horizontal position
            y = endy;//reinitializing to new verticle position
        }
        else if(text.charAt(i) === '-'){
            //90 degrees added to direction
            direction += 90;
        }
        else if(text.charAt(i) === '+'){
            //90 degrees substracted from direction
            direction -= 90;
        }
    }
}
//-------------------------------------------------------
//other turtle functions

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 turtleReset(){
  this.reset = 0;
}

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,
    reset:turtleReset};

    return turtle;}

In searching for inspiration, I happened across the notion of the L-systems. I really liked how the visual of this specific patterned looked and wanted to try it out for myself. Although I did find resources to help me with the L-systems logic to generate the pattern because of its specific equations and such, I found that the over code was pretty straightforward in its use of the turtle graphics functions.

sketch

/*
Jamie Ho
jamieh@andrew.cmu.edu
10:30
Project 11
*/


var hexagons;       //creating variablefor turtle
var len = 50;       //length of each triangle side
var factor = 0.15;  //factor to increase len size by
var angle = 0;      //initial angle
var colour = 255;   //white
var cFactor = 0.45; //amount to decrease the whiteness by

function setup() {
    createCanvas(400, 400);
    hexagons = new makeTurtle(width*0.8, height*0.4); //position of hexagons
    noLoop();
}

function draw() {
    background(0);

    hexagons.penDown();
    for(var i = 0; i < 500; i++){
        drawHexagon(len);           //call function with parameter of length for size of hexagons
        hexagons.face(angle);       //rotate hexagons
        
        //updates
        colour -= cFactor;          //turning white into black
        len += factor*i;            //increasing length of each side of hexagon
        angle += 3;                 //increasing rotation
    }
    hexagons.penUp();

}


function drawHexagon(length){
    hexagons.penDown();
    hexagons.setWeight(1);
    //triangle
    for(var i = 0; i < 6; i++){     // i < 6 to create hexagon
        hexagons.setColor(colour);  //setting colour for hexagon which changes for each time it runs through for loop
        hexagons.forward(length);   //move forward by 'length' dimension
        hexagons.right(60);         //move pen right by 60 degrees
    }
    hexagons.penUp();
}


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

With the turtle graphics, I wanted to use hexagons, which is a very simple shape, and turn it into an abstracted drawing that makes the shape of the hexagon almost unrecognisable. I also wanted to make the code efficient with use of loops unlike the previous assignment 10A which required a lot of repeated lines of motion.

Below are images of the final product and other results I got from experimenting with composition.