TURTLE_PAPER

Introduction

TURTLE_PAPER is small javascript "library" which adds turtle graphics-style drawing to Paper.js, a javascript canvas wrapper / drawing library with svg export, mouse interaction and tons of other features. It was created for my personal usage, and for fun. I decided to publish this with the docs to use it, because I though that it might help somebody, or something. And if I ever forget how to use it I may read the instructions here.

Make sure to read the official paper.js docs too.

Getting started

Installation

The installation for TURTLE_PAPER is fairly simple, just download the turtle.js from this repository. Once you have downloaded the file to the directory of the project where you wish to use TURTLE_PAPER, make an html file with the proper html boilerplate. Then add in two </script> tags. One for paper.js, installed using the instructions here, or alternatively hosted here (no installation required). And another one for TURTLE_PAPER, which should just be a file called turtle.js in the directory of your project.

TLDR: Install Paper.js from paperjs.org using the instructions there and TURTLE_PAPER as the file called turtle.js from this repository.

Setting up Paper.js

Create a javascript file for your code and include it in your html file.
TURTLE_PAPER is made for using paper.js directly with JavaScript, but I also recommend using JavaScript directly, because though it adds boilerplate, Paper.js' version of their JS syntax parser is stuck on some old ECMA version that will give you some headaches if you're used to modern JavaScript.

Add a html canvas with an id inside the body tag of your html file.

Once you have created the JavaScript file and the canvas, copy the boilerplate from below inside it.

window.onload = function() {
    // Get a reference to the canvas object using the id you set earlier
    var canvas = document.getElementById('canvas');
    // Setup paper.js for that canvas
    paper.setup(canvas);

    // Your code will go here

    // Draw the view
    paper.view.draw();
}

_Actually_ getting started with TURTLE_PAPER

This part of the tutorial will consist of you reading the code and comments inside the code blocks. Comments in JavaScript are blocks of text starting with "//", but you should know that already.

// In your code, replace the comment "// Your code will go here" with the code below

var turtle = new Turtle(
    0, // This is the x-coordinate for your new turtle.
    0, // This is the y-coordinate for your new turtle.
    {
        strokeColor: 'black',
        strokeWidth: 5,
    } // This is the paper.js path properties object for the path that your new turtle is drawn with.
    // The path properties need to include at least a strokeColor or a fillColor in order for the line drawn by the turtle to be visible.
    // Read more at https://paperjs.org/reference/path/#path-object
);

You have now created your turtle and should move on to Controlling your turtle