Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
16 views

Programming Notes

Uploaded by

markbryanviernespaule
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
16 views

Programming Notes

Uploaded by

markbryanviernespaule
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 4

Language: JavaScript

Programming: Giving the computer a series of commands to follow.

Table of Contents
Part 1: Intro to Programming
Chapter 1: Making drawings with code
2 Lessons
3 Tips
Learn how to make shapes with code

Chapter 2: Coloring
2 Lessons
1 Tip
Learn how to color shapes and backgrounds with code.

Chapter 3: Variables
2 Lessons
1 Review
Learn to apply variables to your code

Chapter 4: Animations Basics

Learn how to make animation with code

Chapter 1: Drawing Basics


Lesson 1: Making drawings with code

Write the command, pararenthesis and semicolon


In the parenthesis add the parameter(the numbers)
Ellipse
Use: To draw a circle or oval
Ellipse have 4 parameters
1st parameter controlls x (left to right)
2nd parameter controlls y (up and down)
3rd parameter controlls w (width)
4th parameter controlls h (height)

Lesson 2: Making more drawing with code


Rects
Use: To draw rectangle or square
Rects have 4 parameters
1st and 2nd parameter control upper left corner of the rect.
3rd parameter controlls w (width)
4th parameter controlls h (height)
(optional) 5th parameter controlls r (radius, how rounded the rect is)

Lines:
Use: To draw lines
Lines have 4 parameters
1st and 2nd parameter control starting point of the line
3rd and 4th parameter control ending point of the line

Things to remember:

Tip 1: Number Scrubing


You click on the number, then click and drag on the arrows that pop up above it.
Number scrubbing is great because of how easy it makes experimentation.

Tip 2: Comments
Single line comments always start with two slashes (//) then a bit of text to help
humans understand what the code does,
but Multi-line comments start with "/*" and end with "*/".

Tip 3: Ordering commands


All commands must be in order(biggest shape to smallest shape)

Chapter 2: Coloring
Lesson 1: Coloring with code

Remember that coloring has 3 parameter


RGB
1st parameter controlls how red the color is (R)
2nd parameter controlls how green the color is (G)
3rd parameter controlls how blue the color is (B)
Coloring the background - Write "background" then parenthisis.
In the parenthisis write the parameters(background has 3 parameters)
The parameter's maximum number is 255.
Fill
Use: Colors the inside of the shape
How to use fill - Type "fill" before the command then parenthisis.
In the parenthisis write the parameters(fill has 3 parameters)
The parameter's maximum number is 255.

Remember that strokeWeight has 1 parameter


1st parameter controlls how thick a shape is with NO width and height.
strokeWeight = How thick a shape with NO width and height.

Stroke
Use: Changes the color of the outline and turns noStroke off.
Stroke has 3 parameter
RGB
1st parameter controlls how red the color is (R)
2nd parameter controlls how green the color is (G)
3rd parameter controlls how blue the color is (B)

noStroke
Use: Turns off outlines entirely for a shape(must be before all command you want to
have no outline)

Tip: Color Picking


Click anywhere in the numbers to get the color picker to pop up. Then, click on the
right hand color bar to change the general color you're picking, and click in the
left hand side to change the lightness/brightness of the color.
Lesson 2: The Power of Docs
Documentation
Use: It explains how to program in a particular language and environment with
examples and gotchas.
Note: When copy pasting the command the parameter may be placeholders.
If you copy paste the command without changing the placeholders you will have
an error or the command will not work.

Chapter 3: Variables
Lesson 1: Intro to variables
Variable
Use: To change two or more parameter with just changing one number.
How to make variables: Type "var", space then name of the variable(it should
describe the variable will hold) equal sign then the parameter.
Equal sign means assignment. That means the parameter will be assigned to the
name of the variable.
If youcome across a equal sign say gets instead of equals.
Remember: Variable must be defined before being used.

Lesson 2: More on Variables


Variable 2
Use: With changing just one parameter you can change the the entire
shape/object/thing for x, y, w, or, h.
How to do it: Type a variable then make math expresions.
Example:
var x = 200

// face
fill(255, 255, 0);
ellipse(x, 208, 300, 300);

// eyes
fill(46, 46, 41);
ellipse(x - 50, 151, eyeSize, eyeSize);
ellipse(x + 100, 142, eyeSize, eyeSize);

// mouth
fill(252, 65, 65);
ellipse(x + 50, 240, 120, 136);

Review: Variables
A variable is a way to store values. To use a variable, we must both declare it—to
let the program know about the variable—and then assign it—to let the program know
what value we are storing in the variable.
Here's how we would declare a variable named "xPos":

var xPos;

Now, we can assign xPos to hold the value 10:

xPos = 10;

If we want to—and we often do!—we can declare and assign in one statement:
var xPos = 10;

If, for some reason, we want to change the value of a variable later, we can re-
assign it:

var xPos = 10;


// some time later ...
xPos = 20;

We'll soon see why re-assignment can be useful when we want to animate our
drawings.

How can we pick names for our variables? For variables in JavaScript, follow these
rules:
Variable names can begin with letters, or the symbols $ or _. They can only contain
letters, numbers, $ and _.
They cannot begin with a number. "myVariable", "leaf_1", and "$money3" are all
examples of valid variable names.
Variable names are case sensitive, which means that "xPos" is different from
"xpos", so make sure you are consistent.
Variable names can't be the same as existing variable names, and there are a lot in
our ProcessingJS programming environment.
If you ever see an error pop up like "Read only!", try changing your variable name.

Variable names should be clear and meaningful; for example, instead of "ts", use
"toothSize".
Variable names should use camel case for multiple words, like "toothSize" instead
of "toothsize" or "tooth_size".

Chapter 4: Animation Basics


Lesson 1: What are animations?
First, though, let's talk about what an animation is. How could you make an
animation without programming?
You could make a bunch of drawings on pieces of paper, then flip those pieces of
paper so the drawings go by in a sequence, and it would look like an animation.
Well, it'd look like an animation if those drawings were each just a little bit
different from each other. For example, check out this pencil-and-paper animation
of a car driving down the street:
Pencil-and-paper animation of a car going down the street
Pencil-and-paper animation of a car going down the street
It probably took a while to make that animation, though, and well, it's not that
great. It's pretty shaky and it has no color at all.
But now we live in the future! We can make a better animation programmatically in a
few minutes with only a dozen lines of code!

Lesson 2: Making Animations

You might also like