Visualizing Movie Data | VMD_06 | Films by flags

The idea is very simple. From which countries did we see films during 2015? Represent the number of movies with the flags of those countries.

The size in which I work is 1000 x 1000 pixels. There are exactly 50 countries who have made films. And the largest score of 69 films is achieved by the USA. Looking at the display size, in width, I have 1000 : 50 = 20 pixels available. In the height I have 1000 : 69 = 14 pixels available. One flag has a size of 20 x 14 pixels. That is very small. I have made a Processing test-file. The first column is made up of svg-files which are reduced in Processing. Processing or Adobe Illustrator are doing crazy things with this flag-file. The stars of the American flag are randomly placed outside the boundaries of the flag. But because the flag is reduced you cannot see the stars, and the errors, anymore. The second column is a png-file which blurs the stars and lines rather randomly together. The third column is a bmp-file. Manually corrected in Adobe Photoshop. The fourth column is the same bmp-file but now it has a black line between each separate flag. I choose the latter. Although it’s a lot of manual editing work.

The next step I’m going to make is to find the positions of the flags. There, too, I’m going to use the American flag. It’s just a placeholder. I need to make a minor adjustment to the image file. When the flags are 20 pixels in width I must sacrifice one pixel in width for a black line. Otherwise, the flags will visually not be separated from each other. And if you look at this example, you will see that it’s not a good visualization. We are dealing with very big differences in the rather small data set. The minimum score is 1 and the largest score is 69. In addition, the flags are not looking good. And I have no space to add extra information such as headers, country names or scores.

I have to solve this differently. Let’s start all over again. I have 50 films. That are two rows of 25 flags. Or two columns of 25 flags. Or 10 rows of five columns with flags. That seems most appropriate. Flags are usually wider than tall. And that would eventually produce a square. I pick a random image of a flag. In this case its the United Kingdom’s flag. Five flags in width and ten in height.

I also need margins on all four sides of the display window. I take 100 pixels margin. This produces flag sizes of 160 x 80 pixels. And that results in an exact square of 800 x 800 pixels.

How can you visualize the number of films that we saw in 2015 using these flags? One possibility is Processing’s tint function. But because this tint function does not work the way I want it to work, I go for a black rectangle with a little transparency. All flags are 160 pixels wide. A 100% score is 69 films seen (the American ones). The width of a flag 160 divided by the score 69 = 2.3. Thus the multiplication factor is 2.3. for all the scores. Bringing this into practice that is visually extremely disappointing. Although it represents the exact data.

The disadvantage of this representation is that the differences are too far apart from each-other. I would like to keep these differences but the relationship needs to be adjusted. I think I need to use Processing’s map function. It re-maps a number from one range to another which provides a more interesting image.

I have the map function applied excessively. Otherwise, the countries from which we have seen only one film stay almost invisible. Furthermore, I found little refinement in the image. I solved that with a small transparent black gradient. Finally, I have rotated the total image 90 degrees. This gives a better picture because it seems that the light comes from above. Which is much more natural. And why not? Flags on their side remain equally recognizable.


Generative Design Variations M.1.5 Noisy motion

I start with a copy of the Generative Design book’s introduction: ‘As you can see, the possibilities of the noise () function’s character are diverse. Until now, the generated values were always applied directly to a visual parameter (curve point, pixel color, or height position of the grid points). In the following examples the noise function is used to control dynamic parameters. The generated values now define the direction of movement of a swarm of agents. This example uses the same principle employed in the previous programs. The only difference is that noise () is applied to the rotation of grid elements. In the following programs, the arrows are no longer drawn but are used to control the movement of the elements.’ Until this point the book’s introduction. Here are the four programs I worked with:

As usual I have created a Flickr Album with most of the images I made during this assignment. Alas there was only a little JavaScript involved because the controlp5 Processing library is not supported by JavaScript. Instead you get the Processing code when you click on the previews of this loftmatic page. The first ten previews (from the top) will work with JavaScript but very slow.

I started with making the background black. That leaves you with an image without an arrow because that is already black. Made it white in Adobe Illustrator. I lowered the TileSize from 40 to 20. That means you can see the noise pattern better. But the arrow symbol is getting less recognizable. I also changed the strokeweight of the arc from 1 to 16. And made the color red with a transparency of 128. I think that arrow is of no use anymore as it is now. So I commented those program lines out. But they might come in later. Slow JavaScript ahead 🙂

