Anastasia Wiesendanger: Data on Sunset

For this project, we must create an abstract composition (or widget) using a maximum of two colors, by displaying internal data from our computer such as: battery, CPU, RAM usage, how long it has been powered on (Uptime), and the mouse position (x and y coordinates).

We started with each piece of data represented by a simple geometric shape. This shape then moves/transforms depending on the change in its data. The way the shape transforms varies for each data numbers. Some rotate, some change transparency, some change size, etc.

In addition to these shapes, we also left the various numerical data of the different computer information visible for a better understanding of the composition and to see the various shapes’s corresponding data.

From this first visualization, we sought to create our own personal work. One of the goals I had set for myself was to create a geometric composition with a specific order, so I started by centralizing the various shapes, except for the Uptime.

After centering them, I arranged the shapes on different layers so that all of them could be seen, and I changed their color using two rather contrasting ones. Finally, I had a first draft of the composition.

Initially, I chose yellow and blue for the colors. However, after looking at it more closely, I later changed them and alter some of the attributes of the data. In total, I am visualizing 5 data points.

The CPU is represented by the only circle present within the composition, which enlarges/shrinks depending on how much it is being used/stressed.

The RAM Usage is shown in the form of a square that occupies 50% of the entire window and changes transparency. The higher the value, the more visible the color becomes, and the lower the value, the more transparent it becomes.

For the Battery, to better visualize it, I decided it is represented by a square that uses the entire space of the window. The entire window represents 100% of the battery, and as it discharges, it shrinks towards the center.

The Uptime, unlike the other data, I did not center, or rather, I only centered it on the x-axis. Starting from a small square, I decided to have it occupy the entire y-space, thus creating the animation of a bar that exits the screen after a certain amount of time since the computer was turned on.

The mouse position instead is determined by the square at the center of the composition. When the mouse moves, the square rotates, trying to follow the movement of the mouse, which is represented by the x and y coordinates.

The composition is complete. The colors I finally chose are blue and orange, but I am still unsatisfied with the central square, so….

TO BE CONTINUED