Category: Project-11-Composition

For this project I initially wanted to create a sort of game where a line would drawing in different directions randomly and you could click around the screen to change the direction it travels.

However, the more focused I became on making it like a game interface, the further I felt it strayed from the project. I took a step back and decided to instead create a more abstract piece that random flowed across the screen.

I added multiple lines starting from the same point to fill up the page and create a dynamic image. Then I wanted to play around with colors and changing tones. I made it so that as the line drew down the page, it would automatically darken.

However, as you can see on the right image, the user can also speed up the progression of the darkening by clicking the screen as well to darken the line color.

I also tried thinning the line weight, but for the final i decided to go with a medium line weight between the original and the tested thinner line:

sketch

var turtle1; //global turtle variable
var C = 255; //color variable

function setup() {
	createCanvas(480, 480);
	background(245, 228, 215);
	frameRate(20); //sped up frame rate
	strokeJoin(ROUND); //round joints
	strokeCap(ROUND); //round ends

	turtle1 = makeTurtle(width/2, 0); //turtle one starting point
	turtle1.setColor(color(C)); //initial color (white)
	turtle1.setWeight(4); //weight of line
	turtle1.penDown(); //pen in down
	turtle1.right(90); //turn 90 degrees right to face down
	turtle1.forward(10); //drwa forward 10 pixels

}

function draw() {
	var num = random(1, 9); //var to randomize direction
	if(num > 1 & num < 3){ //1/3 of time draws 10 pixels right
		turtle1.face(0);
		turtle1.forward(10);
	}
	if(num > 4 & num < 6){ //1/3 of time draws 10 pixels down
		turtle1.face(90);
		turtle1.forward(10);
	}
	if(num > 7 & num < 10){ //1/3 of time draws 10 pixels left
		turtle1.face(180);
		turtle1.forward(10);
	}
	if(turtle1.y > height || turtle1.x < 0 || turtle1.x > width){ //whenever goes off page, restarts at top
		turtle1.penUp();
		turtle1.goto(width/2, 0);
		turtle1.penDown();
	}
	if(turtle1.y < 1){ //each time drawing restarts at top, color resets to white
		C = 255;
		turtle1.setColor(C);
	}
	if(frameCount % 10 == 0){ //automatically darkens color every 10 frames
		C += -10;
		turtle1.setColor(C);
	}
}	

function mousePressed(){ //whenever mouse is pressed, color also darkens
	C += -10;
	turtle1.setColor(C);
}

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

sketch

//Ashley Chan
//Section C
//ashleyc1@andrew.cmu.edu
//Assignment-10-B

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;

}

//rainbow shape
function makeShape(turtle) {

    //make one hexagon
    for(i = 0; i < 6; i++) {

        //rainbow colors
        var r = random(100, 255);
        var g = random(100, 255);
        var b = random(100, 255);
      

        turtle.setColor(color(r, g, b));
        turtle.setWeight(1);

        turtle.forward(50);
        turtle.left(60);

    }
}

//cream shape
function makeShape2(turtle2) {

    //make one shape
    for(i = 0; i < 8; i++) {

        turtle2.setColor(color(249, 237, 217));
        turtle2.setWeight(2);

        turtle2.forward(60);
        turtle2.left(80);

    }
}

//perriwinkle shape
function makeShape3(turtle3) {

    for(i = 0; i < 8; i++) {

        turtle3.setColor(color(172, 195, 249));
        turtle3.setWeight(1);

        turtle3.forward(60);
        turtle3.left(100);

    }
}


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

     //name spiral motion
    var spiral = makeTurtle(200, 170);
    var shape2 = makeTurtle(320, 300);
    var shape3 = makeTurtle(120, 420);

    var angle = random(60, 140)
    var positionX = 0;

      //make a bunch of repeating shapes
      for(var i = 0; i < 80; i++) {

          makeShape(spiral);

          spiral.penUp();
          spiral.right(angle);
          spiral.forward(positionX);

          //draw again
          spiral.penDown();

          //increase space inbetween initial shapes the more you draw them
          positionX += 1; 
      
      }

      for(var j = 0; j < 10; j++) {

          makeShape2(shape2);

          shape2.penUp();
          shape2.right(angle);
          shape2.forward(6);
          shape2.penDown();
          }
      
        for (var k = 0; k < 80; k++ ) {
          makeShape3(shape3);

          shape3.penUp();
          shape3.right(angle * .5);
          shape3.forward(6);
          shape3.penDown();
          }
}

