The display we are aiming to achieve is shown in figure 41.1
Figure 41.1 The final animation
The code for this is shown below:
// coordinates of the vertices
float[] xCoords;
float[] yCoords;
// the number of vertices
int numberOfVertices;
// the screen size
int screenXSize;
int screenYSize;
// speed (number of pixels) that the vertices move
int speed;
void setup() {
// initialise
screenXSize = 600;
screenYSize = 400;
speed = 2;
numberOfVertices = screenXSize;
xCoords = new float[numberOfVertices];
yCoords = new float[numberOfVertices];
// setup display variables
size(screenXSize, screenYSize);
background(0);
smooth();
strokeWeight(10);
stroke(255);
frameRate(60);
// initialise each vertex to be the middle of the display
for (int i = 0; i < numberOfVertices; i++) {
xCoords[i] = screenXSize / 2;
yCoords[i] = screenYSize / 2;
}
}
void draw() {
// clear the screen by resetting the background
background(0);
// begin drawing the shape
beginShape();
// for every vertex
for (int i = 0; i < numberOfVertices; i++) {
// draw the vertex at the coordinates
vertex(xCoords[i], yCoords[i]);
// draw the point at the coordinates
// point(xCoords[i], yCoords[i]);
// create a random direction for next time
float randomXDirection = random(-speed, speed);
float randomYDirection = random(-speed, speed);
// add the random direction to the existing coordinates
xCoords[i] = xCoords[i] + randomXDirection;
yCoords[i] = yCoords[i] + randomYDirection;
}
endShape();
}
Don't worry about understanding this code yet as we will walk through it. What we are attempting to produce is the image in figure 41.1 which will animate and grow in a random pattern.
We will start with using the vertex function similarly to page xx by simply creating 'dots' on the screen, as shown in figure 41.2
Figure 41.2 A single vertex
The code for this is fairly simple:
// the screen size
int screenXSize;
int screenYSize;
void setup() {
// initialise
screenXSize = 600;
screenYSize = 400;
// setup display variables
size(screenXSize, screenYSize);
background(0);
smooth();
strokeWeight(10);
stroke(255);
}
void draw() {
// begin drawing the shape
beginShape();
// draw the vertex at the coordinates
vertex(screenXSize / 2, screenYSize / 2);
endShape();
}
Here we are simply creating a window of size 600 x 400 with a black background and drawing a single white vertex in the middle of the screen (where screenXSize / 2 is the size of the x-axis divided by 2, so the middle). As seen on page xx, the smooth() function is the anti-aliasing function that gives a smoother appearance to lines and shapes. Adding this function displayes the image with smoother lines and is more appealing to look at. Try removing it and you will see that the dot has jaggedy lines, whereas adding smooth() results in a circular looking dot
As we are using the Processing continuous mode (in the above example the dot appears static because it is being drawn over the top of the previous one each time the draw() method is run), we can introduce some animation by moving the vertex each time. We can add some variables to store the current coordinates of the vertex, and a speed variable to control how much it moves each time, as shown below
// coordinates of the vertices
float xCoords;
float yCoords;
// the screen size
int screenXSize;
int screenYSize;
// speed (number of pixels) that the vertices move
int speed;
void setup() {
// initialise
screenXSize = 600;
screenYSize = 400;
speed = 2;
xCoords = screenXSize / 2;
yCoords = screenYSize / 2;
// setup display variables
size(screenXSize, screenYSize);
background(0);
smooth();
strokeWeight(10);
stroke(255);
}
void draw() {
// clear the screen by resetting the background
background(0);
// begin drawing the shape
beginShape();
// draw the vertex at the coordinates
vertex(xCoords, yCoords);
endShape();
// add the speed direction to the existing coordinates
xCoords = xCoords + speed;
yCoords = yCoords + speed;
}
If you run this you will see that the dot now moves off the screen, from the middle towards the bottom-right, because we are adding the value of the speed variable to the coordinates each time. The illusion of movement is enhanced by clearing the screen each time by setting the background each time
We can now introduce some random movement to the vertex by randomising the direction it will move by using the random() function seen on page xx to randomise the speed variable each time. To do this, all we need to do is replace the following lines in the draw() method
// add the speed direction to the existing coordinates
xCoords = xCoords + speed;
yCoords = yCoords + speed;
with the lines
// create a random direction for next time
float randomXDirection = random(-speed, speed);
float randomYDirection = random(-speed, speed);
// add the random direction to the existing coordinates
xCoords = xCoords + randomXDirection;
yCoords = yCoords + randomYDirection;
This piece of code creates a random number between the values -speed and speed (currently set to 2) and uses the random value to set the coordinate values for the next time the vertex is drawn. This makes the draw method look like the below
void draw() {
// clear the screen by resetting the background
background(0);
// begin drawing the shape
beginShape();
// draw the vertex at the coordinates
vertex(xCoords, yCoords);
endShape();
// create a random direction for next time
float randomXDirection = random(-speed, speed);
float randomYDirection = random(-speed, speed);
// add the random direction to the existing coordinates
xCoords = xCoords + randomXDirection;
yCoords = yCoords + randomYDirection;
}
If you run this, you will see that the the dot now moves around its starting point in a random fashion. This is due to the random value added to the coordinates that means the dot moves slightly each time it is drawn.
No comments:
Post a Comment