Welcome To the Blue Documentation

Commenting

// makes a comment, or code that doesn't run. Any code that is light grey is commented out. //xd fcgvh jkn mljnh bgvf cxdr fch The code above does nothing and has no errors because the code is commented out. Comments are important so other people can understand your code if you want to show it to them. For example, a comment could be used like this:


	//Display pi every second:
	repeatEvery 1
	|console.log(PI); //pi
	//i can write whatever i want here and it will not run !1a@#2f$2%3h^&4s*5(sa!@d6#g$8s%^dsa0&-j*(teer9as#@f#4g$k%i1^qw&

You don't have to know how the above code works; it is just an example of how to use comments

Console

Open the console with ctrl+shift+i, or right click and then click inspect. You should see different options on the top, such as Elements, Console and Sources. Click on Console.

You can write things down in the console when you run a program using


	console.log("put whatever text here!");
	console.log(100);

Notice that the console shows which line it is coming from on the right side.

Variables

Variables store information. To define a variable, start with the word var: var myVariable = 0
Whenever you write myVariable, Blue knows that you mean 0. Now, you don't have to use var again when dealing with myVariable.

var myVariable = 0;
		myVariable = myVariable + 1
	console.log(myVariable);

Now, what do you expect to be printed in the console?

var myVariable = 1;
		myVariable = myVariable+4;
		var secondVariable = myVariable/2; 
	console.log(secondVariable+myVariable);

Now, what do you expect to be printed in the console?

Simple Data Types

Variables can store many types of information. Each of those types is called a data type. Right now, we will see a few simple data types which is all we need right now.

Numbers	This can store numbers like 5, 3.14159, -100, 518e8
Strings	Strings are used to store text. In order to tell blue you are talking about text, not code, use "" or ''. For example, `var myVar = "hello world"; console.log(myVar); console.log("myVar")` hello world myVar
Booleans	Booleans store true or false. For example, `var x = 1<2; console.log(x);` Displays true in the console.

Operations

+, -, *, /	These operations are just like in math
**	Exponents
x += 5;	Adds 5 to the value of x. Equivalent to x = x+5;
x -= 5;	Subtracts 5 from the value of x. Equivalent to x = x-5;
x *= 5;	Multiplies x by 5. Equivalent to x = x*5;
x /= 5;	Divides x by 5. Equivalent to x = x/5;
x < y	true if x is less than y (used in if statements)
x > y	true if x is greater than y (used in if statements)
x <= y	true if x is less or equal to y (used in if statements)
x >= y	true if x is greater or equal to y (used in if statements)

Math

You can use + - * and / for simple arithmetic. ** raises a number to a power.


		var x = 3**2;
		console.log(x);

What do you expect to see in the console?

Complex Math

Blue also supports more complex math. Below is a list of math that can be used. You probably won't need all of these functions because they can get quite complex, but they can be helpful!
All Premade Math

E	Euler's Constant
PI	Pi
SQRT2	Square Root of 2
abs(_)	Absolute value of _.
acos(_)	Arccosine of _.
asin(_)	Arcsin of _.
asinh(_)	Hyperbolic arcsin of _.
asin(_)	Arcsin of _.
atan(_)	Arctangent of _.
atanh(_)	Hyperbolic arctangent of _.
cbrt(_)	Cube root of _.
ceil(_)	Smallest integer greater than or equal to _.
cos(_)	Cosine of _.
cosh(_)	Hyperbolic cosine of _.
floor(_)	Greatest integer less than or equal to _.
hypot(a,b,c...)	The nth root of the sum of squares of a,b,c... (where n is the number of a,b,c...).
log(_)	Natrual logarithm of _.
log10(_)	Base 10 log of _.
log2(_)	Base 2 log of _.
max(a,b,c...)	The largest number in the list.
min(a,b,c...)	The smallest number in the list.
random(_)	A random number from 0 to 1.
round(_)	_ rounded to the nearest integer.
sign(_)	Whether _ is positive, 0, or negative.
sin(_)	Sine of _.
sinh(_)	Hyperbolic sine of _.
sqrt(_)	Square Root of _.
tan(_)	Tangent of _.
tanh(_)	Hyperbolic tangent of _.


		var x = PI + 10;
		console.log(x);

What do you expect to see in the console?

If and Else

