Author: Jamie Park

My project was inspired by single-line drawings and line-drawing tools, like etch a sketch. I always had a desire to draw something only using one line, but I did not have the talent to do so. I also never had the patience to draw using etch a sketch. Therefore, I created a p5js drawing tool that allows you to create single-line drawings. In order to draw, use the arrow keys. You can change the color of the line by pressing on the space bar (the circle on the bottom will indicate the current color status), change the line weight by clicking on the arrows (numbers indicate the line weight), and clear canvas by clicking on the “clear” button. I hope you have fun as much as I had while I was coding for this project!

Plus, try drawing a diagonal line by pressing onto two arrow keys at the same time! 🙂

sketch

/* Jamie Park (jiminp)             Section E
   15 - 104                     Final Project */

var ttl; //global variable for the turtle
var colors = ["Coral", "DarkTurquoise", "DarkGrey", "blue",
"FireBrick", "Gold", "Lavender", "LightPink", "PowderBlue"]; //global variable for color values
var col = 0; //color index value
var strokeThickness = 2; //strokethickness as global value
var bgCol = 255;

function preload(){
    //preload image into the canvas
    var overlayURL = "https://i.imgur.com/5dpuHCX.png";
    overlay = loadImage(overlayURL);
}

function setup(){
    //creates a canvas
    createCanvas(500, 400);
    //sets the background color on white
    background(250);
    //makes the turtle at random parts of the canvas
    ttl = makeTurtle(random(150, 300), random(100, 300));
    ttl.setWeight(strokeThickness);
    ttl.setColor("coral");
}

function draw(){
    //display the image on the canvas
    image(overlay, 0, 0, 500, 400);
    //allows the user to draw the lines
    drawLines();
    //allows the user to change the color of lines
    displayStrokeWeight();
    drawTriangleButtons();
    displayCurrentColor();
    clearButton();
    boundTurtle();

}

function mousePressed(){
    //redraw when clicked on clear button
    clearCanvas();
    //when tou click the buttons, the thickness of the turtle stroke changes
    changeThickness();
}

function boundTurtle(){
    //set up local variables that wound bound the turtles
    var boundaries = 28;
    var bottomBoundaries = 58;

    //if turtle x is smaller than a set number, the turtle is the set number
    //set number due to the frame around the canvas
    if(ttl.x < boundaries){
        ttl.x = boundaries;
    }
    //if turtle y is smaller than a set number...
    if(ttl.y < boundaries + 2){
        ttl.y = boundaries + 2;
    }
    //if turtle x is greater than the set number...
    if(ttl.x > width - boundaries - 5){
        ttl.x = width - boundaries - 5;
    }
    //if turtle y is greater than the set number...
    if(ttl.y > height - bottomBoundaries){
        ttl.y = height - bottomBoundaries;
    }
}

function keyPressed(){
    //when spacebar is pressed, the color of the turtle changes
    //you can "find" your desired color by pressing on the space bar multiple times
    changeColor();
}

function changeColor(){
    if(keyCode === 32){
        //keyCode 32 is the space bar
        col = (col + 1) % colors.length;
        //you change the color by adding one into the color index above
        ttl.setColor(colors[col]);
    }
}

function drawLines(){
    //function that draws the lines when key is pressed accordingly
    //local variable that goes forward by 1.5 pixels every time key is pressed
    var distDraw = 1.5;
        //draws the line leftwards
    if(keyIsDown(LEFT_ARROW)){
        ttl.face(180);
        ttl.forward(distDraw);
    }
        //draws the line rightwards
    if(keyIsDown(RIGHT_ARROW)){
        ttl.face(0);
        ttl.forward(distDraw);
    }
        //draws an upward line
    if(keyIsDown(UP_ARROW)){
        ttl.face(270);
        ttl.forward(distDraw);
    }
        //draws a downward line
    if(keyIsDown(DOWN_ARROW)){
        ttl.face(90);
        ttl.forward(distDraw);
    }
}

function changeThickness(){
    //thickness of the stroke increases / decreases when the button is clicked
    if(mouseX < 450 & mouseX > 430 && mouseY > 280 && mouseY < 300){
        strokeThickness = strokeThickness + 1;
        //strokeweight increases by 1
    }
        //when mouseisPressed within the range of the triangular buttons, reduce the stroke weight by 0.05
    if(mouseX < 450 & mouseX > 430 && mouseY > 310 && mouseY < 340){
        strokeThickness = strokeThickness - 1;
        //strokeweight decreases by 1
    }
    //constrains the thickness of the stroke in value between 1 and 13
    strokeThickness = constrain(strokeThickness, 1, 13);
    //implements the weight to the turtle
    ttl.setWeight(strokeThickness);
}

function drawTriangleButtons(){
    //draws the triangle buttons on the bottm right corner of the canvas
    noStroke();
    fill("LightSalmon");
    //local variables that set height and width of the triangle to avoid magic nunbers
    var triangleW = 430;
    var triangleH = 300;
    //top triangle that increases the thickness
    triangle(triangleW, triangleH, triangleW + 20, triangleH, triangleW + 10, triangleH - 20);
    //bottom triangle to reduce the thickness
    triangle(triangleW, triangleH + 10, triangleW + 20, triangleH + 10, triangleW + 10, triangleH + 30);
}

function clearButton(){
    //draws the "clear" button on the top left corner
    fill("orange");
    noStroke();
    ellipse(50, 50, 25, 25);
    fill("white");
    text("clear", 40, 53);
    //informative text
    fill("gray");
    text("press on arrow keys to draw & space bar to change color,", 73, 50);
    text("and click on the arrow to change stroke thickness", 73, 60);
}

function clearCanvas(){
    //if mouse is within the proximity of the clear button, the canvas is cleared
    if(mouseX > 37.5 & mouseX < 62.5 && mouseY > 37.5 && mouseY < 62.5){
        clear();
        background(255);
        //strokeThickness and color index restart
        strokeThickness = 2;
        col = 8;
    }
}

function displayCurrentColor(){
    //displays current turtle color in a circle
    fill(colors[col]);
    ellipse(width * .815, height * .8, 10, 10)
}

function displayStrokeWeight(){
    //displays the strokeweight
    noStroke();
    fill("white");
    rect(430, 300, 18, 10);
    textSize(10);
    fill("SlateGray")
    textFont("GillSans");
    text(strokeThickness, 435, 308.5);
}

//------------------------------turtle code--------------------------------
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;}