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! 🙂
/* 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;}