Brush Ninja

Free Digital Creativity

advert

← Help‹ Code Ninja

Code Ninja Tutorial - Colors, Line Width and some Randomness

In Code Ninja, you can use any CSS/HTML color to add vibrancy to your drawings. This includes color names (like red, blue), hex codes (#ff0000 for red), or RGB values (rgb(255,0,0) for red).

There is a whole page about colors in Code Ninja, including all of the HTML color names, and a HSL color picker.

Setting Colors in Code Ninja

Choosing a Color

  • Use the color command followed by your desired color.
  • Example: color red or color #ff0000 will set the color to red.
  • Once set, the pointer will use this color for drawing until you change it.

Changing Line Width

Adjusting the line width can add another dimension to your drawings.

Setting Line Width

  • Use the width command followed by a number to set the width.
  • Example: width 5 makes the line width 5 units wide.

💡 Top Tip I like to use the line width to draw filled circles. You can do this by setting a large width amount, and then moving forward 0 units.

Understanding and Using the rand Function

The rand function in Code Ninja is a powerful tool that introduces randomness into your drawings. It allows you to generate random numbers, which can be used to create varied and unpredictable designs.

Generating Random Numbers

  • Use the rand command followed by a number or range.
  • rand X: Generates a random number between 0 and X-1.
  • rand X Y: Generates a random number between X and Y, inclusive.
  • Example: rand 10 could generate any number from 0 to 9.
  • You can use rand wherever you can use a number.
  • Example: width rand 1 10 sets the line width to a random number between 1 and 10.

Introducing Variability in Drawings

By using rand, you can add exciting variations to your drawings:

  • Random Widths: Create lines of varying thickness for a dynamic look.
  • Random Movements: Change the length or angle of your lines randomly.

Random colors are also possible. You could use the color command with rand for each colour component, or use the colourrand command to set a random color.

Note: Each time you run your Code Ninja code, rand will generate the same sequence of numbers. To change this, you can use the randomize command at the start of your code, which will ensure a new sequence of random numbers every time.

Exercise: Creating a Colorful Geometric Pattern

Let’s combine color and width changes to create a colorful geometric pattern.

var length 50
var angle 90

repeat 8 {
	colourrand // Random color for each side
	width rand 2 10 // Random line width between 2 and 10
	fd $length
	rt $angle
	var length add $length 10 // Increase length for each iteration
}

Your Challenge

  • Use the provided code as a starting point.
  • Play with different length, angle, and width values.
  • Experiment with specific colors or use colorrand for random colors.

Wrap-Up

Now you’re able to bring color and varied line widths into your Code Ninja creations! This can significantly enhance the visual appeal of your drawings. Feel free to experiment with different color combinations and widths to see what interesting patterns you can create.

Tutorials