Logoish

A simplified logo-like functionality for teaching JavaScript without the fuss. Provides window level functions for moving the turtle around the screen.

Using

Logoish has no dependencies and probably only works in Chrome as that's what I'm teaching in (pull requests welcome!)

It expects to take over the entire page. Include it in an empty page like so:

<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Logoish Playground</title>
  <script src='logoish.js'></script>
</head>
<body>
  <script>
    Logoish.init();
  </script>
</body>
</html>

Now open up the JavaScript console and start running commands:

forward(60); // move forward 60 pixels
rotate(120); // rotate 120 degrees to the right
forward(60); // move forward another 60 pixels

API

All commands are added to the top level window object after calling Logoish.init()

Method	Description
`Logoish.init()`	Setup Logoish, create the canvas and add functions onto `window`
`clear()`	Clear the canvas
`reset()`	Clear the canvas and reset the turtle
`hide()`	Hide the turtle
`show()`	Show the turtle
`lineWidth(width)`	Set the width of the line in pixels
`linColor(color)`	Set the color of the line
`forward(pixels)`	Draw a line `pixels` straight forward
`skip(pxiels)`	Skip forward `pixels` straight forward
`rotate(degrees)`	Rotate `degrees` to the right
`angle(degrees)`	Set the current angle to `degrees`
`moveTo(x,y)`	Move the turtle TO `x` and `y` on the canvas
`move(x,y)`	Move the turtle BY `x` and `y` on the canvas
`speed(spd)`	Set the drawing speed. Set to 0 for instant
`stop()`	Stop the current drawing animation and clear the queue

Recommend Projects