turtle-component v0.9.8

Turtle

Turtle is a way to create graphic elements on the screen with a cartesian plan(x, y) using commands, the original turtle was based on logo language that was used to move robots. Turtle is very popular to teach kids how to programming, and this library implements some of this turtle commands in javascrypt language to be used in any web application or even on jupyter notebook.

How to install

To use turtle component you just need to add this lib on your package json:

  "dependencies": {
    ...
    "turtle-component": "^0.9.2"
  }

or use yarn:

yarn add turtle-component

Installing on jupyter notebook

...

How to Use

It's realy simple to use it, this turtle js lib is a HTML component so you justo need to add the x-turtle component to you HTML, like this:

the HTML params widht, heigth and canvas-class are the only ones that the component receives. The canvas-class sets a class to the drawing canvas, what is usefull if you want to add some styles or even make some changes on the canvas.

The component has a method called createTurtle that retuns a new turtle on the canvas screen

After use the create turtle the sprite of the turtle will pop up on the canvas, then just use the created turtle to execute the turtle commands, for example:

This way you cand draw many things on the screen, here down is a example:

with this code:

turtle.setLineColor('blue')
for(let i = 0; i < 20; i++){
    turtle.forward(i * 10)
    turtle.right(144)
}

you can draw this:

Have fun!

Turtle functions

• forward(value): draw a line forward the size you define
• backward(value): draw a line backward the size you define
• setLineColor(color): changes the line color
• circle(radius): creates a circle on the screen wiht the defined radius
• rectangle(width, height): creats a retangle on the screen with the defined width and height
• speed(value): Changes the draw speed
• clear(): Cleans the canvas
• right(angle): Add a defined angle to right
• left(angle): Add a defined angle to left
• setPosition(x, y): Changes the turtle position
• getPosition(): Returns the turtle position
• penUp(): Unses the drawing mode
• penDown(): Sets the drawing mode
• turtleCommandsList(actionList): Receives a Json list of commands, the list mus be on this format:

[
  { action: 'forwardAction',
    parameters: [100]
  },
  {
    action: 'leftAction',
    parameters: [90]
  },
  { action: 'forwardAction',
    parameters: [100]
  },
  {
    action: 'leftAction',
    parameters: [90]
  },
  { action: 'forwardAction',
    parameters: [100]
  },
  {
    action: 'leftAction',
    parameters: [90]
  },
  { action: 'forwardAction',
    parameters: [100]
  },
]

Note that the actions must have an Action suffix on the action name, and the parameters must be a list.