An if statement makes some code only run if something else is true.
In order to show what code is in the if statement, and what isn't, we will use this | key. This can be typed by pressing shift and \. The \ key is below the backspace key on most keyboards.


		if something
		|//stuff that you want to happen if the if statement is true
		|//other stuff that you want to happen if the if statement is true
		|//more stuff that you want to happen if the if statement is true
		//stuff that is outside of the if statement, so will happen regardless of if the if statement is true.

Here is an example:


		if 1 < 2
		|console.log("one < two");
		console.log("this will always be printed!");

What do you think will be printed in the console?

ELSE
else statements are used with the if statements, but it makes the opposite happen.

 
		var x = 5;
		if x < 2 
		|console.log("x less than two!!"); 
		else 
		|console.log("x not less than two!!");

What do you think will be printed in the console?
Try experimenting with different values of x and seeing what will be logged.

Ask and Alert

The ask function asks the user a question.


		var answer = ask("What is your name?");
		console.log(answer);

Now, you know enough to make a text adventure! To get more used to the commands, do the text adventure project!

Alert

The alert function is like ask, but it doesn't have a spot for the user to answer.


		alert("YOU DIED!! Better luck next time!");

When

When loops can be used to run code when the user does something!


		when click
		|console.log("you clicked!");

Put the code that you want to run inside the when loop using the | symbol like in an if statement.
These are the times that when loops can happen:

click	Runs when the user clicks.
drag	Runs whenever the user's mouse is down.
click end	Runs whenever the user's mouse come us.
key pressed	Runs when any key is pressed.
x pressed	Runs when the specified letter is pressed. Works for a,b,c,d,e,f...x,y,x.
left pressed	Runs when the specified arrow is pressed. Works for left, right, up, and down.
space pressed	Runs when the space bar is pressed.

Forever Loops

Forever loops make the code inside happen every 0.03 seconds. A forever loop is the same as a repeatEvery 0.03 loop.


		x = 0;
		forever
		|x++;
		|console.log(x);

RepeatEvery Loops

You can use this to make code happen every __ seconds.


		var timePassed = 0;
		repeatEvery 1
		|timePassed += 1;
		|console.log(timePassed + " seconds have passed since you started the program!");

ForEach Loops

ForEach loops make code run many times in a row, slightly differently.


		var i;
		var myList = ["apple","orange","potato","kuma bear","lemon","blue","javascript"];
		forEach i in myList
		|console.log(i);

The code inside the forEach loop runs 7 times (since myList has 7 items). Each time, the code runs with i a different item of myList.

The range(start,end,difference) function returns a list of numbers from start to end, each number with a difference of difference. The difference is optional -- it you omit it, it is automatically one.


		var i;
		forEach i in range(0,10,0.5)
		|console.log(i);

Creating Characters: Rectangles

A character is a special type of variable. In this tutorial, we will create a rectangle. You can create other shapes as well in the next few sections. Start by defining the character:


		var myRect = new Rectangle();

When you run this code, you will see the default rectangle!

To change some things about your rectangle, you can use the following things:


		var myRect = new Rectangle();
		
		myRect.width = 50; //change the width
		
		myRect.height = 200; //change the height

		myRect.color = "red"; //change the background color
		
		myRect.borderWidth = 5; //change the border width
		
		myRect.borderColor = "#000000"; //change the border color

Blue uses the same color system as JavaScript. If it is a common color (black, red, blue, etc.) then you can put that color name in quotes. If you don't want to be limited to just those colors, you can use HTML Color Codes to get a hexidecimal. Hexidecimal colors look like #1DA2FD. HTML Color Codes explains how hexidecimal color codes work.
Whether you use hexidecimal or color names, the color has to be in quotes.

To change the position of the rectangle, use characterName.x and characterName.y.
Blue uses the Cartestian Coordinate System (the normal one), so the center of the screen in the point (0,0). The top-left of the screen is around (-300,300) depending on what device you are using. The unit is in pixels, and each screen has a different number of pixels.


		var myRect = new Rectangle();
		myRect.x = -300;
		myRect.y = 300;

myRect should be around the top-left corner of the screen. The top-left corner of myRect is at the point (-300, 300). If you can't see myRect then it is probably because your screen is less than 300 pixels on one side.
Now try putting myRect at (100,200), (-100,100), and (200, -150).
If you want to put myRect exactly in the top-left corner of the screen, you can use the variables width and height which are always exactly the width and height of the entire computer screen.


		var myRect = new Rectangle();
		myRect.x = -width/2; //negative half the screen width
		myRect.y = -height/2; //negative half the screen height

Circles