function draw() {

}

function mouseClicked() {

  setup();

}

I really like making spirographs. As a kid I doodled them all the time and a lot of the projects I’ve done for this class include spirographs but I like that I’m learning how to draw them through different techniques: this week via turtle graphics.

Slight alterations to the spirographs’ angles and spaces are changed when the mouse is clicked.

Iterations:

sketch

//Karina Chiu
//Section C
//karinac@andrew.cmu.edu
//Project 11

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(400,400);
    background(0);
}

function draw() {
    //draw turtle head
    var t1 = makeTurtle(width*10/12,height*3/10);
    t1.setColor(255);
    t1.setWeight(5);
    t1.left(50);
    t1.forward(15);
    t1.left(15);
    t1.forward(10);
    t1.left(10);
    t1.forward(10);
    t1.left(10);
    t1.forward(20);
    t1.left(10);
    t1.forward(20);
    t1.left(30);
    t1.forward(10);
    t1.left(30);
    t1.forward(10);
    t1.left(20);
    t1.forward(10);
    t1.left(5);
    t1.forward(10);
    t1.left(20);
    t1.forward(20);
    t1.left(15);
    t1.forward(10);
    t1.left(15);
    t1.forward(20);
    t1.left(20);
    t1.forward(20);

    //draw outer shell
    var t2 = makeTurtle(330,140);
    t2.setColor(255);
    t2.setWeight(6);
    t2.left(110);
    t2.forward(10);
    t2.left(10);
    t2.forward(10);
    for(var i=0; i < 3; i++) {
        t2.left(5);
        t2.forward(10);
    }
    for(var i = 0; i < 5; i++) {
    t2.left(10);
    t2.forward(15);
    }
    t2.left(2);
    t2.forward(20);
    t2.left(18);
    t2.forward(20);
    for(var i = 0; i < 10; i++) {
        t2.left(5);
        t2.forward(20);
    }
    for(var i = 0; i < 3; i++) {
        t2.left(7);
        t2.forward(15);
    }
    t2.left(10);
    t2.forward(15);
    for(var i = 0; i < 11; i++) {
        t2.left(8);
        t2.forward(12);
    }

    //inner shell
    var t3 = makeTurtle(315,150);
    t3.setColor(255);
    t3.setWeight(3);
    t3.left(110);
    t3.forward(8);
    t3.left(5);
    t3.forward(8);
    for(var i = 0; i < 8; i++) {
    t3.left(8);
    t3.forward(10);
    }
    t3.left(5);
    t3.forward(20);
    t3.left(20);
    t3.forward(20);
    for(var i = 0; i < 8; i++) {
        t3.left(6);
        t3.forward(22);
    }
    for(var i = 0; i < 3; i++) {
        t3.left(8);
        t3.forward(15);
    }
    t3.left(12);
    t3.forward(15);
    for(var i = 0; i < 8; i++) {
        t3.left(9);
        t3.forward(10);
    }

    //shell pattern 1
    var t4 = makeTurtle(230,110);
    t4.setColor(255);
    t4.setWeight(5);
    t4.left(5);
    for(var i = 0; i < 3; i++) {
        t4.forward(20);
        t4.right(90);
        t4.forward(20);
        t4.left(90);
    }
    t4.forward(20);
    t4.right(70);

    //wave pattern
    t4.setWeight(4);
    t4.forward(10);
    t4.setWeight(3);
    for(var i = 0; i < 8; i++) {
        t4.left(12);
        t4.forward(2);
    }
    t4.forward(10);
    t4.setWeight(2);
    for(var i = 0; i < 4; i++) {
        t4.right(20);
        t4.forward(7);
    }
    for(var i = 0; i < 3; i++) {
        t4.right(30);
        t4.forward(5); 
    }
    t4.right(90);
    t4.forward(10);
    t4.left(40);
    t4.forward(5);
    t4.left(40);
    t4.forward(5);
    t4.left(20);
    t4.forward(5);
    t4.left(50);
    t4.forward(10);
    t4.left(50);
    t4.forward(10);
    t4.left(30);
    t4.forward(10);
    t4.left(30);
    t4.forward(10);


    for(var i = 0; i < 4; i++) {
        t4.right(20);
        t4.forward(6);
    }
    for(var i = 0; i < 3; i++) {
        t4.right(30);
        t4.forward(5); 
    }
    t4.right(90);
    t4.forward(10);
    t4.left(40);
    t4.forward(5);
    t4.left(40);
    t4.forward(5);
    t4.left(20);
    t4.forward(5);
    t4.left(50);
    t4.forward(10);
    t4.left(50);
    t4.forward(10);
    t4.left(30);
    t4.forward(15);


    //shell pattern 2
    var t5 = makeTurtle(220,110);
    t5.setColor(255);
    t5.setWeight(2);
    t5.right(40);
    t5.forward(110);
    var t6 = makeTurtle(200,120);
    t6.setColor(255);
    t6.setWeight(4);
    t6.right(40);
    t6.forward(120);
    var t7 = makeTurtle(210,115);
    t7.setColor(255);
    t7.setWeight(2);
    t7.right(40);
    for(var i = 0; i < 24; i++) {
        t7.penDown();
        t7.forward(2);
        t7.penUp();
        t7.forward(3);
    }



    //shell pattern 3
    var t8 = makeTurtle(190,125);
    t8.setColor(255);
    t8.setWeight(2);
    t8.right(90);
    t8.forward(15);
    t8.left(95);
    for(var i = 0; i < 5; i++) {
        t8.forward(15);
        t8.right(90);
        t8.forward(15);
        t8.left(90);
    }
    t8.forward(20);
    t8.right(70);

    //wave pattern
    t8.setWeight(4);
    t8.forward(10);
    t8.setWeight(3);
    for(var i = 0; i < 6; i++) {
        t8.left(12);
        t8.forward(2);
    }
    t8.left(20);
    t8.forward(20);
    t8.right(10);
    t8.forward(10);
    for(var i = 0; i < 4; i++) {
        t8.right(15);
        t8.forward(8);
    }
    for(var i = 0; i < 3; i++) {
        t8.right(30);
        t8.forward(7); 
    }
    t8.right(90);
    t8.forward(15);
    t8.left(40);
    t8.forward(5);
    t8.left(40);
    t8.forward(5);
    t8.left(20);
    t8.forward(10);
    t8.left(50);
    t8.forward(15);
    t8.left(50);
    t8.forward(15);
    t8.left(30);
    t8.forward(10);
    t8.left(30);
    t8.forward(15);


    for(var i = 0; i < 4; i++) {
        t8.right(10);
        t8.forward(7);
    }
    

    //shell pattern 4
    var t9 = makeTurtle(160,145);
    t9.setColor(255);
    t9.setWeight(4);
    t9.left(4);
    for(var i = 0; i < 4; i++) {
        t9.forward(20);
        t9.right(90);
        t9.forward(20);
        t9.left(90);
    }
    t9.forward(20);

    //wave pattern
    t9.setWeight(4);
    t9.right(80);
    t9.forward(10);
    t9.setWeight(2);
    for(var i = 0; i < 8; i++) {
        t9.left(12);
        t9.forward(2);
    }
    t9.forward(10);
    t9.setWeight(1);
    for(var i = 0; i < 4; i++) {
        t9.right(20);
        t9.forward(7);
    }
    for(var i = 0; i < 3; i++) {
        t9.right(30);
        t9.forward(5); 
    }
    t9.right(90);
    t9.forward(10);
    t9.left(40);
    t9.forward(5);
    t9.left(40);
    t9.forward(5);
    t9.left(20);
    t9.forward(5);
    t9.left(50);
    t9.forward(10);
    t9.left(50);
    t9.forward(10);
    t9.left(40);
    t9.forward(10);
    t9.left(30);
    t9.forward(10);


    for(var i = 0; i < 4; i++) {
        t9.right(20);
        t9.forward(7);
    }
    for(var i = 0; i < 3; i++) {
        t9.right(30);
        t9.forward(5); 
    }
    t9.right(90);
    t9.forward(10);
    t9.left(40);
    t9.forward(5);
    t9.left(40);
    t9.forward(5);
    t9.left(20);
    t9.forward(5);
    t9.left(50);
    t9.forward(10);
    t9.left(50);
    t9.forward(10);
    t9.left(60);
    t9.forward(15);

    for(var i = 0; i < 4; i++) {
        t9.right(20);
        t9.forward(7);
    }
    for(var i = 0; i < 3; i++) {
        t9.right(30);
        t9.forward(5); 
    }
    t9.right(90);
    t9.forward(10);
    t9.left(40);
    t9.forward(5);
    t9.left(40);
    t9.forward(5);
    t9.left(20);
    t9.forward(5);
    t9.left(50);
    t9.forward(10);
    t9.left(50);
    t9.forward(10);
    t9.left(40);
    t9.forward(10);
    t9.left(50);
    t9.forward(10);

    for(var i = 0; i < 4; i++) {
        t9.right(20);
        t9.forward(7);
    }
    for(var i = 0; i < 3; i++) {
        t9.right(30);
        t9.forward(5); 
    }
    t9.right(90);
    t9.forward(10);
    t9.left(40);
    t9.forward(5);
    t9.left(40);
    t9.forward(5);
    t9.left(20);
    t9.forward(5);
    t9.left(50);
    t9.forward(10);
    t9.left(50);
    t9.forward(10);
    t9.left(30);
    t9.forward(10);
    t9.left(30);
    t9.forward(10);

    //shell pattern 5
    var t10 = makeTurtle(170,155);
    t10.setColor(255);
    t10.setWeight(1);
    t10.right(41);
    for(var i = 0; i < 5; i++) {
        for (var j = 0; j < 12; j++) {
            t10.right(30);
            t10.forward(2);
        }
        t10.penUp();
        t10.forward(28);
        t10.penDown();
    }
    var t11 = makeTurtle(170,165);
    t11.setColor(255);
    t11.setWeight(1);
    t11.right(41);
    for(var i = 0; i < 5; i++) {
        for (var j = 0; j < 12; j++) {
            t11.right(30);
            t11.forward(2);
        }
        t11.penUp();
        t11.forward(28);
        t11.penDown();
    }

    var t12 = makeTurtle(170,175);
    t12.setColor(255);
    t12.setWeight(1);
    t12.right(41);
    for(var i = 0; i < 5; i++) {
        for (var j = 0; j < 12; j++) {
            t12.right(30);
            t12.forward(2);
        }
        t12.penUp();
        t12.forward(28);
        t12.penDown();
    }
    var t13 = makeTurtle(160,175);
    t13.setColor(255);
    t13.setWeight(1);
    t13.right(41);
    for(var i = 0; i < 5; i++) {
        for (var j = 0; j < 12; j++) {
            t13.right(30);
            t13.forward(2);
        }
        t13.penUp();
        t13.forward(28);
        t13.penDown();
    }
    var t14 = makeTurtle(150,175);
    t14.setColor(255);
    t14.setWeight(1);
    t14.right(41);
    for(var i = 0; i < 5; i++) {
        for (var j = 0; j < 12; j++) {
            t14.right(30);
            t14.forward(2);
        }
        t14.penUp();
        t14.forward(28);
        t14.penDown();
    }

    //shell pattern 6
    var t15 = makeTurtle(130,180);
    t15.setColor(255);
    t15.setWeight(2);
    t15.right(90);
    t15.forward(10);
    t15.left(95);
    for(var i = 0; i < 9; i++) {
        t15.forward(10);
        t15.right(90);
        t15.forward(10);
        t15.left(90);
    }
    t15.right(70);

    //wave pattern
    t15.setWeight(4);
    t15.forward(10);
    t15.setWeight(5);
    for(var i = 0; i < 6; i++) {
        t15.left(12);
        t15.forward(2);
    }
    t15.left(20);
    t15.forward(10);
    t15.right(10);
    t15.forward(20);
    for(var i = 0; i < 4; i++) {
        t15.right(15);
        t15.forward(8);
    }
    for(var i = 0; i < 3; i++) {
        t15.right(30);
        t15.forward(7); 
    }
    t15.right(90);
    t15.forward(10);
    t15.left(40);
    t15.forward(5);
    t15.left(40);
    t15.forward(5);
    t15.left(30);
    t15.forward(15);
    t15.left(50);
    t15.forward(15);
    t15.left(50);
    t15.forward(15);
    t15.left(30);
    t15.forward(10);

    t15.left(20);
    t15.forward(10);
    for(var i = 0; i < 4; i++) {
        t15.right(15);
        t15.forward(8);
    }
    for(var i = 0; i < 3; i++) {
        t15.right(30);
        t15.forward(7); 
    }
    t15.right(90);
    t15.forward(10);
    t15.left(40);
    t15.forward(5);
    t15.left(40);
    t15.forward(5);
    t15.left(30);
    t15.forward(15);
    t15.left(50);
    t15.forward(15);
    t15.left(50);
    t15.forward(15);


    t15.left(30);
    t15.forward(10);
    for(var i = 0; i < 4; i++) {
        t15.right(15);
        t15.forward(8);
    }
    for(var i = 0; i < 3; i++) {
        t15.right(30);
        t15.forward(7); 
    }
    t15.right(90);
    t15.forward(10);
    t15.left(40);
    t15.forward(5);
    t15.left(40);
    t15.forward(5);
    t15.left(30);
    t15.forward(15);
    t15.left(50);
    t15.forward(15);
    t15.left(50);
    t15.forward(15);
    t15.left(30);
    t15.forward(10);

    //shell pattern 7
    var t16 = makeTurtle(135,205);
    t16.setColor(255);
    t16.setWeight(1);
    t16.right(41);
    for(var i = 0; i < 6; i++) {
        for (var j = 0; j < 3; j++) {
            t16.right(120);
            t16.forward(5);
        }
        t16.penUp();
        t16.forward(20);
        t16.penDown();
    }
    var t17 = makeTurtle(122,200);
    t17.setColor(255);
    t17.setWeight(1);
    t17.right(41);
    for(var i = 0; i < 7; i++) {
        t17.right(60);
        for(var j = 0; j < 3; j++) {
            t17.forward(5);
            t17.right(120);
        }
        t17.left(60);
        t17.penUp();
        t17.forward(20);
        t17.penDown();
    }


    //shell pattern 8
    var t18 = makeTurtle(110,230);
    t18.setColor(255);
    t18.setWeight(4);
    t18.left(5);
    for(var i = 0; i < 4; i++) {
        t18.forward(20);
        t18.right(90);
        t18.forward(20);
        t18.left(90);
    }
    t18.forward(20);

    //wave pattern
    t18.setWeight(4);
    t18.right(80);
    t18.forward(10);
    t18.setWeight(2);
    for(var i = 0; i < 8; i++) {
        t18.left(12);
        t18.forward(2);
    }
    t18.forward(10);
    for(var i = 0; i < 4; i++) {
        t18.right(20);
        t18.forward(7);
    }
    for(var i = 0; i < 3; i++) {
        t18.right(30);
        t18.forward(5); 
    }
    t18.right(90);
    t18.forward(10);
    t18.left(40);
    t18.forward(5);
    t18.left(50);
    t18.forward(5);
    t18.left(20);
    t18.forward(5);
    t18.left(50);
    t18.forward(10);
    t18.left(50);
    t18.forward(10);
    t18.left(40);
    t18.forward(10);
    t18.left(30);
    t18.forward(10);


    for(var i = 0; i < 4; i++) {
        t18.right(20);
        t18.forward(7);
    }
    for(var i = 0; i < 3; i++) {
        t18.right(30);
        t18.forward(5); 
    }
    t18.right(90);
    t18.forward(10);
    t18.left(40);
    t18.forward(5);
    t18.left(40);
    t18.forward(5);
    t18.left(20);
    t18.forward(5);
    t18.left(50);
    t18.forward(10);
    t18.left(50);
    t18.forward(10);
    t18.left(60);
    t18.forward(15);

    for(var i = 0; i < 4; i++) {
        t18.right(20);
        t18.forward(7);
    }
    for(var i = 0; i < 3; i++) {
        t18.right(30);
        t18.forward(5); 
    }
    t18.right(90);
    t18.forward(10);
    t18.left(40);
    t18.forward(5);
    t18.left(40);
    t18.forward(5);
    t18.left(30);
    t18.forward(5);
    t18.left(60);
    t18.forward(20);


    //shell pattern 9
    var t19 = makeTurtle(100,250);
    t19.setColor(255);
    t19.setWeight(2);
    t19.left(5);
    for(var i = 0; i < 7; i++) {
        t19.forward(12);
        t19.right(90);
        t19.forward(12);
        t19.left(90);
    }

    //wave pattern
    t19.setWeight(2);
    t19.right(80);
    t19.forward(10);
    t19.setWeight(2);
    for(var i = 0; i < 8; i++) {
        t19.left(12);
        t19.forward(2);
    }
    t19.forward(10);
    t19.setWeight(1);
    for(var i = 0; i < 4; i++) {
        t19.right(20);
        t19.forward(7);
    }
    for(var i = 0; i < 3; i++) {
        t19.right(30);
        t19.forward(5); 
    }
    t19.right(90);
    t19.forward(10);
    t19.left(40);
    t19.forward(5);
    t19.left(40);
    t19.forward(5);
    t19.left(20);
    t19.forward(5);
    t19.left(50);
    t19.forward(10);
    t19.left(50);
    t19.forward(10);
    t19.left(40);
    t19.forward(10);
    t19.left(30);
    t19.forward(10);


    for(var i = 0; i < 4; i++) {
        t19.right(20);
        t19.forward(7);
    }
    for(var i = 0; i < 3; i++) {
        t19.right(30);
        t19.forward(5); 
    }
    t19.right(90);
    t19.forward(10);
    t19.left(40);
    t19.forward(5);
    t19.left(40);
    t19.forward(5);
    t19.left(20);
    t19.forward(5);
    t19.left(50);
    t19.forward(10);
    t19.left(50);
    t19.forward(10);
    t19.left(60);
    t19.forward(15);

    for(var i = 0; i < 4; i++) {
        t19.right(20);
        t19.forward(7);
    }

    //shell pattern 10
    var t20 = makeTurtle(100,265);
    t20.setColor(255);
    t20.setWeight(2);
    t20.right(40);
    t20.forward(100);
    var t21 = makeTurtle(100,275);
    t21.setColor(255);
    t21.setWeight(4);
    t21.right(40);
    t21.forward(85);
    var t22 = makeTurtle(105,295);
    t22.setColor(255);
    t22.setWeight(2);
    t22.right(40);
    for(var i = 0; i < 12; i++) {
        t22.penDown();
        t22.forward(2);
        t22.penUp();
        t22.forward(3);
    }

    //front fin
    var t23 = makeTurtle(230,80);
    t23.setColor(255);
    t23.setWeight(3);
    t23.left(90);
    t23.forward(20);
    t23.left(10);
    t23.forward(20);
    t23.left(10);
    t23.forward(25);
    t23.left(90);
    t23.forward(5);
    t23.left(10);
    t23.forward(10);
    t23.left(15);
    t23.forward(15);
    t23.left(15);
    t23.forward(15);
    t23.left(15);
    t23.forward(15);
    t23.left(15);
    t23.forward(15);
    t23.left(15);
    t23.forward(15);

    //back fin
    var t24 = makeTurtle(75,230);
    t24.setColor(255);
    t24.setWeight(3);
    t24.left(160);
    t24.forward(20);
    t24.left(10);
    t24.forward(10);
    t24.left(20);
    t24.forward(25);
    t24.left(23);
    t24.forward(25);

    var t25 = makeTurtle(80,300);
    t25.setColor(255);
    t25.setWeight(3);
    t25.left(160);
    t25.forward(30);
    t25.left(10);
    t25.forward(20);
    t25.left(10);
    t25.forward(30);




    

}

