Interesting Programming Guidance for Designer--Get Your Picture Running(Part One)

Run! Run! Run!

Programming is not so difficult. The key point is to find your rhythm and do it one by one.

Before reading this chapter, I hope you have already been familiar with the basic function drawing method, or you will feel dizzy and confused by two big head functions: setup and draw.

Since we want to make motional graphics, we have to know how animation is produced.

The above picture seems quite attractive and visually reveals the implementation principle of animation.

Animation is magic. It is a magic about visual cheating. However, in this information exploded, video flooding age, we have already been accustomed to it. Few people will be surprised that it is an amazing thing to be able to see the animation.

Same principle can be applied into drawing animation with program. We have to consider how to draw different graphics in each frame, and the program will automatically turn pages while we supplement a completed animation in our head. In the following chapter, we will talk about how to realize basic graphic movement. Before that, we need to know some basic knowledge about variables.

Step 1: Variable

Variable is the container for data. It can be used repeatedly within a program.

For example:

[cceN_cpp theme="dawn"] size(500, 500); ellipse(100, 250, 50, 50); ellipse(200, 250, 50, 50); ellipse(300, 250, 50, 50); ellipse(400, 250, 50, 50);

[/cceN_cpp]

This section of code has not used any variables. It draws four circles in the screen. We can find they have same width and height. Now that it is the same, in order to minimize repeated data input, we can define a sign to represent it. This sign is variable.

Here's the code after being add a variable:

[cceN_cpp theme="dawn"] size(500, 500); int a = 50; ellipse(100, 250, a, a); ellipse(200, 250, a, a); ellipse(300, 250, a, a); ellipse(400, 250, a, a);

[/cceN_cpp]

We get a totally same result!

Since we have defined variable a, we can conveniently change parameters. If we change a=50 into a=100, then all of circles' width and height will become 100 uniformly. So we don't have to change parameters one by one. Variable is really a good invention.

Step 2: The Creation of Variable

Before using variable, we have to make statement and designate its data type.

int i;

i ＝ 50;

The first sentence of code has made a statement for a variable i. int is a symbol mainly used to declare variable. When declaring, it will spare a room in computer memory, which is equivalent to generate a "box", specially used to restore integer data. The second sentence stands for making assignment 50 to be implemented by variable i. After the implement of this sentence, data will be stored in variable i stably. Or you can be lazier to combine the above two sentence into one and complete assignment while making statement.

int i ＝ 50;

It is comparatively free to name a variable. But sometimes we have to pay attention to something.

Step 3: Naming Regulation of Variable

• It must be the combination of alphabet and underline. It can be a symbol or a word.

• Case sensitive. Name and name can stand for different variables.

• Try to name it as easy as possible to allow you understand at one sight. The initial character must be an alphabet instead of a number or a special character.

• No key words like int,float

The followings are some wrong statements.

int $a;

int 89b;

Here's the correct statements:

int r;

int super_24;

int openTheDoor;

Step 4: Variable Type

Except for declaring integer data, we can declare for decimal data(also called floating point data) with key word float.

float b = 0.5

We have to bear in mind what kind of data type we used for our statement. If we have used key word int, the latter assignment can not write i＝0.5 or something like that, or program will become error. But if we write oppositely, it is all right. For example, float i=5 is the right grammar but program will recognize it as decimal number.

Some of variables have already defined by system. We don't have to declare them by ourselves. Just like the previously referred "width,height", it will automatically acquire the width and height of the computer screen. Such high frequency in usage that the designer directly defines it to be a default variable in order to make it more convenient for us to use.

Step 5: Operator

The followings are operators of processing:

+ plus

- minus

* multiply

\ divide

％ Modulus of remainder

You must be familiar with all these operators except %. It seems quite weird because its result is remainder. 9%3 is 0. While 9%5 is 4.

Operators can be used among assignments and variables.

[cceN_cpp theme="dawn"] int a = 1; //declare integer variable a, assignment is 1. int b = 2; //Declare integer variable b, assignment is 2. int c; //Declare integer variable c. c = a + b; //Plus two assignment and assign its result to c. print(c); //Output variable c.

[/cceN_cpp]

Step 6: Operation Result:

The output result will not be displayed on the window but in the console at the bottom.

The writing method of the fourth line looks quite strange. But it is a common format frequently used during computer assignment. The left side of equal symbol should be the final assigned variable, while the right side should be operation process.

The print function in the fifth line can print out variables in console, which is often used to test the condition of data output.

Step 7: Operation Regulation