Circles are basically the same as rectangles. But, instead of width and height, we will use radius.
The color, borderWidth, borderColor, x, and y are exactly the same.


		var myCirc = new Circle();
		myCirc.radius = 50;
		myCirc.x = 100; 
		myCirc.y = 100;

Text

Text is similar to the Circle and Rectangle. The x, y, and color are the same.


		var myText = new Text();

		//change what is says
		myText.text = "hello there! This is what I am saying!";

		//change the font size
		myText.size = 20;

The font size is in pixels, too.

What Can Characters Do?

Characters can do a lot of special things!

.copy()

This creates an exact copy of the character. Custom parameters will be copied too.


		var original = new Rectangle();
		original.color = "red";
		original.height = 200;
		var clone1 = original.copy();
		clone1.x = 150;

.moveInDirection(angle,distance)

This moves something angle° at a distance of distance. For example,


		var cent = new Circle();
		cent.radius = 5;
		var moved = cent.copy();
		moved.moveInDirection(30,100);

This moves moved 100 pixels away at a 30° angle.

.distanceTo(obj)

This returns the distance between two characters or the mouse.


		var myText = new Text();
		forever
		|myText.text = myText.distanceTo(mouse);

.delete()

This deletes the character.


		var myCirc = new Circle();
		wait 1
		|myCirc.delete();

Custom Properties

You can add a custom property to a character.


		var char = new Rectangle();
		char.healthPoints = 100;

char.healthPoints is exactly the same as a variable. You can change it, print it, etc. If you copy char, the custom properties will be copied too.

More Data Types

Let's take a quick pause from all of the graphics to understand what's happening. In the variables section, we talked about some simple data types. Now, we will talk about more complex ones.

Lists	Lists store a list of information. They are created using [] and they can store numbers strings, booleans, or even other lists! You can refer to a single item of a list by saying myList[number]. This would return the number-1th item in myList. `var myList = ["apples","bananas","mango","strawberry","lime"]; console.log(myList); //this will log the whole list console.log(myList[0]); //this will log the 1st item of myList console.log(myList[1]); //this will log the 2nd item of myList console.log(myList[2]); //this will log the 3rd item of myList` Now say you want to add something to your list. Use push(): `var potatoes = ["Yukon Gold","Russet","French Fingerling","Sweet Potato","Red Potato"]; //Wait! Somebody discovered and named a new type of potato! potatoes.push("Purple Potato"); //Let's see what potatoes is now. console.log(potatoes);` There are a lot more things you can do with lists here
Objects	Objects store multiple pieces of information. They represent more complex things, like characters or user information. Sometimes, having too many variables can get confusing so you can use objects instead! Here is an example of creating an object: `var book = { //the information about the object goes inside of curly brackets title: "Harry Potter and the Goblet of Fire", //define each property with :, and separate the different properties with , author: "J. K. Rowling", length: 734, inSeries: true, genre: "fantasy" } console.log(book);` Instead of creating 5 variables bookTitle, bookAuthor, bookLength, etc., we created one object with 5 properties. When we console book, we get this expandable object in the console that has all of the properties. Get one property using . `console.log(book.title); console.log(book.author);` Each of these properties are exactly like a variable. They can be changed, etc. `//changed your mind book.genre = "Sci-fi"; console.log(book);` Now, when you expand book in the console, you will see that the genre is Sci-fi. Objects are important because each of the characters are actually an object. To see this, try: `var myObj = new Circle(); console.log(myObj);`
Functions	Functions store code, which can be used later. You don't need to know about these now, but there is information here

Mouse

The mouse is a lot like a character, but you can't change it. To find the x and y position of the mouse, use mouse.x and mouse.y.


		var follower = new Circle();
		forever
		|follower.x = mouse.x;
		|follower.y = mouse.y;

Touching and Distances

You can use this to see if two characters are touching or just their distance to each other.


		var first = new Rectangle();
		var second = new Rectangle();
		second.x = 150;
		console.log(first.distanceTo(second));

First and second are 150 pixels apart, so you will see 150 in the console.
You can also use the distance to see the distance to the mouse.


		var myText = new Text();
		forever
		|myText.text = Math.round(myText.distanceTo(mouse));

The Math.round() is only there so there aren't lots of digits after the number.

You can also use the distance function to see if two objects are touching.


		var myCircle = new Circle();
		myCircle.radius = 100;
		forever
		|if myCircle.distanceTo(mouse) < 100
		||myCircle.color = "red";
		|else
		||myCircle.color = "blue";