Commented out the nofill in the arc section. I noticed that the arc was not fully closed at a certain point. So I increased the radians of the local angle variable to 450. Tweaked the colors somewhat to green and blue. Changed the background to red. The program runs in JavaScript but the behaviour is very slow.

Introduced some numbers. But because noiseValue produces a float I had to use round to make the number a bit more comprehensible for me. I only need to do something about the calculation. That doesn’t make sense yet. I think that noiseValue is ok but it delivers some non-data. So maybe I can use map to fill a  full circle which is 100% noise value.

Replaced the arrow by a white line. Why is there a stroke and strokeweight command in the Arrow section? I don’t think that has any effect. Maybe I added that in an earlier version. Checked the original program. No. It was already in it before I began working on it. Anyway I commented it out. This program also runs slow in JavaScript.

I doubled the length of the white line. And I think it might be doubled again. Or maybe I can use disableStyle and change the properties of the lines. That worked. Changed the color of the lines until it has a tilesize of 10 pixels. That image has hairy qualities at a certain setting.

Replaced the rectangle with a cross. The pattern is getting more chaotic by hitting the arrow-up-key on your keyboard. The arrow-down-key has the opposite effect.

When you increase the size of one of the two rectangles which make the cross you get totally different end results. But again the pattern is getting more chaotic by hitting the arrow-up-key on your keyboard. The arrow-down-key still has the opposite effect.

Increasing both rectangles (wich make the cross) give almost cloth-like images. Arrow-up and down-keys still have the same functionality.

Putting the cross on its side (in Adobe Illustrator) did not make much of a difference. So I used a rectangle with rounded corners.

Replaced the rectangle with a star-like image. Which makes very subtile nuances in the pattern.

Agents in two-dimensional space
‘In order to animate a swarm of agents in this way, all the agents are moved in the direction defined by the noise () function to assume their positions. The only remaining consideration is what to do with the agents that migrate out of the display window.’

From here on all upcoming programs work with the controlp5 library. Controlp5 is a GUI library written by Andreas Schlegel for the programming environment Processing. Now I did not work much with classes and libraries before. So this could be getting interesting. As usual I start with changing the names of the global variables. And added wordspaces to the program for better readability. And as a result nothing was working. I got a stream of particles on the screen but they did not react on the controlp5 sliders. I found out that the global variable names were the problem. So I replaced those into the program settings of the controlp5 library. Another thing was that saveframe did not work properly. It gave me a kind of grayish screendump. This was because it creates a png-file with transparency. So I changed that to .jpg. And yet another thing is the menu button. When you make a screendump it is captured too. That is not what you (and I) want. So I display the menu button outside the display window. I’ve got a shortcut by pressing the ‘m’ key anyway. I studied the controlp5 library for a while. And I changed the line function into a point. That gives me the possibility to use the full range of strokewidth without losing the speed of the vectors. I also checked if JavaScript supports controlp5. Found this information on the GitHub sojamo/controlp5 site: ‘Currently there is no JavaScript version of controlp5, though I had started implementing a slimmed down version for processing.js but since it is now unclear which JavaScript version – processing.js or p5.js – will become the default js version of processing, controlP5.js is on hold. There is a tendency that p5.js will become the primary JavaScript environment.’ So as a result there is no working version in JavaScript. I will put the code online for the rest of the programs. Just played with the settings for a while.

I could be going on changing settings but what can I do to change the images the program delivers. Added two different colors, blue and yellow for each mode as a start.

Switched off noisestrength for a while. Saved frames during mode switching.

Would it be possible to define another group? Ok… I have made a mistake in my if structure. But it gives an interesting image because it now triggers two blocks of code instead of 1. But key 2 and key 3 are now behaving the same. Except for the color. What to do to change that behaviour? Added a new group under the 3-key.

I changed the color behaviour for the three modules. They are now using the HSB colormode. Although brightness is not so relevant because there is an alpha channel used.

Made a function called colorCycler. It cycles very slowly through the HSB colormode. in fact it does the same thing as the previous version of this program. Added a new DrawMode variation under the 4-key.

Added some growing corn-fields under the 5-key.

Used ColorCounter for the directionAngle.

Defined the 7-key for some concentrated ellipses. hitting the space bar creates a new noise seed.

The 8-key makes one great wave. Swiping all information to one side.

