Yiran Xuan – Project 11 – Composition

This sketch is based off of my favorite drawing tool in FireAlpaca, the Mirror Brush. It initializes two different turtles that move to the mouse’s position when the mouse is clicked. Buttons on the keyboard can affect the pen’s path; pressing ‘p’ will toggle the penUp and penDown, ‘w’ and ‘t’ will widen and thin the pen tracks respectively, while ‘r’, ‘b’, ‘g’, ‘l’ change the color of the tracks.

(Completed with 2-day extension)

sketch

/*
Yiran Xuan
Section A
yxuan@andrew.cmu.edu
Project 11
*/

//Goal: Create mirroring paint tool that uses the turtle graphics

var brushturtle; //turtle that corresponds to mouse movements
var mirrorturtle; //turtle that mirrors brushturtle

var targetx = 0; //x coord of where brush turtle should go
var targety = 0; //y coord of both turtles
var mirrorx = -targetx; 

var brushweight = 5;

function setup(){
    createCanvas(480, 480);
    strokeWeight(6);

    translate(240, 0);

    brushturtle = makeTurtle(0, 0); //initialize turtles
    mirrorturtle = makeTurtle(0,0);

    brushturtle.setColor('black');
    
    mirrorturtle.setColor('black');
    mirrorturtle.setWeight(brushweight);

}

function draw(){
	translate(240, 0); //needs to be constantly retranslated so that 0 line is down the middle of canvas

	brushturtle.setWeight(brushweight);
	mirrorturtle.setWeight(brushweight);

	brushturtle.goto(targetx, targety); //transport brush
	mirrorturtle.goto(mirrorx, targety); //transport mirror
}

function mouseClicked() {
	targetx = mouseX - 240; //mouse coords ignores translate, so needs compensation
	targety = mouseY;
	mirrorx = -targetx;
}



function keyPressed(){
	if(key == 'p'){ //pressing 'p' switches between pen position 
		penUporDown();
	}

	if(key == 'w'){
		penWider();
	}

	if(key == 't'){
		penThinner();
	}

	if(key == 'r'){ //changing pen colors
		brushturtle.setColor('red');
		mirrorturtle.setColor('red');
	}

	if(key == 'g'){
		brushturtle.setColor('green');
		mirrorturtle.setColor('green');
	}

	if(key == 'b'){
		brushturtle.setColor('blue');
		mirrorturtle.setColor('blue');
	}

	if(key == 'l'){
		brushturtle.setColor('black');
		mirrorturtle.setColor('black');
	}

}

function penUporDown(){ //lifts or puts down pen
	if(brushturtle.penIsDown){
			brushturtle.penUp();
			mirrorturtle.penUp();
		}
	else if(brushturtle.penIsDown == false){
		brushturtle.penDown();
		mirrorturtle.penDown();
		}
}

function penWider(){ //widens penstroke
	brushweight+= 0.5;
}

function penThinner(){ //thins penstroke
	if(brushweight > 1){
		brushweight -= 0.5;
	}
}

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