Color Grid Tutorial

Grid<E> implements a 2D grid structure in BRIDGES, and it can be used to represent 2D image like structures (more efficient than the 2D array representation for large arrays), as well as implementation of simple 2D games that operate on moderate sized grids. ColorGrid is derived from Grid<E> where E is replaced by the Color type.

The setDimensions() method is used to set the grid dimensions. The ColorGrid subclass specializes this class to use Color for each grid element and is the subject of the tutorial here. As before, <E> represents the generic class parameter.

This tutorial will illustrate the use of Color Grid in BRIDGES. The tutorial consists of 3 parts:

1. A basic tutorial on how to create a color grid and draws a Plus sign in different colors
2. How to style the color grid elements with various visual attributes
3. Demonstrates an algorithm to construct a checkerboard pattern

See also

This tutorial gives an introduction to the usage of ColorGrid. You can find the complete documentation of the features in the Doxygen documentation of the following classes and functions:

1. ColorGrid [Java] [C++] [Python]
2. Grid [Java] [C++] [Python]
3. Color [Java] [C++] [Python]

1. Getting Started: Build a Simple Color Grid

In the first part of the tutorial, we will create a color grid with a few squares set to different colors that will show a + sign at the center

Here is the code for this tutorial. The expected visualization follows that.

Make sure that you can run the basic tutorial.

If you follow the URL given to you when the application runs, it will get to to the Bridges webpage that shows your output. You do not need to be logged into your BRIDGES account to see the output. If you are logged into your account, the output will show up in your gallery.

2. What Visual Attributes are supported for the Color Grid?

The grid you created uses a few primary colors and show show to construct and set colors on elements of the grid.

Next, we will style the grid we just created. For Color Grids, you can set the color, opacity of the elements. The tutorial also shows how you can set color either by name or by R,G,B triplets or R,G,B,A where A represents the opacity of the element. Check out the links to the classes (listed above) that supports these attributes and also details the possible colors you can use and how to specify them.

The following code styles the color grid we created in part 1 and adds visual attributes. The expected visualization follows that. Note that this has multiple visualizations that can switched using the tabs at the top.

3. Advanced Features.

• In the last part of this tutorial, we show an algorithm to generate a checkerboard pattern using the Color Grid.
• In this example, we will build and visualize a checkerboard in two colors using ColorGrid
• Once we have identified the square to which a pixel belongs, its colored in one of two colors.

The following code illustrates the checkerboard generation algorithm. The expected visualization follows that.

Bridges Visualization

• Once all your code is in order, run your file.
• Assuming all your code is correct and it compiles correctly, a link to the Bridges website will be generated on the console.
• Copy/paste this link into your favorite browser to view a visualization of the data structure you just created.
• It should look something like this:

Well done! You’ve just created your Bridges Color Grid based Checker Board project!

Going Further

Check Bridges assignment page for color grid based assignments