Jenni Lee—Project 11—Composition

``````/* 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 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.