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