A troublesome point in Processing is we have to clarify the type of variable. We have to pay special attention to the process of floating point number and integer type.

print（6 / 5）; //result 1

Operation between integers will have a new integer. 6 divided by 5 is 1.2 . But the program output result is 1. This is contrary to our intuition. Program will not deal with round but delete the number behind the decimal point.

print (6.0 / 5.0) ; //result 1.2

Operation between floating points will result a new floating point number. If the actual result is 1.2 , the program output result will be the same.

print (6 / 5.0) ; //result 1.2

print (6.0 / 5) ; //result 1.2

Finally it is the mixture of integer and floating point number. The final output result will be 1.2.

• Actually, you have to keep in mind that the goal of this regulation design is to not loose the accuracy of data. So if one element is a floating point number, the result will be floating point number too.

Step 8: Setup Function & Draw Function

Previously we have talked a stack of grounding knowledge. Now, we finally come to play something interesting. Function setup and draw are equivalent to the main functions of processing. These two functions are very special. It can control the procedure of the program. Comparatively complicated program will include these two functions because they are the basic frame for the program. Format:

void setup(){

}

void draw(){

}

The special usage make their invoke format different to the other functions. We have to add "void" before function name, which is stand for no "returned value" . Behind the function name, we have to add parentheses and braces.

[cceN_cpp theme="dawn"] void setup(){ print(1); } void draw(){ print(2); } [/cceN_cpp]

Let's take a look of an example:

When press the operation button, the console will firstly output "1" and then constantly output "2" until you have pressed down stop button or closed the window.

Code within parentheses in setup function will be implemented for only once.While code within function draw will constantly run in circulation(default implementation 60 times/second) .

Because of this character, setup is usually used to initialized environment property, such as the width and height of the screen, background color, and all kinds of variables' assignment. While we often place drawing functions into function draw in order to generate continuously changed graphics.

Step 9: Circle in Horizontal Movement

With function draw, we can start creating our animations. The method of writing animation effect by Processing is quite “awkward”. It has no any existed command. For example, designate a certain shape to do curvilinear.

We have to define these details by ourselves. You have to tell the program what kind of graphics each frame need definitely.

Write the following code into it(Now let’s start to do it by hands):

[cceN_cpp theme="dawn"] int x; int y; void setup(){ size(300, 300); x = 0; y = height/2; } void draw(){ background(234, 113, 107); noStroke(); ellipse(x, y, 50, 50); x = x+1; }

[/cceN_cpp]

This section of code displays a motional circle. The former declared variable x,y are used to store the position of coordinate. Its assignments run in function setup. The key code is the following one within function draw:

x = x + 1

Don't view it as mathematical equation, or it will be very strange. Here, "＝" is a symbol for assignment. It represents to place the right numbers into the left variable. Suppose x is 50, once the code get running, the right side of "＝" equals to 50+1, i.e. 51. The final result will be assigned into variable x. So the value of x becomes 51.

Follow the procedure of the program, every time function draw operate for once, the value of x will increase 1. So every time when we draw, the circle will move a pixel direction horizontally to the right, compared to the former frame. Therefore, the graphic become motional .

• In order to make code obtain better readability, we have to spare a certain room before each line of code within braces. And it shall be as aligned as possible. Press TAB or several blank space, it can do retract.

• The symbol of blank space and line break in program will not influence the program. So it is ok if we type one more or less.

Here's another simpler way to express it. To make variable circle increase 1 automatically, we have to write it to be the following format.

circle ＝ circle ＋1

Quite inconvenient! If the name of variable is longer, then we have to type more words. So our lazy predecessors think out an idea like this.

circle＋＋

Isn't it very simple? It means increase 1 automatically. Similar to it, there is - - , which means decrease 1 automatically .

But if we hope the quantity of automatic increase is other number like 2, we have to try another expression.

circle += 2

This equals to

circle = circle + 2

Similarly, there is －＝ , /= , *= .

Step 10: Movement Direction

Which direction the graphic moves depends on how you change your coordinate. If it is changed to y＝y＋1, the circle will move downward. If bothx and y increase 1, the circle will move downward the right bottom. If we write it ti be a minus symbol, it will moves in the opposite direction.

[cceN_cpp theme="dawn"] int x, y; //Can declare multiple variables at the same time, use comma to separate. void setup(){ size(300, 300); x = 0; y = 0; } void draw(){ background(234, 113, 107); noStroke(); ellipse(x, y, 50, 50); x++; y++; }

[/cceN_cpp]

