Introduction: Engrossing Programming Guidance for Designer--Get Your Picture Running(Part Two)

Math, for most of you, seems useless. The most commonly used in our daily life is just add, take off, multiply and carve up. However, it is quite different if you can create with program. The more you bang, the much marvellous resolution you will get.

Step 1: Campaign & Officiate

Let me show you various unknown pictures to stimulate your taste.

1 2

What's this? Now just keep this question front and latter you leave know and use information technology.

In the last chapter, we have knowing function setup and function hooking, which can make the static nontextual matter become active. Withal, this movement format is just to a fault simple. We are going to use function knowledge we mastered earlier to run our graphics with their possess quality.

1

2How many functions can you greet from the above pictures? What's rather kinship they take in with movement? Now permit's pick prepared a quadratic function from information technology, add some parameters randomly and see what will hap. For instance, y = x² / 100.

3This is what the function persona looks like. Copy the cipher below.

[cceN_cpp theme="dawn"] float x, y; void setup(){ size(300, 300); background(0); x = 0; } void get out(){ stroke(255); strokeWeight(2); y = pow(x, 2) / 100.0; //Function pow bequeath return to the nth office of appellative number. (x,2) represents the square of x. The first parameter is the base number and the second one is the power. point(x, y); x++; } [/cceN_cpp]

Running Effect

3

Following, choose function sin. Rul: y = 150 + sin(x).

4Imitate the following code.

[cceN_cpp theme="dawn"] float x,y; emptiness frame-up(){ size(300, 300); background(0); x = 0; } void draw(){ y = height/2 + hell(radians(x)) * 150; //Function radian transubstantiate x into tilt. x++; stroke(255); strokeWeight(2); signal(x, y); } [/cceN_cpp]

Linear Effect

4This is the in writing we father after operating the code. And that are their movement tracks. Compared to the former one, the resultant is self-evident. Function epitome is in reality comparable to the movement track! It is quite simple enough. You rightful have to replace the value of x,y into coordinate. The former track we drew is same to the graphic of function y = x² / 100. Spell the latter running equals to the graphic of function y = 150 + sin(x) . Only in program, the steering of y axle is opposite. And then, compared to the original graphical, the cut will equal upside down. At once, I guess you must have a feeling that or s difficult questions haunted in your head for a endless meter are solved immediately. It is amazing that these fantastic functions we learned before fundament be used to control graphic movement!

Step 2: To Pen Function

I have listed several oftentimes in use functions below. Hope these ass help the States to translate functions into code that can equal acknowledged by computer.

5

Consequently, formula beneath in program shall constitute written look-alike this:

y = x² → y = POW(x, 2) or y = sq(x)

y = x³ → y = pow(x, 3)

y = xⁿ → y = POW(x, n)

y = 4ⁿ → y = pow(4, n)

y ＝logₑ² → y = log(2)

y = e² → y = exp(2)

y = √5 → y = sqrt(5)

You can likewise randomly write out a function into program and see what its movement track will aspect equal. Remember to consider the range of value playing field and definition domain, or your graphic bequeath run out of your screen.

T rigonometric F unction

Now, let's depart further to know some writings of trigonometric functions.

6

7We have to pay attention that in computer programme the input of the function parameter relative to angle adopts radian. Thus sin90° shall cost graphical into blunder(PI／2). If you are not familiar with this method, you can manipulation function randians to transform angle into radian beforehand, and then write sin（radians(90)).

The usage of function degrees is comparatively opposite. It stool transform radian into angle. Input photographic print(degrees(PI/2)) right away into the edit area , and see what you will get.

Step 3: Control Graphic Trend With Pure mathematics Function

Here's a case for you to see the actual effect of graphic movement.

[cceN_cpp theme="dawn"] be adrift x, y; nothingness setup(){ size(700, 300); } vacancy draw(){ background(234, 113, 107); y = sin(radians(x)) * 150 + 150; x++; noStroke(); ellipse(x, y, 50, 50); } [/cceN_cpp]

5Officiate trespass is a periodic function. Its minimum treasure is －1, and maximum value is 1. The superlative of test is 300. Referred to y = sin(radians(x)) * 150 + 150 , therefore the interchange range of the value y will beryllium well controlled within 0 to 300.

Spinning Circle

Well, we have finally come into the near import part therein chapter. How to draw a lap path in a program? How to use functions to display information technology? Let me show you the two pictures we saw at the beginning of this article again.

1 2

Actually they have visually exposed the relationship between circumference coordinate and pure mathematics function. Movement in the above pictures are driven by the constantly increasing experimental variable θ . Left-hand is the image of function sin and cos, and the right stands for a dot doing bulblike movement after being mapped. Isn't IT very overbold? It is not mysterious any more. You can use encipher to earn it.

A simple object lesson:

[cceN_cpp theme="dawn"] float x, y, r, R, angle; void setup(){ size(300, 300); r = 20; //Circle diameter R = 100; //R of movement path x = 0; angle = 0; y = height/2; } void draw(){ background(234, 113, 107); understand(width/2, stature/2); //Move the original point to the screen rivet. noStroke(); x = R * cos(fish); y = R * sin(angle); ellipse(x, y, r, r); tip over += 0.05; } [/cceN_cpp]

6

Look! A spinning circle appears! Here, the free-living variable is nary more in constant quantity increase piece get along weight(equals to θ in the picture). It is signify angle. Among it, XY have relatively increased coefficient R, which leads to the extension of the lap movement wheel spoke (R is for radius). If IT is not to multiply R, its movement path will comprise limited within the range from -1 to 1.

8Why not use the accretionary x? According to the property of function itself, whatever x within definition domain has the only y to match information technology. So in plane rectangular dimension coordinate system, you tail end not find out a "simple function" to draw circle directly. That is to say we commode non use this format any more.

y = (The unknown expression of x?) ;

x＋＋ ;

So we have to alter our idea. Choose another angle as independent variable, and so use function wickedness and cos to transform it into horizontal and stand-up co-ordinate.

x = R * cos(angle);

y = R * sin(angle);

angle += 0.05;

Whatever of you might wonder wherefore IT give the axe display the route of circle movement. According to the definition of circular function, we can easily reason out that function boob the ratio of the opposite side to the hypotenuse; function cosine is the ratio of neighboring to hypotenuse. No matter where the circle point is, r (radius) will remain unedited. Hence we commode conclude the expression of x coordinate and y coordinate.

9Because of this is not a mathematical guidance, here I am going to stop displaying more than cognition about pure mathematics function to you. If you want to know it or you just draw a blank information technology, you can try to brushup IT again y yourselves.

Of course, it is all opportune if you can not fully understand it. You but have to know how to use it to draw a circle. This is a rather "programming thought" too. Later on, we will often invoke some of the existed modules made by others to earn a certain kind of function. Scarce don't push yourself to know it in item.

However, function sin and cos is common. If you want to make higher level creation, you'd ameliorate try to know IT thoroughly. If this question itself can drive ourselves to learn much mathematical cognition, there are more interesting things ready and waiting for you to dig away.

7 8

These are pictures closely relative to trigonometric function.

Stride 4: Social movement Frame of reference

The previous personal effects are wholly about graphic coordinate changes. The coordinate system itself is static. Actually we can make the coordinate move to realize motional set up. This is just like the hoi polloi on the beach watches the other people in the sauceboat. For people happening the gravy holder, the boat is static. Only what if the boat itself is moving, then hoi polloi in the boat moves with it. The former cases are altogether about "people running on the boat". Actually, the boat doesn't motivate. The followers is some common functions for changing frame of reference.

10

Social function translate

Function translate, we have talked about antecedently, is wont to move reference frame of the graphic horizontally.

Invoke format:

translate(a, b)

The prototypical parameter stands for move to the positive direction of x axle for a pixels. The second parameter stands for move to the positive direction of y axle for b pixels.

Compare the two code and try to find any difference. (Systematic to simplify computer code,we can delete function size, the screen width and superlative are defaulted to be 100. )

Before we use:

ellipse(0, 0, 20, 20);

11

Later on we use:

transform(50, 50);

ellipse(0, 0, 20, 20);

12

Function circumvolve

Invoke format:

rotate(a)

It is wont to rotating coordinate system. When parameter is positive, it volition choose the original point as center point and splay in clockwise direction. The parameter input is unvaried with circular function to enjoyment radian.

Before use:

ellipse(50, 50, 20, 20);

13

After use:

turn out(radians(30));

ellipse(50, 50, 20, 20);

14Effect in program is to make the circle rotate around the coordinate center point in clockwise direction for 30 degrees.

15

Go plate

Invoke arrange:

scale(a)

This function can zoom out frame of reference. The value is for grading. When parameter is beyond 1, and then zoom in; if it is glower than 1, then zoom out.

Before exercise:

ellipse(0, 0, 20, 20);

16

After use:

scale(4);

ellipse(0, 0, 20, 20);

17The circle in the above picture is amplified to the tetrad times of the original size. Also, you can use two parameters to zoom verboten in x axle and y axle directions singly.

scale(4,2);

ellipse(0, 0, 20, 20);

18

S uperposition of T ransformation F unction

Present, superposition is all about changes relation to the face frame of reference. Put differently, effects can represent overlying.

translate(40, 10);

read(10, 40);

ellipse(0, 0, 20, 20);

Its final effect will up to

translate(50, 50);

ellipse(0, 0, 20, 20);

19

Same to function rotate

turn out(radians(10));

rotate(radians(20));

ellipse(50, 50, 20, 20);

Equals to

rotate(radians(30));

oval(50, 50, 20, 20);

20

Both function surmount and rotate rivet connected the original point to exfoliation and revolve around. If we want to get the rotate effect with a focal position at (50,50) , we have to think in the opposite way. First of all move the primary point to the position of (50,50), and then add up the rotating transformation function. Finally make water your graphic made-up along the creative point.

Before exercise:

ellipse(50, 50, 50, 20);

After use:

translate(50, 50);

revolve(radians(45));

ellipse(0, 0, 50, 20); //In order to see the rotate angle convert, we have made an ovoid.

21

It mightiness appear twisting. You just have to practice more then you will understand information technology. (You force out also try to modify the sequence of function read and rotate to go steady the departure.)

Horizontal Movement and Circular Movement

In the favourable cases, we are going to substantiate motional effect through dynamical coordinate system. At the same time, I would like to expect you refer to the former chapter example. Most of the time, you will discover in order to agnise a certain kind of effect, you can use a totally contrary method.

Whole step 5: Naiant Crusade

[cceN_cpp theme="sunrise"]

int x,y; vitiate setup(){ sizing(300, 300); x = 0; y = pinnacle/2; } void draw(){ background(234, 113, 107); noStroke(); translate(x,y); oval(0,0, 50, 50); x++; } [/cceN_cpp]

9

The R-2 coordinate is not changed but its coordinate scheme is changed.

Rotate Motility

[cceN_cpp theme="dawn"] float r, R, angle; evacuate setup(){ size(300, 300); r = 20; //Circle dimension R = 100; //Radius of drive track } void haul(){ background(234, 113, 107); understand(breadth/2, height/2); //Move the originative point to screen center. turn out(weight); noStroke(); oval(0 ,R ,r ,r); angle += 0.05; } [/cceN_cpp]

10

Isn't it Former Armed Forces more clear and simplex than trigonometric social function? You might induce a question here. Take rotating code as an example. Obviously, the above referred transform function is relative and allows superimposition.If we write render(width/2,height/2) into function draw, doesn't information technology mean all metre social function attraction operate for once, the coordinate system will move a distance in the right seat direction from the original stem? Reasonably it will non last out in the center of the screen forever.

You can understand in this way. One time the code in function suck in has consummated an operation from adequate to the bottom, the coordinate system will return to first status at the second operation. The original point of align system will be defaulted to return back to the left top corner. So if we want to throw the coordinate system change continuously, the angle parameters within go rotate shall constantly increment its value.

Access Coordinate Status

Sometimes, we assume't want the shift of ordinate system status is supported on the former one and only. At this clock time, we have to exercise function pushMatrix and popMatrix . The two functions usually appears in copulate. Function pushMatrix is before popMatrix . They can not be used solely, or it will go amiss.

Example:

[cceN_cpp stem="dawn"] pushMatrix(); //Store coordinate system status translate(50, 50); ellipse(0, 0, 20, 20); popMatrix(); //Read coordinate system status rect(0, 0, 20, 20); [/cceN_cpp]

22

In this example, before using translate(50,50) , we use social occasion pushMatrix.to stack away the up-to-the-minute status of align arrangement. This, concurrently, is the initial status. Subsequently we drawing card a circle, then implement popMatrix, it will come spine to this status. At this sentence, implement office rect , you bequeath retrieve it has not suffered the influence from function translate rather information technology draw a square on the left top corner of the avant-garde point.

Besides, function pushMatrix and popMatrix allow nesting.

For case

pushMatrix();

…

pushMatrix();

…

popMatrix();

…

popMatrix();

…

In rank to show its kinship intuitively, we choose condense formatting.

Combined Movement or Movement in Movement?

Now the second fla of important part starts. Retributory try to push forward. Previously, we have used a metaphor of boat and people. Have you ever toy with what if we make some the people and the boat move, what kind of feeling the people on the beach will have?

Like combine horizontal movement with rotating movement of coordinate organization. The point here is actually to move in a commission only.

[cceN_cpp theme="dayspring"] int x, y; float angle; void frame-up(){ size(300, 300); background(234, 113, 107); noStroke(); x = 0; //When the first value of x is 0, we can neglect this condemnation of code.When declaring variable, the default on value is 0. y = 0; //Same to the supra. lean on = 0; //Same to the above. } void draw(){ angle += 0.25; y--; read(width/2, height/2); pushMatrix(); rotate(slant); oval(x, y, 5, 5); popMatrix(); } [/cceN_cpp]

11

And there are circular movement and coordinate system scaling.

[cceN_cpp theme="get across"] float x, y, angle; void setup(){ size up(300, 300); background(234, 113, 107); noStroke(); } void draw(){ Angle += 0.01; x = sin(weight) * 100; y = cos(lean on) * 100; understand(width / 2, height / 2); pushMatrix(); scale(1 + 0.1 * sin(angle*10)); oval(x, y, 5, 5); popMatrix(); } [/cceN_cpp]

12

Don't cost cheated by it! The circle indicate is in reality doing circular social movement. It is not difficult to understand if we compare it to scaling with a video tv camera. A picture camera perpetually move front or back is shooting a point in circular movement.

Surprised? These are simple basic functions. But with variant combination, we can make up so many different effects. Till like a sho, my exposure stops so every bit to spare some room for your exploration.

Step 6: Comprehensive Usage

It is coming to an end soon for this chapter. The last two chapter, I have introduced the basic method acting of graphic movement. I believe you might have a deeper understanding for it, compared to your initial ideas. Last in the to the lowest degree, here's some completed example for your consultation.

[cceN_cpp theme="dawn"] float x1, y1, x2, y2, r, R; float angle1, angle2; void setup(){ size(300, 300); r = 12; R = 120; angle1 = 0; angle2 = Protease inhibitor/4; } void draw(){ background(234, 113, 107); noStroke(); translate(breadth / 2, height / 2); angle1 += 0.02; angle2 += 0.06; x1 = R *sinfulness(angle1); y1 = R* cos(angle1); x2 = R/2 *sin(angle2); y2 = R/2 *romaine lettuce(angle2); oval(x1, y1, r/2, r/2); ellipse(x2, y2, r, r); oval(-x1, -y1, r/2, r/2); ellipse(-x2, -y2, r, r); ellipse(x1, -y1, r/2, r/2); ellipse(x2, -y2, r, r); oval(-x1, y1, r/2, r/2); ellipse(-x2, y2, r, r); stroke(255); strokeWeight(3); line(x1, y1, x2, y2); line(-x1, -y1, -x2, -y2); line(x1, -y1, x2, -y2); line(-x1, y1, -x2, y2); } [/cceN_cpp]

13

This example do not contain any knowledge beyond our previous chapter introduced.

For which points matches ? Which lines matches? I can not figure out it besides. But I remember it derives from a small section of code.

14

This is the nature of its social movement. The rest lines are just mirror effect. If you die on followers this counseling, you can make an updated version and bring a restrainer to your graphic so as to change your graphic movement status instantly.

15

The interesting point of programming lies in that you can design or combine regulations . However, what the final computer programme will be is all depends on your ability. Usually designers have powerful graphic imagination. You tail sketch a picture in your head, so taste to translate it into code. Also, you can go from the write in code and regulations itself, design functions and variables at will. Cause call back Processing is your sketch and cipher is your brushes! Just spray your ideas freely!

Step 7: END

Last in our chapter, let's turn noncurrent to a wonder we candied for a extendable time since the beginning. What is the usage of spending such sweat to make a picture with program? After you learned this chapter, you will find there are so very much playing methods ready and waiting for your to explore.

[cceN_cpp theme="dawn"] swim browX, earD, eyeD, faceD; void frame-up(){ size(500, 500); } avoid draw(){ background(200, 0, 0); browX = 150 + sin(frameCount / 30.0) *20; earD = 180 + hell(frameCount / 10.0) *20; eyeD = 60 + sin(frameCount/30.0) *50; faceD = 300; strokeWeight(8); ellipse(175, 220, earD, earD); oval(width - 175, 220, earD, earD); rect(100, 100, two-faced, pale-faced); line(browX, 160, 220, 240); argumentation(width-browX, 160, width-220, 240); filling(stochastic(255),random(255),random(255)); oval(175, 220, eyeD, popeyed); ellipse(width-175, 220, eyeD, eyeD); fill(255); point(width/2, height/2); triangle(170 - cos(frameCount / 10.0)* 20, 300 - blunder(frameCount / 10.0) *20, breadth - (170 + cos(frameCount / 10.0) *20), 300 + sin(frameCount / 10.0) * 20, 250, 350); } [/cceN_cpp]

16

ISN't it magic for dynamic vivid? Here I do not show you overmuch cases. You might be able to design a far improved effect than me. The advantage of drawing with program exists you can play with every pixel. Since your graphic is non bitmap, every cardinal point happening your graphic is controllable. It can buoy realize some effects that other software can not actualise.

If you have a gist that desire to discontinue everything and corporate trust it again, study course of study will greatly help you to fulfil this idea.

17

This article comes from designer Wenzy.

Step 8: Relative Readings:

Represent the First to Share

Recommendations