Tutorial on Processing: MousePressed, random, text



Tutorial on Processing: loadImage, random, MousePressed, text, export

This tutorial describes 3 different Processing sketches, each simulating the tossing of a coin. The simplest application performs the simulated flipping once/second.

[pic]

The second sketch displays a head or tail when the player clicks on the mouse. The image is located at the mouse position. Nothing is erased, so more and more images appear in the display window.

[pic]

In the third sketch, when the player presses the mouse button on the display window, an image representing a head or a tail of a coin appears on the screen. Previous images are erased. A tally of the heads and tails is shown in the upper corner. Since the display window is erased, this tally must be displayed again on the screen. Since there is an issue of timing—I don't want to over-count heads or tails if a player's finger is down too long on the mouse button, the looping of the draw function is turned off and on.

[pic]

Developing an application in steps like this is a good way to approach any programming task. The critical parts of these applications are

• Images

• Random processing

• Mouse events

• Text

Images

Three steps are necessary to display images. Images are a datatype in Processing. A variable must be declared of type PImage. The second step is to set the variable using loadImage. Use the Sketch/Add File command to add the image files to a special folder called the data folder. [Note: it is possible to manually copy the image files to the folder containing the sketch or to make a relative reference. However, if this is done, it will be necessary to manually add the files when the sketch is exported. See below.] The loadImage function references the image file.

The final step is to display the image. This is done using the image command. It takes 5 arguments: a PImage variable, an x and a y position, and a width and a height. Here are examples of these 3 statements:

PImage coinh;

coinh = loadImage("head.jpg");

image(coinh,10,20,100,100);

Exercises:

1. Find any image and make it appear on the display screen. You can use the Basic mode of operation here (no setup function). You need to use size statement, a declaration, loadImage and Image. I did this using relative addressing to use one of the coin images:

[pic]

2. Amend the code to make two or three copies of the same image appear. Make them different sizes and at different positions.

3. Find images for the head and the tail of a coin.

Random processing

Random, or more properly termed pseudo-random processing, is necessary for many games and also for applications that simulate conditions involving random activity. Most programming languages have a way of generating numbers within a range where each number occurs with equal probability and there is not discernible pattern. Research is still active in developing good pseudo-random number generation. We will assume that the facility in Processing is good enough. The function

random(1)

returns a fraction (floating point number) between 0 and 1. My code simulates the flipping of a coin by using a conditional

if (.5 ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download