Movement Rate

Remember the default 60 frames per second within function draw? According to this rate, the circle above will move 60 pixels per second to the right .

If we want to change the graphic movement rate, there are two methods: one is to increase x value every time since it going to be changed.

x＝x＋10

It has improved the speed for 10 times compared to the original one!

The other method is to change the frequency of refreshing the canvas. frameRate()

This function can change the canvas' broadcasting frequency. Write frameRate (10) into function setup, it will change the original 60 frames per second into 10 frames per second. The speed is slowed for 6 times than before.

Step 11: Overlooked Background

All of the previous examples write background into function draw. Have you ever thought to write it into function setup? Will it have any differences? Now, let's update the example of horizontal movement.

[cceN_cpp theme="dawn"] int x, y; void setup(){ size(300, 300); background(234, 113, 107); x = 0; y = height/2; } void draw(){ noStroke(); ellipse(x, y, 50, 50); x += 1; } [/cceN_cpp]

What's happened? Maybe it can not understand the reason for the production of the problem properly. Delete function noStroke, add stroke again, and see the movement path of the circle.

Oh, it is because of the previously created circle has not been deleted! Because function setup operate for just once, if we write background above it, it will fill the background for only one time and latter it will have no effect any more. Function background is like paint bucket tool. Once being used, it will cover all contents in the canvas instead of setting a background color only. We write it before function draw so that the former frame will be covered every time we create a new pattern. Therefore, the circle can run as we expected. Except for remembering the usages of each function, we have to think about the position of code. A lot of time, the upward or downward a line for the codea and to write it within or out of a brace, it will create quite different effects. The direction of code is two-dimensional. If a bug appears, we have to calibrate in this two dimension.

• This not repeated drawing method can create very special effect if being properly used. You can copy the following code and have a try.

[cceN_cpp theme="dawn"] void setup(){ size(400, 400); } void draw(){ ellipse(width/2-mouseX, height/2-mouseX, mouseY, mouseY); ellipse(width/2-mouseX, height/2+mouseX, mouseY, mouseY); ellipse(width/2+mouseX, height/2-mouseX, mouseY, mouseY); ellipse(width/2+mouseX, height/2+mouseX, mouseY, mouseY); } [/cceN_cpp]

Here we have used the magic variable mouseX and mouseY . Latter we will talk about it in detail.

Step 12: Shaking Circle

What if I want to make the circle movement direction becomes irregular? With function random cleverly, you can realize this effect too. Random is a frequently used function. It can be used to generate random function. It is like a trackless spirit. Once related to variables, you can't imagine what will become next.

Invoke Format:

random(high)

High represents the random upper limit, and the default bottom limit is 0. For example, random(10). It will produce a number from 0 to 10 randomly( 0 is included but 10 is not included).

random(low,high)

If we set two parameters, then it will return to the random value between them.For example, random(5,10). It will produce a number from 5 to 10 randomly( 5 is included but 10 is not included).

Example:

[cceN_cpp theme="dawn"] float x;

x = random(50,100);

print(x); [/cceN_cpp]

Every time we run the program, the console will output different values.

• Note: Values created by function random belong to floating point type(decimal number type). If we want to assign a value to integer variable, we have to transform it through function int(). The transformation do not abide by round but delete the decimal part directly. Thus the output of int (random (5)),has only 5 possibilities: 0,1,2,3,4.

After we get familiar with the usage of function random, we can come directly into the case below.

[cceN_cpp theme="dawn"] int x, y; void setup(){ size(300, 300); x = width/2; y = height/2; } void draw(){ background(234, 113, 107); noStroke(); x += int(random(-5, 5)); y += int(random(-5, 5)); ellipse(x, y, 50, 50); }

[/cceN_cpp]

The former added coordinate values are fixed. Only if we increase a random value, the circle will move in an indefinite direction. With the bigger random range, it shakes more frequently. Since the value change between frames is bounced, the movement will not be smooth any more. While the former frame is at (150,150), the latter frame will move to the position of (170,170) within a glimpse.

Step 13: Migrating Circle

Migrating Circle

Will it create smooth movement? Function noise can help us. It has better rhythm than standard random . And the randomly generated random numbers are continuously.

Invoke Format:

noise（t）

Function noise can not define its output range. The program define it can only generate floating point numbers from 0 to 1 and fixed input can only have fixed output.

[cceN_cpp theme="dawn"] float x = noise(5); float y = noise(5); print(x, y); [/cceN_cpp]