This code makes it so the circle is always red when the mouse is inside it, and always blue when the mouse is outside.

Custom Characters

Custom Characters can be used if you want to have a complected character with many parts!
An Example:


		var coolChar = new Custom();
		coolChar.instructions =
		|//tell blue how to draw your character
		|rect(10,10,150,150,"red");
		|rect(0,20,100,100,"blue");

		forever
		|coolChar.x += 1; //see how the whole character moves?

The .instructions = starts the piece of code that explains how to draw your character.
These positions are always relative to where the character is. For example, when it says the location is 10,10, it really means that the location is
10+(x-position) and 10+(y-position)

Drawing the Custom Character

rect()

The rect() function draws a rectangle.


		var x = new Custom();
		x.instructions =
		|rect(x position, y position, width, height, background color, border width, border color);

For example, rect(10,10,100,20,"clear",5,"black"); creates a rectangle at the point (10,10) with a width of 10 and height 100. The background color is clear, border width is 5, and border color is black.
By default, the background color is black, the border width is 0, and the border color is black.

oval()

The oval() function draws an oval.


		var x = new Custom();
		x.instructions =
		|oval(x position, y position, radiusX, radiusY, background color, border width, border color);

The circle is the same as the rectangle, but instead of width and height, there are radii.
For example, oval(-100,20,50,50,"clear",5,"black"); creates a circle at the point (-100,20) with a radius of 50. The background color is clear, border width is 5, and border color is black.
By default, the background color is black, the border width is 0, and the border color is black.

text()

The text() function writes text.


		var x = new Custom();
		x.instructions = 
		|text(to say, x position, y position, color, size);

For example, text("hello", -200, -100, "blue", 15); creates a blue "hello" at the point (-200, 100) in size 15.
By default, the color is black and the size is 30.

polygon()

The polygon() function creates a polygon with the points specified. polygon([x1,y1,x2,y2,x3,y3,x4,y4], background color, border width, border color) The polygon does the same with the background color, border width, and border color as the circle and rectangle.
For example, polygon([50,100,50,-100,-50,-50,-100,50], "clear", 5, "blue"); creates a clear polygon with the points (50,100), (50,-100), (-50,-50), and (-100,50) with a 5px wide blue border.

Clones

In many games, you want to have many clones of the same enemy or robot. For example, in jump, the spikes are clones.
First, create a base clone. This one is hidden.


		var base = new Rectangle();
		base.color = "red";
		base.hidden = true;

Each of the clones must be stored in a list. If you don't know what a list is, go to the complex data types section.


		var clones = []; //create an empty list of clones.

Now, we have to add some clones to our list.


		forEach i in range(0,10,1)
		|//this code is repeated 10 times
		|var newClone = base.copy(); //make a new clone
		|newClone.hidden = false;
		|clones.push(newClone); //add the new clone to the list of clones.

Now we have a bunch of clones, but they are all in the same position. How can we access each clone?


		repeatEvery 1
		|//repeat this every second
		|forEach i in clones //put each clone in a random position
		||i.x = random()*width/2;
		||i.y = random()*height/2;

Let's say we want to delete all of the clones.


		clones = [];

Now, none of the clones are moving, but they are still there. Why did this happen?
When we removed the items in clones, we removed them from the list, but the clones are still there. What do we do?


		forEach i in clones
		|i.delete();

		console.log(clones);

Now, when the program runs, the clones are gone! But it also seems like we didn't do anything because the list of clones is still there. This time, we deleted all of the clones, but the deleted clones are still in the list. We can do this with

Publishing Your Project

You have created an awesome project in Blue, and now you want to share it with your friends! It's actually very easy!
First, click on the button EXPORT TO WEBSITE while editing your project. It is next to the HELP and RUN buttons. If it worked, you should get an alert that says "copied to clipboard". Blue just copied the HTML code of your project (the programming language used for websites) which can be published. There are many ways to publish HTML (also called static) websites which are more complicated such as Github Pages and GoDaddy.

However, the easiest way is using JS Bin. First, log into JS Bin or create an account. Then, paste the HTML into the HTML section of your project. When you first run the code, sometimes it doesn't do anything (don't worry if this happens, it's totally normal). Go to File, Save snapshot. This saves the project and creates a link for you to see it in a new page. In order to see it run in a new page, click on the ↗, next to Auto-run JS and Run with JS. Once you open it in a new page, you can share your project with friends by sending them the link!

All the different tutorials