Brush Ninja

Free Digital Creativity

advert

← Help‹ Code Ninja

2d Code Commands for Code Ninja.

Code Ninja is inspired by the Logo programming language. However, where Logo was inspired by the Lisp language Code Ninja is inspired by Javascript. Whilst not the same it has similarities with Javascript that should make a future transition easier.

How it works

The programming language moves a pointer around the drawing image drawing lines wherever it travels. The cursor carries a fictional pen that draws the path. This pen can be raised and lowered so that you can move without drawing. There are simple programming commands such as repeat that allow you to run the same commands multiple times. Since the commands repeat from the point where the previous command ended you can use this to draw repeating patterns.

Formatting

  • The commands can be written in CAPITAL letters or lowercase letters.
  • They can be on one line or on multiple lines.
  • Code indentation can be whatever you like. The editor will automatically format as best it can.
  • Commands that use custom colours can use any valid CSS/ HTML colour.
  • You can add comments by adding // before the text you want to comment. This can be used to add headings to your code, or explain what you are doing. This makes the code easier to understand.
  • You can use indents and new lines to group related elements making it easier to move around the code.

Commands

Many commands have a short and a long version. This makes them a bit quicker to type. You can use whichever version you prefer.

fd X, forward X

Move forward X pixels.

fd 10

bk X, back X, backward X

Move backwards X pixels.

bk 10

rt A, right A

Turn right A degrees.

rt 90

lt A, left A

Turn left A degrees.

lt 90

seta A, setangle A

Set the angle to A degrees.

seta 180

arc R A

Draw an arc with radius R and angle A degrees

arc 20 180

color C, colour C

Change the colour to C. C can be any valid CSS colour using colour names or hexadecimal notation.

color red

colorrand, colourrand

Pick a random colour to draw with.

colorrand

setbg C

Set the background colour of the drawing. This can be done at any time, whenever you like.

setbg green

width X, setwidth X

Set the width of the drawing line to X pixels.

setwidth 4

fill

Fill the current space with the current colour.

fill

pu, penup

Lift the pen so that you can move the cursor without drawing anything.

penup

pd, pendown

Lower the pen so that you can draw lines as you move around the board.

pendown

home

Go to the center of the image. This is the same location that you start from. This also resets the angle.

home

setxy X Y, position X Y

Set the x and y location of the cursor.

setxy 10 10

setx X

Set the x position of the cursor.

setx 30

sety Y

Set the y position of the cursor.

sety 140

hidecursor

Hide the triangle cursor on the screen.

hidecursor

showcursor

Show the triangle cursor on the screen.

showcursor

clear

Clear the drawing.

clear

delay X, wait X

Wait for X milliseconds before executing the next command.

delay 1000

Variables

Variables are custom properties that store numbers. You can use these numbers to control the behaviour of your code. You can set the value of a variable using the var command. You can then use the variable in place of a number in other commands. You can also use math commands to modify the values of variables.

When you use a variable you should add a $ to in front of the name. This shows that the variable is being used and not set.

// Set a variable
var I 10
// Move forward by the value of the variable
fd $I

The variable name can be any combination of letters so you can make the names easy to understand. We can rewrite the previous example to make it easier to understand.

var distance 10
fd $distance

Math Operations

You can use math operations to modify the value of a variable. The math operations are:

sum A B, add A B

Add A to B

var z sum $A $B

difference A B, minus A B

Subtract A from B

var z difference $A $B

multiply A B, times A B

Mutiply A with B

var z multiply $A $B

divide A B, over A B

Divide A with B

var z divide $A $B

power A B

Raise A to the power of B

var z power $A $B

Note that whilst the examples above all show variables you can also substitute numbers in place of the variables.

For example to raise $A to the power of 3 you could write pow $A 3.

Built in Variables

There are some built in variables that you can use. These are:

  • $pi: The value of pi.
  • $e: The value of e.
  • $loopcount: The number of times the current repeat loop has been run.
  • $canvaswidth: The width of the drawing canvas.
  • $canvasheight: The height of the drawing canvas.

Comments

Comments are really useful features in programming that allow you to add notes about what you are doing. You can do this in Code Ninja by adding // at the start of the line that you want to be a comment. Everything after the line will be ignored. You can also add a comment after some code.

// This is a comment.
fd 10 // This is also a comment.

Comments can be used for:

  • Adding notes about code.
  • Adding headings to code to make it clearer what is happening.
  • Temporarily removing code to see what happens in different situations.

Random Numbers

To add a bit of randomness we have the rand keyword. The rand keyword will pick a random whole number for you. You can control the range of this random number by giving it one or two parameters.

  • rand I: This will pick a random number between 0 and I, where I is any whole number.
  • rand I J: This will pick a random number between I and J inclusive, where both I and J are any whole number.

By default random numbers will be the same each time you run the code. If you want the numbers to be different each time then you should also add the randomize command somewhere.

Repeat

You can repeat a set of commands a set amount of times. The commands withing the repeat block can also contain repeat blocks. They can also call custom functions.

// Draw a box.
repeat 4 {
	forward 10
	right 90
}

You can also nest repeat loops inside other repeat loops.

width 2
repeat 30 {
	forward 20 right 12
	repeat 12 {
		forward 10 right 30
	}
}

Custom Functions

You can group chunks of code as custom functions. These can then be called at any time by writing the name of the function followed by opening and closing brackets.

function randomBox {
	penddown
	setxy rand 0 512 rand 0 512
	repeat 4 {
		forward 50 right 90
	}
	penup
}
// Draw 50 randomly positioned boxes
repeat 50 {
	randomBox()
}

To make the above example even more random we can randomize the width of the line, the angle of the boxes, and colour of the boxes.

function randomBox {
	colourrand
	seta rand 0 90
	width rand 1 15
	penup
	setxy rand 0 512 rand 0 512
	pendown
	repeat 4 {
		forward 50 right 90
	}
}
randomize
// Draw 50 randomly positioned boxes
repeat 50 {
	randomBox()
}

Tips

  • If you are going to fill a shape then lift the pen and move to an empty space before filling, else part of the line will be filled instead.
  • The random colours are designed to be ‘nice’ they will be quite bold and bright and shy away from grey/ dreary colours.
  • Repeat loops can be nested, one inside the other.
  • Functions can be placed anywhere in the code.