- Posts:
- 554
- Group:
- Admins
- Member
- #1
- Joined:
- Aug 13, 2012
- Which Faction?
- Rogue
- Longest Post in Sentences (please don't lie)
- 1002
|
What is Processing? The dictionary definition is good for the verb, but I'm talking about the PROPER NOUN. So, yeah. After this guide, there'll be a HUGE break inbetween my guides, unless by chance I come across a new language. By 'huge', I mean I won't do another until AT EARLIEST December. Okay, on to the essentials. To get started, you MUST have downloaded the application from: http://processing.org/ Now, you don't actually have to do my Python guide before this, but I highly recommend you at least know Javascript and HTML5 Canvas (from my first guide). As you may have noticed in my Python guide, I am no longer spoonfeeding you. After learning one or two languages, another should be easy.
Part 11: The Artist to Python's Author Difficulty: Multiple Code Illiteracy Syndrome Cure
Spoiler: click to toggle LESSON 56: An Introduction to ProcessingSpoiler: click to toggle What is Processing? It is a hands-on code mainly used for drawing. Let's start with making a simple circle. - Code:
-
ellipse(50, 50, 80, 80);
Type that in to the Processing editor that came when you downloaded processing. Now, if you know HTML5 Canvas, you should be able to pick this apart easily. I will tell you what it does, though, as not knowing this is not knowing your periodic table and then trying to make oxygen a positively charged ion. - Code:
-
ellipse
This defines that we are making a circle. - Code:
-
(50, 50
This is WHERE the circle is. X axis of 50, Y axis of 50. - Code:
-
, 80, 80);
This is how big the circle (henceforth referred to as ellipse) is. So, by saying 80, 80, we are making the ellipse a perfect circle. It is 80 wide, 80 tall. Changing that makes it an oval. Now, let's draw a line. - Code:
-
line(15, 25, 70, 90);
'line' declares the line. The first two coordinates are the starting point, and the last two are the ending point. Only knowing this much, you can already MAKE A HUMAN! Whoooooooo! See, Processing is easy to learn. Now, on to the next lesson. LESSON 57: A Crash-Course To Prepare You For Game-Making:Spoiler: click to toggle In this lesson, I will briefly explain the first step to game-making. So, when we made the line and the ellipse, the screen size was determined by the shape we made. Now, we shall set custom screen sizes. - Code:
-
size(400, 400);
That declares that the size of the screen is 400 by 400. Easy, right? - Code:
-
size(200, 200); background(0, 0, 0); stroke(255, 255, 255); line(0, 0, 200, 200);
In this, I've introduced two new elements. 'stroke' and 'background'. To explain those, I also have to explain colors. Remember in CSS when you could do a color using RGB values? This is the same. 255 is the max. So - Code:
-
stroke(255 *red amount*, 255 *green amount*, 255 *blue amount*);
255 is the maximum, and 0 is the minimum. Now, in school, you may have been taught that layering colors on top of each other creates the color black. So '255, 255, 255' would make black, right? WRONG. There's a whole scientific explanation for that, but I'm going to gibe you the 'dumbed down' version. If you shine a red, green, and blue laserpointer at each other, the point where they intersect is 'white light'. In essence, light on top of light on top of light creates white (it rhymes!). I'm a science geek, so I'm really tempted to give you a full explanation on this, but I won't. So, basically 255, 255, 255 is WHITE. 0,0,0 is BLACK. Now, I'm going to 'translate' the code. - Code:
-
[code]size(x axis is 200 pixels big, and the y axis is 200 pixels big); background(make background black); stroke(make stroke white); line(draw from 0, 0, to 200, 200);
[/code] By putting stroke there, it is saying that the line drawn below it will be 'stroked' in that style. 'Background' is self explanatory. - Code:
-
void setup() { size(400, 400); stroke(255); background(192, 64, 0); }
void draw() { line(150, 25, mouseX, mouseY); }
Two new things, 'void' stuff, and mouseX/Y. I'll start with void. That's basically a function. I'll get into that later, but you should know JS if you read my first guide. This code should be readable for an experienced programmer. Words taken from the processing website that aptly describe what setup() and draw() do: Spoiler: click to toggle The setup() block runs once, and the draw() block runs repeatedly. As such, setup() can be used for any initialization; in this case, setting the screen size, making the background orange, and setting the stroke color to white. The draw() block is used to handle animation. The size() function must always be the first line inside setup(). Now, for 'mouseX/Y': That is... *drumroll* THE COORDINATES OF THE MOUSE! With this, you can DRAW! Congrats! Now, what if you want something to happen when you press a mouse? Most programs will use the setup() and draw() blocks. More advanced mouse handling can also be introduced; for instance, the mousePressed() function will be called whenever the mouse is pressed. In the following example, when the mouse is pressed, the screen is cleared via the background() function: - Code:
-
void setup() { size(400, 400); stroke(255); } void draw() { line(150, 25, mouseX, mouseY); } void mousePressed() { background(192, 64, 0); }
mousePressed() activates when you press the mouse. Run it to see what this code does! - Code:
-
ellipse(width/2, height/2, 50, 50);
Before we go on, I just want to clarify something. When you want something in the middle of the screen, look at the code above ^. Width/2 (width divided by two) will put it in the middle width, and height/2 will put it in the middle height. You can also do eight/4 and stuff. And now, on the the next lesson! LESSON 58: DrawingSpoiler: click to toggle In this lesson, we will slow down and go over drawing different shapes, and things you can do with them. The point is the easiest. - Code:
-
point(x,y)
Replace x and y with the coordinates, and you have a point! We've already gone over lines, so I'll skip them. We're now on to 2D objects, as apposed to a 1D line and a 0D (what? '0' D?) point. A rectangle is made as so: - Code:
-
rect(x,y,width,height)
Now, the starting coordinates you put in don't place the center of the rectangle, but the topleft CORNER. To make it draw from the center, do; - Code:
-
rectMode(CENTER) rect(x,y,width,height)
CAPS ARE IMPORTANT Also, if you want to change it up a bit, you can define where the topleft and bottomright corners are, instead of the center or just one of them. - Code:
-
rectMode(CORNERS) rect(topX,topY,botX,botY)
topX and topY are defining the topleft corner, and the others are defining the bottomright. Of course, you could make the topleft corner the bottomleft by making it below the bottomright. Now, ellipses are made from the center. If for some reason, you want it to be the corner of the ellipse, do; - Code:
-
ellipseMode(CORNER) ellipse(x,y,width,height)
How do you have a CORNER of an ellipse, though? I could explain it, but I'll use this diagram: Spoiler: click to toggle Also, you can make it from both corners. - Code:
-
ellipseMode(CORNERS) ellipse(topX,topY,botX,botY)
LESSON 59: ColorsSpoiler: click to toggle Spoiler: click to toggle That is the 'color wheel'. Today, we will learn how to exploit it. First up is greyscale colors. That is when you do something like this: - Code:
-
background(255)
as opposed to - Code:
-
background(7,84,219)
Greyscale colors range from black to white, 0 being black, 255 being white, and anything inbetween being a shade of grey. The higher the number, the whiter it is, the lower, the blacker. The other way is the classical way. You've seen me use it before, in CSS. Remember, RGB values? Since you should know those, i'm not going to explain them. Now, how do we add color to objects? - Code:
-
stroke(255,255,3) line(0,0,100,100)
When the computer makes the 'stroke' for a line (or anything), it means the border of it. So, the 'stroke' is getting that color. There is also 'fill', which is the inside of the object. If you don't want it filled, do 'noFill()', and if you don't want the stroke, do 'noStroke()'. This diagram describes the 'chain of command' aptly (the diagram is using greyscale): Spoiler: click to toggle So, if you do; - Code:
-
stroke(255,255,3); line(0,0,100,100); stroke(0,5,3); line(0,0,333,111);
line 1 will be (255,255,3) and line two will be (0,5,3). You don't have to worry about accidentally making all lines the same color. In addition to the red, green, and blue components of each color, there is an additional optional fourth component, referred to as the color's "alpha." Alpha means transparency and is particularly useful when you want to draw elements that appear partially see-through on top of one another. The alpha values for an image are sometimes referred to collectively as the "alpha channel" of an image. It is important to realize that pixels are not literally transparent, this is simply a convenient illusion that is accomplished by blending colors. Behind the scenes, Processing takes the color numbers and adds a percentage of one to a percentage of another, creating the optical perception of blending. (If you are interested in programming "rose-colored" glasses, this is where you would begin.) Alpha values also range from 0 to 255, with 0 being completely transparent (i.e., 0% opaque) and 255 completely opaque (i.e., 100% opaque). Example: - Code:
-
fill(255,0,0,127);
The fourth number is the alpha value. LESSON 60: ObjectsSpoiler: click to toggle Processing is an object-oriented programming language. An 'object' is, well, an object. Object-oriented languages simply use everything as an object. Kinda simple. - Code:
-
color c = color(0); float x = 0; float y = 100; float speed = 1;
void setup() { size(200,200); }
void draw() { background(255); move(); display(); }
void move() { x = x + speed; if (x > width) { x = 0; } }
void display() { fill(c); rect(x,y,30,10); }
Use your Python knowledge to read that code. You should be able to understand it. Simple, right? - Code:
-
// Step 1. Declare an object. Car myCar;
void setup() { // Step 2. Initialize object. myCar = new Car(); }
void draw() { background(255); // Step 3. Call methods on the object. myCar.drive(); myCar.display(); }
Let's take a look at that. Read it using your Python-powered brain. '.drive()' and '.display()' have not been made yet, but you see what it does, right? When the car is 'drawn', the functions 'drive' and 'display' are done. - Code:
-
color c = color(0); float x = 0; float y = 100; float speed = 1;
void setup() { size(200,200); }
void draw() { background(255); move(); display(); }
void move() { if (mouseX > x) x = x + speed; else x = x - speed; if (x > width) { x = 0; } }
void display() { fill(c); rect(x,y,30,10); }
I've changed the code a bit now, by adding if and else statements. Run the code, and you'll see that you control a 'paddle'. This is the first step to making a brick-breaker. Note that I am not teaching you about if else statements. Examine the code, and it should be pretty obvious how to use them.
Difficulty: Junior-Master
Spoiler: click to toggle LESSON 61: Two-Dimensional ArraysSpoiler: click to toggle TBA
What's next? After I complete this guide, I'm doing Java! Then, I plan to do C++, and, finally, C. I might do Assembly.
Edited by Mewthree, Nov 4 2012, 05:56 PM.
|