Brush Ninja

Free Digital Creativity

advert

← Help‹ Code Ninja

Code Ninja Tutorial - Basic Concepts and Commands

In Code Ninja, your canvas is a digital sketchpad. Rather than drawing on it with a pen you draw on it using code. The pointer (the triangle) is your digital pen. Wherever this pointer moves, it draws a line. Your goal is to direct this pointer with commands to create shapes, patterns, and images.

Basic Movement Commands

Forward (fd) and Backward (bk):

  • fd 100: Moves the pointer forward by 100 units.
  • bk 50: Moves it backward by 50 units.
  • Try it out: Enter fd 100 and then bk 100 to see how the pointer moves.

Turning with Left (lt) and Right (rt)

  • lt 90: Turns the pointer left by 90 degrees.
  • rt 45: Turns it right by 45 degrees.
  • Experiment: Change the angles in lt and rt commands and observe the pointer’s turning.

Drawing a Square with Repeat Loops

As we saw in Tutorial 1 drawing a square is pretty easy we can move forwards, turn 90 degrees, move forwards, and repeat until we have all 4 edges.

We can now simplify this by using a repeat loop to perform those commands 4 times. There’s more on repeat loops in tutorial 5.

repeat 4 {
  fd 100
  rt 90
}

This code makes the pointer move forward by 100 units and then turn right by 90 degrees. The repeat 4 command repeats the code inside the curly brackets ({ }). This creates a square with each side measuring 100 units.

Exercise: Draw a Square

Now it’s your turn. Try typing the above code into Code Ninja. Once you’re comfortable, experiment with changing the distance and angles.

Note You could just copy and paste the code, but if you type it out instead, you'll get a better feel for the commands and how they work, and be more likely to remember them in the future.

Drawing a Triangle

Next, let’s draw a triangle. We’ll adjust our repeat loop to create a different shape.

repeat 3 {
  fd 100
  rt 120
}

This code creates an equilateral triangle. The pointer moves forward 100 units and turns right 120 degrees, repeated three times. The code is basically the same, we’ve just changed the number of repetitions and the angle of the turn.

Exercise: Draw a Triangle

Your challenge now is to create a triangle. Try the code above, and then play around with the distances and angles to see how your triangle changes.

If you want to try something new you could use the seta command at the start of your code to set the angle in degrees at which the triangle is drawn.

You could also try changing the number of repetitions and size of the angles to create different shapes, or patterns.

Wrap-Up

You’ve now learned how to move and turn the pointer on your canvas and used repeat loops to create simple shapes. These basics are the building blocks for more complex and exciting designs you’ll create in Code Ninja.

Tutorials