Jenni Lee—Project 11—Composition

sketch

/* Jenni Lee
Section E
jennife5@andrew.cmu.edu
Project-11
*/

var iLine1
var le, to, ri, bo;
var w, h;

function setup() {
  createCanvas(640, 480);
  background(250);

  iLine1 = makeTurtle(0, 0); // starting position of figure 2.  leave 3 pixel for the first stroke (weight is 6)
  iLine1.setWeight(1);

  frameRate(15);

  le = 0;
  to = 0;
  ri = width;
  bo = height;
  w = width;
  h = height;
}

var i1 = 0,
  i2 = 0,
  i3 = 0,
  i4 = 0;
var inc = 10;


function draw() {
  var r = random(0, 255);
  var g = random(0, 255);
  var b = random(0, 255);
  iLine1.setColor(color(r, g, b));

  // first to draw the top part of the lines sequentially.  Use incremented line count for checking
  if (i1 <= w) {
    // equally divide the height into grids
    var y = lerp(to, bo, i1 / w);
    iLine1.goto(ri, y); // draw line
    i1 += inc;

    // go back to the top position
    iLine1.penUp();
    iLine1.goto(i1, to);
    iLine1.penDown();
  } else {
    // when top part finish, sequentially draw the right part, same way, with diffetenr coordinates
    if (i2 <= w) {
      var y = lerp(le, ri, i2 / h);
      iLine1.goto(ri - y, bo);
      i2 += inc;
      iLine1.penUp();
      iLine1.goto(ri, i2);
      iLine1.penDown();
    } else {
				// when top and right parts finish, sequentially draw the bottom part, same way, with diffetenr coordinates
        if (i3 <= w) {
        var y = lerp(to, bo, i3 / w);
        iLine1.goto(le, bo - y);
        i3 += inc;
        iLine1.penUp();
        iLine1.goto(ri - i3, bo);
        iLine1.penDown();
      } else {
				// when top, right, and bottom parts finish, sequentially draw the left part, same way, with diffetenr coordinates
        if (i4 <= w) {
          var y = lerp(le, ri, i4 / h);
          iLine1.goto(y, to);
          i4 += inc;
          iLine1.penUp();
          iLine1.goto(le, bo - i4);
          iLine1.penDown();
        } else {
          // when all parts are done, reset by resetting background, and counters
          background(255);
          i1 = 0;
          i2 = 0;
          i3 = 0;
          i4 = 0;
        }
      }
    }
  }
}

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 experiment with using the turtle function in order to use simple lines to create illusions. I found that using rainbow colors gave the piece a glitchy, fun, and playful feel.