Because the above input parameters are 5, so the output results are the same.Then how to change the result? The answer is to change the input parameters dynamically. Actually we can regard noise as a limitless voice track, the input parameters are just like "the present time". If the parameter input is continuous, the output will be continuous too.

[cceN_cpp theme="dawn"] float x, y; void setup(){ size(700, 100); x = 0; background(0); } void draw(){ x += 1; y = noise(frameCount/100.0)*100; noStroke(); ellipse(x, y, 2, 2); }

[/cceN_cpp]

In this case, we draw the change path of Y so that we can understand function noise better.

• Among it, variable frameCount will obtain the present frame. Different to the width, height in the previous, it is stable without any change. Besides, it starts increasing from 0. If we understand it by our initial display animated graphic, it shows the page we have turned to(rather to the time conception in program).

• frameCount is integer variable. Divided by another integer variable, the program will default to process the result to be an integer. In order to improve the accuracy of result, we need to change 100 to 100.0 . Divided by a floating point number, we will get a floating point number too.

• In order to change Y axle from 0 to 100, we have to multiply the result of noise by 100. Thus we can control the random value range.

Some of you good at thinking might ask "why we have to divide frameCountby 100? Isn't it ok to write frameCount directly?" Of course you can! But here, in order to better display the characteristics of function noise , we slow down "broadcasting rate". The example below shows the output value changes under different change rate.

[cceN_cpp theme="dawn"] float x, y1, y2, y3, y4, y5; void setup(){ size(700, 500); x = 0; background(0); } void draw(){ x += 1; y1 = noise(frameCount)*100; y2 = noise(frameCount/10.0)*100; y3 = noise(frameCount/100.0)*100; y4 = noise(frameCount/1000.0)*100; y5 = noise(frameCount/10000.0)*100; noStroke(); ellipse(x, y1, 2, 2); ellipse(x, y2+100, 2, 2); ellipse(x, y3+200, 2, 2); ellipse(x, y4+300, 2, 2); ellipse(x, y5+400, 2, 2); stroke(80); line(0,100,width,100); line(0,200,width,200); line(0,300,width,300); line(0,400,width,400); }

[/cceN_cpp]

You can regard the changing parameters within function noise as a progress bar. Change the parameter is like we move the progress bar. So when the changing scope of this "voice track" is bigger, the front and back continuous characteristics of output value will be weaker.(We can imagine what will happen if we broadcast a piece of music or a video with 2 times speed, 5 times speed, 20 times speed). When the scope is bigger than a certain value, then it has no big difference to function random at value generation.

If you can understand all examples above, then you will feel nothing can be more easier to draw a migrating circle. You can understand the internal principles too.

[cceN_cpp theme="dawn"] float x, y; void setup(){ size(300, 300); x = 0; } void draw(){ background(234, 113, 107); x = noise(frameCount/100.0 + 100)*300; y = noise(frameCount/100.0)*300; noStroke(); ellipse(x, y, 50, 50); }

[/cceN_cpp]

Now, the movement is more interesting just like a rotating gyro.

• The reason for why variable x within function noise have to plus 100 is because in order to separate them for a distance. If the parameters of xy within function noise are the same or quite close, the change of x,y coordinate will close to the same. This is to make the movement become much more randomly.

Step 14: Circle Moved by Mouse

Next, we finally come to two variables I like the most:mouseX and mouseY. At the first sight of the two conceptions, my eyes are glittering with light. Because it is the most direct way to interact with graphic. We can create lots of interesting program with it.

The case is quite simple:

[cceN_cpp theme="dawn"] int x, y; void setup(){ size(300, 300); x = 0; y = 0; } void draw(){ background(234, 113, 107); noStroke(); x = mouseX; y = mouseY; ellipse(x, y, 50, 50); }

[/cceN_cpp]

mouseX can acquire x coordinate of the mouse, while mouseY can obtain y coordinate .

• Let's try to change positive and negative symbol, or exchange mouseX and mouseY.

Step 15: End

From these familiar commands, you might be able to conduct the movement of graphics. With the content of the last chapter, use your imagination properly, you can create a lot of interesting animated effects.

In our next chapter, we can see more abundant examples. At the same time, we will use mathematical functions and combine it with graphic movement.

This article comes from designer Wenzy.

Step 16: Relative Readings:

Interesting Programming Guidance for Designer——Processing Initial Touch

Interesting Programming Guidance for Designer——Create Your First Processing Program

This article is from: https://www.elecfreaks.com/10893.html .

If you need help, you can contact: [e-mail] .