System, Environment
1. What is Processing?
Processing is a program that accepts compiled code and runs it. Processing is geared towards artists and creative developing.
2. What does IDE stand for? Describe its components.
IDE stands for Integrated Development Environment. An IDE contains a code editor, a compiler which interprets a specific language, and a debugger which helps indicate errors in code.
3. What is a mode in Processing? Which is the default mode?
A mode is the type of processing that Processing will work on. For example, Processing currently has four modes; Processing, p5.js, Processing.py, and Processing for Android. The default mode for Processing is Java.
4. How do you save a file in Processing? What convention might you use?
To save a file in processing, you go to the toolbar at the top then click: File > Save As > Save. A convention one might use is ‘camel casing’ where the start of each new word in the file name starts with a capital, “SaveThisFile”. Another convention is to enter an underscore in place of a space, “save_this_file”.
5. How do you export a Processing file?
To export a file, go to the menu bar then click: file > export application > export. You can choose the platform you want the file to be compatible with and if you want presentation mode (the code will be full screen when run)
6. What is a library? How do you access and use a library in Processing?
A library is where there is added code that wasn’t originally built into Processing. You can access libraries by going to the menu bar then clicking: sketch > libraries. This will then import that library into your sketch, so it can be used. After importing the library into your skets, you can then begin to use is properties and functions throughout your code.
7. Where is the color picker in the Processing IDE?
The color picker in Processing can be accessed by going to the menu bar then clicking: tools > color selector.
8. What do the circle, triangle and square shapes across the top of the Processing editor represent? The circle represents running your code that was compiled in the editor. The square represents stopping the code that is run so it doesn’t keep running in the background of your process. The circle with a butterfly symbol inside represents a debugger where it will help detect possible problems in the code.
9. How do you add and name an additional or new tab in the Processing editor?
To add a new tab, you can click the downward pointing triangle next to the sketch currently open. The downward pointing triangle will provide a menu where you can add and rename tabs.
Coding Basics
10. Describe the coordinate system in Processing.
The coordinate system in Processing is similar to the cartesian coordinate system in how it is noted; (x-coordinate, y-coordinate). The top left corner of the canvas is the point (0,0). Moving to the right and bottom of the canvas increase the value of the coordinate. For example, a point in the middle of a 100 x 100 pixel canvas will have the coordinates of (50,50)
11. What is the difference between an active and static sketch? Use code to demonstrate your response.
A static sketch is only drawn once. An active sketch contains a draw function where Processing will continuously draw what is written.
12. What is the general syntax and structure for a line of code? Use code to demonstrate your response.
The general syntax of a line of code has a function, values within the parameters of a function, and a semicolon.
line( 23,40,60,40);
A line is a function of what is to be drawn. The numbers data in parentheses follow the parameters of the function so it knows how to perform the specific function. The line function knows to connect the coordinate (23,40) to the coordinate (50,40). A semi colon is necessary because it completes a specific line of code.
13. What is the general syntax and structure for a block of code? Use code to demonstrate your
Response.
The general syntax of a block of code is a cluster of lines of code. There are still functions, data inside the parameters of a function, and a semicolon. Blocks of code differ in that they are contained within curly brackets ‘{ ‘. Blocks of code introduce using tabs for aesthetic reasons to show that something is “nested” or within a function.
The curly bracket after ‘voidsetup()’ shows that the following lines of code will be performed within the setup function. The closing curly bracket ‘} ‘ shows the end of the block of code. Lines of code written after a closing bracket are not being used as part of that specific function.
void setup() {
size(300, 300);
background(0);
}
14. Why are certain words in different colors in the Processing editor?
Processing understand that there are specific functions and keywords that are used often. They are in certain colors because they are already defined by Processing ‘behind the scenes’.
15. What is a system or reserved word in Processing? Give an example.
A reserved word are a series of characters that Processing recognizes as a defined word. They are reserved in the way, that they cannot be used again for purposes that aren’t already specifically defined. An example of this is the word ‘background’. Processing has already defined this as a function to describe the color of the canvas, which is why it appears in blue font.
16. How does order matter in Processing. Give an example demonstrated with code.
Order matters in Processing because code is read line by line. It will show the action of later which can give the appearance that a previous line of code was not completed. When the code below is run, the viewer cannot see the first circle written. Processing performed the lines in order, so the second and larger circle was drawn over the first one. When the order of the circles are switched, the viewer can then see both circles.
void draw() {
background(48,88,155);
stroke(30,104,229);
fill(99,196,240);
ellipse(50,10,20,30);
fill(187,189,191);
stroke(167,171,173);
ellipse(0,0,150,150);
}
17. What is the difference between mousePressed and mousePressed()? Use code to demonstrate your response.
‘mousePressed’ is a variable and ‘mousePressed’ is function. mousePressed can be used in the parameters of another function. The example below puts the variable ‘mousePressed’ in the parameters of an if statement. When mousePressed is
void draw() {
if (mousePressed) {
background(255);
} else {
background(255, 0, 0);
}
}
In this block of code mousePressed() is superseded by ‘void’ to prevent a return value. noLoop(); and background() are put into the mousePressed function. That cannot be done with a variable.
void mousePressed() {
noLoop();
background(0);
}
18. What called function must always be first in setup()?
The function size() must always be called first in setup().
19. What is the difference between an inline comment and a block or multi-line comment? Use code to demonstrate your response.
An Inline comment is noted by two forward slashes ‘//’ at the beginning of the comment. A block comment is noted by ‘/*’ at the beginning of the comment and ‘*/’ at the end of the comment.
Below is an example of both methods.
void display(){
noStroke();//there is no outline for the rain
fill(99,196,240,85);//this shows the fill of the raindrops
ellipse (xpos, ypos, diam1, diam2); /*This shows the format for the raindrops
so I dont have to type it continuously*/
}
20. Does whitespace matter in Processing? Capitalization? Use code to demonstrate your response.
Whitespace is necessary in web development for readability of the code. Capitalization is very important to keep track of in Processing. A function will not be recognized if the first letter is capitalized. Processing did not register or color the background when the draw function was capitalized.
void Draw (){
background(48,88,155);
}
Variables, Operators, Logic
21. What is a variable? What is a data type? What is a value?
A variable holds the place of a value. And a data type kind of value. An example of data type is int for integers or whole numbers. Another example is float for numbers that contain decimals. A value is a character (numbers or letters) assigned to something else.
22. What is the difference between a system variable and one that you define? Use code to demonstrate your response.
A system variable is already defined by Processing and it is a reserved word. An example of this is height. Processing knows that height is based of the canvas size. ypos is a variable that I defined. Processing doesn’t know that ypos = 0 until I define it myself in the IDE.
void move(){
ypos = ypos + yspeed;
if (ypos > height){//this loop stays in effect as long as the raindrops are below the height
ypos = 0;
}
}
23. What is scope and how does it impact code? Use code to demonstrate your response.
Scope tells Processing where it can find the definition of certain values and where those values can be used. A global variable can be used anywhere in the code, where a local variable can only be used within the function { } it was defined.
float x = .25 //global variable
void
setup(){
size(600,600);
}
Void draw(){
y=60; //local variable
line(14. y, 97, y);
}
24. What does it mean to declare, initialize and use a variable? Use code to demonstrate your response.
Declare is calling the value. Initializing is assigning a value to the variable, Using a variable is putting it in a function to be used as the value assigned to it.
float y; // declare
float y = 24 // initialize
point(60, y); // use
25. What happens when a variable is attempted to be accessed outside of its scope?
If it is a global variable, the program will run as intended (assuming there are no other conflicts). It is is a local value, Processing will say the variable cannot be found.
26. What happens when a variable is declared globally, but is not used?
If a global variable is declared but not used, nothing happens to the functionality of the program. You just added an unnecessary line of code.
27. What value does float nums; have?
float numbers can be integers or decimals.
28. What are operators in Processing? Use code to demonstrate your response using at least one operator.
Operators are math symbols used in Processing to to articulate something with minimal characters. The forward slash represents division. The if statement loops at half the width of the canvas
void move() {
xpos = xpos + xspeed;
if (xpos > width/2) {
xpos = 0;
}
}
29. What is a boolean data type?
A boolean data type can only be defined as true of false.
30. List three primitive data types.
Boolean, float, integer
31. Write a code example that increments a value by 5.
This line gets shorter by 5 pixels. The first coordinate moves to the right.
float x = 4;
void setup(){
Size(200,200);
}
void draw(){
line(x,20,150,20);
x+=5;
}
32. Describe the order of operations for: x = speed * 40;
Processing first searches the value of speed. Next Processing multiples that value of speed by 40. Finally, it inputs the product as the value x.
33. Write a code example that decreases a value by one using shorthand.
float y=4;
void setup(){
size(400,400);
}
void draw(){
line(0,y,300,300);
y-=1;
}
34. What does the logical operator ! do?
The exclamation point acts as an inverse operator
Control, Iteration, Structure
35. What is an if statement? When should it be used? Use code to describe its syntax.
An if statement represents a conditional statement. It tells Processing when to perform specific code.
void draw() {//void prohibits return value
fill(175);// the color of the circle is gray
ellipse(50,50,25,25);//circle in the center of canvas
if (mousePressed) {//if the mouse is pressed
background(0,0,255);//background is blue
}//close if statement
}
36. How many ifs can be used in an if statement?
An infinite amount of if statements can be used.
37. What is the difference between else and else if? Use code to demonstrate your response.
An else if statement continues to check if statements are true. An else statement represents the end and processing will skip other if statements.
void draw() {//void to prohibit a return value
background(345, 24, 112);//the original background color
if (circleX > 400) {//if the circle x-coordinate is greater than 400pixels
background(175);//then the background is grey
} else if (circleX > 200) {//or if the circle x-coordinate is greater than 200pixels
background(241, 141, 0);//then the background is orange
} else {//otherwise
background(0, 0, 255);//the background is blue
}
38. What is the difference between code with several consecutive if statements and code with several else if statements?
Processing will check each If statement independently. Processing will stop checking else if statements, once it finds one that is true.
39. What is a while loop? When should it be used? Use code to describe its syntax.
A while loop says that as long as this is happening, do something else. It should be used when you have multiple variables.
void draw() {//void prohibits a return value
background(242, 231, 5);//The color of background is yellow
int y = 0;//give y the value of zero '0'
int x = 0;//gives x value of zero '0'
while (y <= height) {//says as long as the y is less than height
stroke(0);//black ouline
strokeWeight(3);
fill(230, 158, 245);//purple inside the square
rect(x, y, 50, 50);//begins at the point (0,0) and radius of 50
y = y + 50;//draw another box 50 pixels beneath previous square
x = x + 50;//draw another box to the right of previous box
}//This closes the while loop
}//closes draw function
40. What is a for loop? When should it be used? Use code to describe its syntax.
A for loop says as long as one thing is true, perform something. A for loop should be used when you know how many times you want it to run.
void draw() {//void prohibits a return value
background(242, 231, 5);//The color of background is yellow
for (x = 0; x < width; x +=50) {//give x value of 0, x is less than 0, assigns new value of 50 to x stroke(255);//outline is white fill(random(255), random(255), random(255));//gives the horizontal square random color rect(x, 300, 50, 50);//starts at coordinate (0,300) and has a radius of 50 x = x + 50;//says to draw the next square 50 pixels to the right of previous square }//closes the for loop }//this closes the draw function
41. Write code that uses a nested for loop to draw a grid of squares across the x and y axis of a canvas.
void draw() {
background(random(255), random(255), random(255));
strokeWeight(10);
stroke(255);
for (int i = 0; i <= width; i += 100) {
for (int j = 0; j <= height; j += 100) {.
fill(mouseX, random(180,255), mouseY);
rect(i, j, 50, 50);
}
}
}
Functions
42. What is a function?
A function is a command that Processing completes.
43. What is the difference between a function or method built into Processing and one that you define?
A predefined function already has parameters or specific arguments it will accept. The user has to create definitions for the arguments a function will take if they create an undefined function.
44. What does the keyword void mean?
The keyword void prohibits a return value
45. What does the keyword return mean?
The return keyword gives back the value you indicate.
46. Write code that uses the keyword return.
Void setup(){
size(400,400);
}
void draw(){
If mousePressed== true){
background(255);
Return;
}
fill(255,0,0);
ellipse(200,200,100,100);
}
47. Write code that used a defined function (by the user) and call or use it.
48. What is the distinction between function and method?
A method is only defined in a class, a function can be called anywhere.
49. What is the distinction between argument and parameter?
A parameter is the data input. An argument is the variable defined for the function.
50. What do the () in a function call or definition indicate?
This is where you input an argument.
51. What will happen if you call an undefined function?
The debugger will say that a function is undefined and it will not run.
52. What will happen if you define a function, but do not call or use it?
The debugger will give you an error.
53. What concept are functions useful for?
Functions help the code to run in a cohesive manner.
Objects/Classes, Arrays
54. What is an object?
An object is one instance of a class you have created.
55. What data type is an object?
An Object is a class data type. The class data type is defined by variables you choose. Objects are essentially variables.
56. What concept are objects, classes and arrays useful for?
Objects, classes, and arrays are used to simplify and organize code, especially code that will require you to use something many times.
57. What is the difference between an object and a class? Use code to demonstrate your response.
A class describes an object.
This is a class:
class Droptop{
color c;
float xpos;
float ypos;
float diam1;
float diam2;
float yspeed;
Droptop(float tempX, float tempYs){ /*float tempX and float tempYs are placed here
so I can alter the x position and speed easily in the parameters of my object. */
c = color(99,196,240,85);
xpos = tempX; //Here I assigned xpos as tempX so the value I plave in () will come from here.
ypos = 0; //I want all the rain to start from 0
diam1 = 20; //I want both of my diameters to stay the same, so they are not 'temp'
diam2 = 30;
yspeed = tempYs; //Here I assigned yspeed as tempYs so the value i put in () will be taken from here
}
Droptop() { /*Here I made a second version of the same function,
so it isnt necessary to fill (). This is called 'overloading'*/
c = color(99,196,240,85);
xpos = random(width);
ypos = 0;
diam1 = 20;
diam2 = 30;
yspeed = random(1,3);/*i did not want to make this speed uniform
depending on the amount of blank() used*/
}
void display(){
noStroke();
fill(99,196,240,85);
ellipse (xpos, ypos, diam1, diam2); /*This shows the format for the circles
so I dont have to type it continuously*/
}
void move(){
ypos = ypos + yspeed;
if (ypos > height){
ypos = 0;
}
}
}
This is an object:
Droptop[] rDrop = new Droptop[200]; /*instead of two sepearate objects,
i can use on line of coding with an array. An array is a list. '[2]' represents the
number of spaces in the index. in coding, counting starts from the number zero to account for the index.*/
void setup() {
size (800, 600);
for (int i = 0; i < rDrop.length; i++){ //i can use rDrop.length because it will represent the length of the strong (or how many spots are listed in the array"
rDrop[i] = new Droptop();
}
}
58. What is dot syntax? Use code to demonstrate your response.
Dot syntax is how someone can access a function that is in a class.
void draw (){
background(48,88,155);
for (int i = 0; i < rDrop.length; i++){
rDrop[i].display();
rDrop[i].move();
}
}
59. What is the keyword new used for?
The keyword ‘new’ is used to create a new object.
60. What is a constructor? Where and when is it used? Use code to demonstrate your response.
A constructor is an instance of a class. It is the template from which an object is defined and made.
61. Organize original code to include the main program in one tab and a class in another. Use in-line comments to walkthrough code.
62. What is an array?
An array is a list of data.
63. What notation is used to denote an array?
Brackets ‘[ ]’ are used to identify an array.
64. How do data types impact arrays?
Data types say the kind of data that is inside an array.
65. What is an index?
An index is one place in the list of data within an array. The index starts at the position of zero ‘0’.
66. Write code the declares, initializes and accesses elements in an array. Use comments to
walkthrough code.
Droptop[] rDrop = new Droptop[200]; /*instead of two sepearate objects,
i can use on line of coding with an array. An array is a list. '[2]' represents the
number of spaces in the index. in coding, counting starts from the number zero to account for the index.*/
void setup() {
size (800, 600);
for (int i = 0; i < rDrop.length; i++){ //i can use rDrop.length because it will represent the length of the strong (or how many spots are listed in the array"
rDrop[i] = new Droptop();
}
}
/* this shows how to call object in setup
rDrop[0] = new Droptop(40,4);
rDrop[1] = new Droptop();*/
void draw (){
background(48,88,155);
//l initialize the array within a loop
for (int i = 0; i < rDrop.length; i++){
rDrop[i].display();
rDrop[i].move();
}
//clouds
fill(187,189,191);
noStroke();
ellipse(25,0,150,150);
ellipse(75,50,100,100);
ellipse(150,0,125,125);
ellipse(775,0,150,150);
ellipse(725,50,100,100);
ellipse(675,0,125,125);
/*order is still very crucial in the function of my code*/
}
67. List two or three functions that can be called on an array. Describe how they manipulate the array
sort(); this will order an array in a specific way.
expand(); this will increase the size of an array.
WhatAsherThinks 