top of page
Search

Lesson 2

Updated: Jul 16, 2020

So after learning the very basics of Processing, here I go on to the second Lesson.


Chapter 4


What is a variable? “A variable is like a storage locker. ” Deposit some information in the locker where it can live safely, readily available at a moment’s notice. Technically speaking, a variable is a named pointer to a location in the computer’s memory (“ memory address ”) where data is stored. Since computers only process information one instruction at a time, a variable allows a programmer to save information from one point in the program and refer back to it at a later time. For a Processing programmer, this is incredibly useful; variables can keep track of information related to shapes: color, size, location.



Variables can hold primitive values or references to objects and arrays .


A type is the kind of data stored in that variable. This could be a whole number, a decimal number, or a character.

Important: Avoid using words that appear elsewhere in the Processing language, Use names that mean something, Start your variable with a lowercase letter and join together words with capitals. Words that start with capitals are reserved for classes. Also important ist Variables must have a type. This is how the computer knows exactly how much memory should be allocated to store that variable’s data. Variables must have a name.


Variable names must be one word (no spaces) and must start with a letter (they can include numbers, but cannot start with a number). They cannot include any punctuation or special characters, with the exception of the underscore: “ ” .


We can also combine variables in one line. A variable can also be initialized by another variable ( x equals y ), or by evaluating a mathematical expression ( x equals y plus z, etc.).


Always use variables!


So I started to read the Chapter 4 and everything was going well, until I tried to do the excercises. I did NOT understand anything and another problem I had was, when I copied the coding from the book, nothing was happening. So I did not even know where the problem was. I decided to watch the YouTube video. Maybe then I could begin to understand better.


So this is what I learned:

1. Declare the variable (Top): you need a type followed by a name. A type could be inter or float. You can name your variable anything you want, but the name cannot start with a number.

2. Initialize the variable (Setup): We need to give the variable an initial value

3. Use the variable (Draw)


The first exercise from the videos was really the basic of everything, this is why I am incluiding it:



So knowing what I know now, I did the next Exercise: Exercise 4-3: Change Example 4-3 so that instead of the circle moving from left to right, the circle grows in size. What would you change to have the circle follow the mouse as it grows? How could you vary the speed at which the circle grows?


Based on what I learned in the video, all I did was define the variable for the size instead of for the location:


int circleX; void setup() { size(640, 360); circleX = 50; } void draw () { //Draw background(50); fill(255); ellipse(320,180,circleX,circleX); //Logic circleX = circleX +2; }




Very important is also: Assignment Operation. We have to assign values to the variables in order for them to work.


For the final excercise I could move the corona virus and make the color of the body change. With a simple command I was also able to make the virus jiggle. This was way easier to do as I thought, I tried many complicated things, but at the end of the day it was only a comand. So this ist what my Corona looks like at the end of this chapter:



Chapter 5


5.1 Boolean Expression


Value stored in the variable

x  20 → depends on current value of x y   5 → depends on current value of y z   33 → depends on current value of z

Boolean expressions (often referred to as “ conditionals ” ) operate within the sketch as questions.


If the mouse is on the left side of the screen, draw a rectangle on the left side of the screen .

if (mouseX < width/2) { fill(255); rect(0,0,width/2,height); }


The structure can be expanded with the keyword else to include code that is executed if the boolean expression is false. This is the equivalent of “ otherwise, do such and such. ”

if (boolean expression) { // code to execute if boolean expression is true } else { // code to execute if boolean expression is false }


So I tried to do the Exercise 5-1: Consider a grading system where numbers are turned into letters. Fill in the blanks in the following code to complete the boolean expression.



The next Excercise I was not able to do.


The next example of the book worked and I began to understand how to work with this



More importat information to use this better: While using if statements is a perfectly valid solution to the constrain problem, Processing does offer afunction entitled constrain( ) that will get us the same result in one line of code. if (r > 255) { r = 255; } else if (r < 0) { r = 0; } r = constrain(r,0,255);

constrain( ) takes three arguments: the value we intend to constrain, the minimum limit, and the maximum limit. The function returns the “constrained” value and is assigned back to the variable r. (Remember what it means for a function to return a value? See our discussion of random( ) . )


The next example was even better:



On to the next:

Exercise 5-3: Move a rectangle across a window by incrementing a variable. Start the shape at x coordinate 0 and use an if statement to have it stop at coordinate 100. Rewrite the sketch to use constrain( ) instead of the if statement. Fill in the missing code.



So of course it gets more and more complicated. Important to remeber are the statements!!!

Funny thing... I have not found the pipe on my keyboard....


Another Excercise:

Exercise 5-4: Are the following boolean expressions true or false? Assume variables x  5 and y  6.


!(x > 6) --> true (x = = 6 & & x = = 5) --> false (x = = 6 || x = = 5) --> true (x > -1 & & y < 10) --> true Although the syntax is correct, what is flawed about the following boolean expression? (x > 10 & & x < 5) --> I guess you cannot give x a value bigger than 10 and at the same time a value smaller than 5.



The next one:

This one costed me a lot of time, I do not know why. But after a lot of try and error I was able to make it:

Exercise 5-5: Write a program that implements a simple rollover. In other words, if the mouse is over a rectangle, the rectangle changes color. Here is some code to get you started.



And on to the next:

Exercise 5-8: Example 4-3 in the previous chapter moved a circle across the window. Change the sketch so that the circle only starts moving once the mouse has been pressed. Use a boolean variable:


boolean move = false; //It has to stay and not move automatically int circleX = 0; int circleY = 100; void setup() { size(200,200); } void draw() { background(100); stroke(255); fill(0); ellipse(circleX,circleY,50,50); if(move){ circleX = circleX + 1; } } void mousePressed() { move = true; }




Bouncing Ball


So the chapter continues...

This I found very important: speed = speed * -1; This means that the speed is reversed.


So we apply this on the next Excercise:

Exercise 5-9: Rewrite Example 5-6 so that the ball not only moves horizontally, but vertically as well. Can you implement additional features, such as changing the size or color of the ball based on certain conditions? Can you make the ball speed up or slow down in addition to changing direction?




The next one was also very important, since we are changing directions and states of the square:


This is the code:

int x = 0; // x location of square int y = 0; // y location of square int speed = 3; // speed of square int state = 0; void setup() { size(200,200); } void draw() { background(100); // Display the square noStroke(); fill(255); rect(x,y,10,10); if (state == 0) { x = x + speed; if (x > width-10) { x = width-10; state = 1; } } else if (state == 1) { y = y + speed; if (y > height-10) { y = height-10; state = 2; } } else if (state == 2) { x = x - speed; if (x < 0) { x = 0; state = 3; } } else if (state == 3) { y = y - speed; if (y < 0) { y = 0; state = 0; } } }

 
 
 

Comments


© 2020 by Maria Guzman. Proudly created with Wix.com.

bottom of page