Day 6: Pre-work JavaScript

Learning basic JavaScript

After learning about the CLI, it was time to move on to the Front End development tools. JavaScript is programming language that allows for interaction on a webpage or an application. The Intro to JS: Drawing and Animation focused on the base elements: shapes, colors and variables. The beginning was a little slow, but the instructor was very enthusiastic and made the talk-through lesson enjoyable.

Drawing my first penguin

With a visual to go by, I was able to replicate my first penguin. I must admit that I did not put as much effort into the pizza exercise, but I feel the penguin was a good first attempt. See code below…Amazing how all thing was created by some code.

// the sky
background(169, 153, 240);

//the igloo
noStroke();
ellipse(50, 200, 275, 275);

//the igloo door
fill(169, 153, 240);
ellipse(25, 200, 120, 125);

// the background snow
noStroke();
fill(255, 255, 255);
rect(0, 225, 400, 175);

//Penguin Body
noStroke();
fill(0,64,255);
ellipse(300, 200, 115, 135);

//Penguin Arms
fill(0, 136, 255);
ellipse(300, 200, 100, 135);

// Penguin Chest
fill(255, 255,255);
ellipse(300, 200, 90, 135);

//Penguin Foot Left
fill(255, 183, 0);
triangle(250, 270, 290, 250, 290, 270);

//Penguin Foot Right
fill(255, 183, 0);
triangle(310, 270, 310, 250, 350,270);

// Penguin Head
fill(0,64,255);
ellipse(300, 130, 75, 75);

//Penguin Eyeshadows Left
fill(255,255, 255);
ellipse(290, 145, 45, 45);

//Penguin Eyeshadows Right
fill(255,255, 255);
ellipse(310, 145, 45, 45);

//Penguin Beak
fill(255,183, 0);
triangle(280, 150, 320, 150, 300, 175);

//Penguin Eyes Left:
fill(0, 0, 0);
ellipse(285, 140, 5, 5);

//Penguin Eyes Right:
fill(0, 0, 0);
ellipse(315, 140, 5, 5);

As I began to think this is a lot of functions, parameter settings and etc. to remember, the instructor stated that DOCUMENTATION is the key. Apparently, there are tons of manuals and documentation out there to assist with your programming so you don’t have to memorize the many functions. Whew…I felt the little hamsters in my brain getting worried they would have to go into overdrive. Lastly, I began to think that this was a lot of coding and there had to be a simpler way. Enter…VARIABLES…

Time saving VARIABLES

Think of variables like names for placeholders. If we had several functions with similar parameters we could name them uniquely or use variables. Take for instance the lines of code above for the penguin eyes. I could use the unique parameters below of width = 5 and height = 5.

//Penguin Eyes Left:
fill(0, 0, 0);
ellipse(285, 140, 5, 5);

//Penguin Eyes Right:
fill(0, 0, 0);
ellipse(315, 140, 5, 5);

Or I could declare a variable at the top of my code called ‘eyeSize’.

Ex. var eyeSize = 5;

‘var’ -> suggests we are about to define a variable

‘eyeSize’ -> is the variable

‘=’ -> suggests the program to ‘GET’ something when it sees ‘eyeSize’

‘5’ -> is the value the the program should get when it sees ‘eyeSize’

Then I could the following and quickly adjust the Penguin eye size.

//Penguin Eyes Left:
fill(0, 0, 0);
ellipse(285, 140, eyeSize, eyeSize);

//Penguin Eyes Right:
fill(0, 0, 0);
ellipse(315, 140, eyeSize, eyeSize);

Khan Academy has some good tutorials to start anyone off on their programming journey for free. Give it a try and see hope much fun you can create. Oh, and there is a neat trick you can do when you substitute ‘mouseX’ and ‘mouseY’ for fill function parameters.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.