One of the goals, you should hold for yourself as a beginning programmer, is to write code that is highly readable.
In JavaScript white space is ignored by the computer. Therefore, you should feel free to use white space to make your code more “readable”. This means you should feel free to use new lines (pressing “return” or “enter”), to separate out sections of code.
Utilizing an example from earlier this week, the following code is for the smiley face that followed the mouse position.
Notice the use of new lines in the below code. There is a blank line, in line no. 3, to visually separate the first variable smileySize from the remaining variables, which are all in relation to smileySize. This helps me recognize that the first variable is the one that I should change, if adjusting size of the whole smiley face. While I would adjust the ratios for the remaining variables, if any of them felt off.
Likewise, I use blank, new lines, between my variable declaration section on-top, the setup() function, and the draw() function. This helps my eyes visually distinguish each large code block.
Within the draw() function. I use blank lines to visually separate the various statement groups, including the; translate section, head outline section, and mouth/eye section.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
// initial variable. Defines smiley face size.
let smileySize = 100;
// all other variables are determined in
// relation to the smileySize variable.
let eyePos_X = smileySize * 0.2;
let eyePos_Y = smileySize * -0.15;
let eyeSize = smileySize * 0.2;
let smilePos_Y = smileySize * 0.15;
let smileWidth = smileySize * 0.75;
let smileHeight = smileySize * 0.50;
function setup() {
// createCanvas( windowWidth, windowHeight );
createCanvas( windowWidth, 600 );
background( 'rgb(61, 175, 120)' );
}
function draw() {
// ** draw the smily face **
// make the smiley face follow the mouse
translate( mouseX, mouseY );
// draw the outline and head
stroke( 0 );
fill('rgba(234, 255, 61, 0.5)');
// note: the head size is based on a variable
ellipse( 0, 0, smileySize );
// draw the mouth and eyes
// note: that their size and position is dependent on the initial smileySize var.
noStroke();
fill( 40, 127 );
arc( 0, smilePos_Y, smileWidth, smileHeight, 0, PI );
ellipse( -eyePos_X, eyePos_Y, eyeSize );
ellipse( eyePos_X, eyePos_Y, eyeSize );
}
Sometimes, when writing a statement, you may also want to separate out parameters on to new-lines, so that it is easier to read and understand the statement. This can be particularly true for functions, which accept a lot of parameters, especially when you are using variables.
For example, The arc() function takes up to seven input parameters. If you were using variables, as in the following statement, it can be hard to read what is happening.
let arc_X = 30;
let arc_y = 20;
let shape_width = 200;
let shape_height = shape_width * 0.5;
let arc_start = 0;
let arc_end = PI;
arc( arc_X, arc_Y, shape_width, shape_height, arc_start, arc_end );
If the variables were longer, or we were performing math inside of the function parameter list, that line could get ridiculously long. To fix this, it is sometime appropriate to separate out the parameters on to new lines, with an extra level of indentation.
let arc_X = 30;
let arc_y = 20;
let shape_width = 200;
let shape_height = shape_width * 0.5;
let arc_start = 0;
let arc_end = PI;
arc(
arc_X,
arc_Y,
shape_width,
shape_height,
arc_start,
arc_end
);
Note: that in the above, the closing parenthesis is placed on its own line, at the same indent level as the function name and opening parenthesis.
Another area that can become difficult to read, is individual lines of statements themselves. One solution, as just presented, is to use new-lines to logically break up long lines of code. However, sometimes the problem is just reading what is going on in a single short line.
For example, the following is short enough, but might be difficult to read, as it all runs together.
let der=(width*0.5)/height+1000;
ellipse(der,der,der*2.1);
The above is not horrendous, but some additional spaces, could help visually separate out what is happening.
I would suggest the following;
let der = (width * 0.5) / height + 1000;
ellipse( der, der, der * 2.1 );
In the above, by placing spaces on either side of operators, it becomes easier to see, that some sort of mathematical calculation is occurring. Likewise, placing spaces after comma-separated parameters makes it easier to read each parameter to a function.
Another detail, that you have hopefully already noticed, is the use of tabs to make code more readable. Again, the computer ignores white space, so tabs may be added to visually identify structure and hierarchy.
The below, with every statement starting at the same indent level, makes it difficult to identify structure.
function setup() {
createCanvas(400,200);
}
function draw() {
background(
some_var1,
some_var2,
some_var3
);
translate(width*0.5,height*0.5);
ellipse(0,0,300,100);
}
Whereas, if we use indentation, we can more easily identify the visual structure of the code.
function setup() {
createCanvas( 400, 200 );
}
function draw() {
background(
some_var1,
some_var2,
some_var3
);
translate( width * 0.5, height * 0.5 );
ellipse( 0, 0, 300, 100 );
}
A NOTE About Indentation; In your text editor, you can set, as a preference, whether your indents are tabs, or spaces. Furthermore, if using spaces, you can specify whether these should be 2-spaces, or 4-spaces.
Again, it is up to your personal preference, as long as you are consistent in your coding practice.,
My code, is typically indented using tabs, set to be 4-spaces.
The following provides a nice laugh about this debate, watch Silicon Valley, Season 3 / Episode 6;
As a final example, the below is the same code as the most recent example, but it has been “minified”, which makes the file smaller. This code is still legal and will execute, but it is hard for human’s to read.
function setup(){createCanvas(400,200);} function draw(){background(some_var1,some_var2,some_var3);translate(width_0.5,height_0.5);ellipse(0,0,300,100);}
Readable code matters for a number of reasons;
Please read the following on style and readability;
Also, please go to, follow along, and complete the following KhanAcademy tutorial.