Three dimensional noise
‘The complexity of the agents behavior can be further increased when the three-dimensional variation of the noise () function is used to generate angle values. This three-dimensional noise can be thought of as a large cube of random numbers in which the individual values differ only slightly from their neighbors. If the agents still move about in the area, but the random numbers for their movement are selected from the different layers of this random number cloud they are no longer bound to the same paths. The closer these virtual z-coordinates lie to each other, the more they cluster together. The image becomes even more dynamic when the z-coordinates are changed slightly but continuously. The agent class has to be modified slightly to perform this new action.’

One of the first things I noticed that this 3D noise program is running in the P2D render mode. Strange. I thought P2D was 2D space and P3D was 3D space. So I looked that up. There are four render modes: the default renderer, P2D, P3D, and PDF. Switching to P2D or P3D is switching to 3D space? Default (‘slow’ but very accurate 2D render mode). P2D (OpenGL, faster but less accurate 2D render mode). P3D (OpenGL and well, 3D). PDF (for PDF output). Found this information on the GitHub Processing site. Meanwhile due to the changes in Processing 2.0, P2D and P3D have been replaced with variants of the OpenGL renderer. ‘We’ve removed the software-based (but speedy for some circumstances) versions of P2D and P3D. We feel that OpenGL rendering is probably the future for most Processing work, so we’re focusing our efforts there.’ So it is still unclear if P2D is the same as P3D but it might be better to run everything in OpenGL. I have changed the background color again. And did the same adjustments I did for the previous range of GDV’s. I also noticed that the space bar functionality for triggering the noise seed has disappeared in this range of programs. But I found that quite useful so I have put that back again. Tried the settings.

Played with the settings and introduced a blue color for DrawMode 2.

Did some testing with different file formats. The tif-format gives the best result. But also the largest file size. About 1.8 Mb per 800 x 800 pixels image. So I stick with jpg.

Made pairs of the points. A white and a blue point that work together.

Tripled the points and made them red, white and red.

Made flag-like objects. Assembled by red and blue lines.

The same thing but with more horizontal lines and blue, yellow and white colors.

Used the three RGB colors Red, Green and blue (although I am working in HSB). These images make you see things unclear and double.

Instead of enlarging the y-side I enlarged the objects on the x-side.

Finally put everything under an angle of 45 degrees by giving the same numbers to the x and y coördinates.

The bonus program
There was one more bonus program in the directory. It is not being discussed in the Generative Design book. But I’ve made some variations with it anyway.

Used a very small rect to create movements.

Replaced the rectangle by a bezier curve wave symbol. This makes the program behave very slow. But it delivers interesting images.

Used a pill-like shape as the main object.

Used a stairs like (could also be roof like) image as the main object.

That looks like sheets of paper running off a printing press.

Used text to make the structure. The program is reading the x-position and is dropping that information into the noise-stream.

Used the year, month, day, hour minute and second function as input. Something strange happened here. I defined the time and dat variables in the top of the program. But when I runned it the program did not refresh the seconds. After a while it was clear to me that you should initialize the date and time functions in the draw block of Processing. Otherwise the date and time functions will not update.

800 white swans. It’s not completely foolproof because some reflections overlap the real swans.

Another variation but now with arrows.

And one with red and colorized circles which might look more like tubes. But they are just circles.

GDV P.1.0 Hello, color

Before I will start with showing some examples of the Generative Design Variations project I will explain something about the numbering of the files. There is really not much to it because I kept the numbering the same as it was done in the book. So P_1_0_01 is the first program in the book. I added GDV to it which stands (as you might have guessed) for Generative Design Variations. And I also added my version number. P_1_0_01_GDV_01 means the first program from the P-section and my first variation. And so forth and so on.

When you take a look at that first program P_1_0_01 than it seems easy to make a variation. Because I thought that the essential thing in this program was that horizontal movement with your nocursor would mean a change in size and vertical movement would mean a change in color. So I think I kept that quality in every program to follow. The first thing I did was make 36 squares instead of one square.

That looked a bit boring so I decided to put more squares in. I added 25 more and positioned them at the locations where the horizontal and vertical lines between the rectangles are crossing each other.

I thought it would be even more interesting to add some transparency. But the drawback is that the colors are getting very muddy at certain nocursor-locations.

What can you do more? Instead of one square make 25 x 25 and 24 x 24 squares.