I thought it would be fun to draw a turtle using turtles. The designs on the shell came to me as I continued drawing; I had no set design. What I did know, however, was that I wanted some of the designs to fade into the wave formations, which was definitely the hardest and most time consuming part of this drawing. Overall, I am very proud that I was able to create this, and it turned out better than I had pictured it to be.

sketch

// Bettina Chou
// yuchienc@andrew.cmu.edu
// section c
// project 11 -- freestyle turtles

///////////////TURTLE API///////////////////////////////////////////////////////////////

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

///////////////BEGINNING OF CODE///////////////////////////////////////////////////////////////

function preload() {
    img = loadImage("https://i.imgur.com/UB3R6VS.png")
}

function setup() {
  createCanvas(300,480);
  img.loadPixels(); //load pixels of image but don't display image
  background("#ffccff");
}

var px = 0; //x coordinate we're scanning through image
var py = 0; //y coordinate we're scanning through image
var threshold = 90; //image is bw so threshold is set to high brightness

function draw() {
  var col = img.get(px, py); //retrives RGBA value from x,y coordinate in image
  var currentPixelBrightness = brightness(col);
  var t1 = makeTurtle(px,py);
  var t2 = makeTurtle(px + 20, py); //offset by 10 pixels to the right
  strokeCap(PROJECT);
  t1.setWeight(5);
  t1.setColor("#ccffff");
  t2.setWeight(1);
  t2.setColor("#33cc33");
  if (currentPixelBrightness > threshold) { //does not draw lines in negative space
      t1.penUp();
      t2.penUp();
  }
  else if (currentPixelBrightness <= threshold) { //only draws lines to fill in positive space
      t1.penDown();
      t2.penDown();
  }
  t1.forward(1);
  t2.forward(1);
  px += 1;
  if (px >= width) { //brings px to 0 again
    px = 0;
    py += 10; //starts a new row
  }
}

I was inspired by the following piece of work and considered how computation could create such image treatments as opposed to manually setting the lines and offsets.

I would have had no idea where to start if not for the deliverables prompt suggesting that we could have turtles draw things in relation to an image. I decided to build upon the pixel brightness techniques we learned in previous weeks to make the turtle penDown() when the image is black and penUp() when the image is white. Thus, in a black and white image it is easy to recreate it using the lines method.

Above is the quick image I put together in illustrator to have my turtle trace

Above is a screenshot of the finished image from this particular code. Line weight, colors, amounts, and offsets could easily be manipulated to create a variety of imaging. There could even be multiple images referenced to create a more complex drawing.