But after a while I thought that making more squares would not be the way to go. So I made a basic version with only five squares. left out all the fill colors and used only lines. This gives a nice effect when lines are displayed over each other.

Found that very minimalistic and made a new version based on nine rectangles. Used fills and transparency again.

Played with the transparency values. Squares are disappeared. This is a combination of the previous two sketches.

Making it more simple instead of more complex. Tried if it was possible to make four individual squares which react on x-y position of the nocursor. I noticed that when the four rectangles almost filled the screen that it displayed a cross. Kept that in the back of my head.

Four squares positioned in four squares. Not very interesting though.

Sixteen squares positioned horizontally and vertically. Color and size still depending on the mouse-position of nocursor. On top of these squares are sixteen by sixteen smaller squares filled with the same color as the background.

Again sixteen squares positioned horizontally and vertically. Beneath it are the same amount of squares. They are moving into a checkerboard kind of structure when moving the nocursor from the left side to the right side of the display window.

Here the idea of making a cross is coming back from the back of my head. Where are visual ideas kept in your head? Anyone? Five squares. One square in the center. The others grow from centers on top left, top right, bottom left and bottom right. You cannot see them because these are filled with the background color. The center square is filled with color ranges half of the y-value of the nocursor.

The center square is, as you might expect, in the middle of the display window. Moving the cursor left or right brings in two ellipses which are filled with the background color.

Another approach. I tried to get away from the circles and rectangles. Did some tests with introducing functions which calculate more interesting shapes. That helped for a while. But the amount of code and the description of the shapes was getting too complex. So I decided to use images which I designed in Adobe Illustrator. These images are exported using the svg-format and imported into Processing. As a source of inspiration I used a book called ‘Katachi, Classic Japanese Design’. In that book I found a decoration which was used on a ‘uchiwa’ or flat fan. The ‘uchiwa’ was introduced in Japan from China during the Nara period (710 – 794). Used five circles on top of each other. But that was a mistake because it won’t work. And that says more about the intelligence of the people who designed the original symbol than about my ability to recreate it.

A stylized tortoise shell relief shape which you can find on the side walls of the main gate at Hagashi Honganji established in 1602 by the Shogun Tokgawa Ieyasu. However… the shape is created in Adobe Illustrator and imported into Processing. In Processing all style elements, like line thickness line color and object fills are removed. They are re-introduced with the functions that are available in Processing for adjusting line thickness and fills. I’ve also repeated the image twice with different line thickness and fill settings.

A flower-like design which you can find on ancient Japanese lacquer trays. Redrawn in Adobe Illustrator and repeated twice with different line settings and colors.

Stylized plum blossom shape which is used as a decorative element on thee or sake cups. It’s a symbol of grandeur, resilience and courage. Same way of working as I did with the previous example.

This is an interpretation of a symbol which I found on a Japanese Kimono called ‘hanten’ or ‘happi’ a straight-sleeved coat bearing a house or shop name (yago) or symbol. Hanten were worn mainly by artisans and members of the fire brigade during the Edo period (1600 – 1868).

Interpretation of a namako-, or sea cucumber-, style wall decoration.

Another  interpretation of the namako wall decoration pattern. This decorative effect is produced by affixing square tiles to a wet clay wall and then plastering the joints in a semicircular relief. The style originated also in the edo period and reached its height of popularity during the Meiji period (1868 – 1912).

One variation of a form which you can find on rice bowls for everyday use.

Two icons which represent old-fashioned light bulbs representing light and dark.

Eighty maps of The Netherlands are centered in the display window. A .svg file which I created in Adobe illustrator. Size and color behavior are still the same as in the original program. Removed all style elements and replaced them using Processing’s functions. By the way: This image is a variation on the decor or stage set of Theo Maassen’s show ‘Zonder Pardon’. But that aside.

A text which I originally found on a T-shirt: ‘Contents may vary in colour’. Changed one character in the sentence and positioned it n the center. FIOTEXT Regular font designed by Jeanne de Bont.

When finished I got some mixed feelings about this programming session because the only thing you do in the end is replace and change the svg-file. The basic program as it was in the original Generative Design book file is almost kept the same. I only made some adjustments which anyone could have done (also without knowing nothing about programming). I don’t know if that is a good or a bad thing. Anyway I have now learned what I can do with x- and y-values when you connect them to size and color. And I guess that’s the still essential thing.