Categories
Beginner Colours Processing Project Rainbow

String-art inspired rainbow graphics

Create line art in processing, based on a 500×500 grid. Explore transparency effects.

These activities are inspired by string-art. Pins are placed on a cork board, and strings can be strung from the pins to create artwork. We will create some simple line art patterns, using Processing.org language, and explore transparency.

The activities develop from previous ones. So take a look at the following activities:

  1. The activity to make a quick sketch before you code, introduces the Critical Thinking Sheet. You can find a copy of the CTS sheet here.
  2. Hue Saturation Brightness activity.
  3. The introduction to processing activity.

Activity 1. Sketch and plan the picture

The first task is to think and plan what will be created. We need to think about the page, and how we will lay the lines on the page.

Let us have a 500 by 500 grid. The square grid is convenient for our purpose, as it is a convenient size to think about the coordinate space. We can make the whole page larger by 10, so to give a white border around the line art.

Now complete the other parts of the Critical Thinking Sheet.

Critical Thinking Sheet example for the line-art activity
  1. If you have not done so already: print out the Critical Thinking Sheet. Complete the problem, name and add today’s date, and explain the challenge part ① 
  2. In panel ② make a sketch of the problem output, and annotate the diagram.
  3. In panel ③ you can explain the main components of the system. In this challenge there are three main aspects: (i) the size of the page, (ii) the appearance and colours of the lines and (iii) the x,y locations of the start and end points of the lines.
  4. In panel ④ we can now explain the process (algorithm).
  5. Finally, consider what to do next. Definitely we need to think more about the colour model (HSB).

Activity 2. Setup the page, and draw several horizontal lines

The first stage is to setup the grid size, and plot some horizontal lines.

The size of the page is easy to choose size(520, 520); as we need to have some space around it for the white border. But as we are dealing with lines, let us also choose the width of the line stroke to be 5 (so it looks a little wider) and set the rendering to smooth.

Top tip.
Sketch – even if it seems simple!

While it may seem so simple,
that we don’t need to
sketch the ideas,

the act of sketching helps us to think
what we are about to achieve.

size(520, 520);
background(255);
strokeWeight(5);
smooth();

For convenience, let us setup a variable called myMax, that will hold the quantity of lines. Then we can use this when we setup the colour mode.

int myMax = 25;

Now setup the colourMode. Let us use the HSB colour mode, as it is easier to go through the rainbow colour spectrum. Also we will set each of the other parameters to 100, so that we can think of the values in terms of percentages.

colorMode(HSB,myMax,100,100,100);

Thinking that every value is out of 100 is convenient, so let us prepare a useful multiplier, based on the size of the grid.

float myMult = 500/myMax;
Line art example, screenshot showing horizontal lines
Line art example, screenshot showing horizontal lines

Now we can draw the horizontal lines. We need one for loop, to achieve our goal. The loop variable controls the y value. The x value is constant, as we have a horizontal line. So we will draw a line from (0, loop-variable*myMult) to (500, loop-variable*myMult). In other words, the myMult variable scales the loop variable such that the coordinate positions appear in our 500 by 500 grid.

for (int i = 0; i <= myMax; i ++) {
    stroke(i,100,100,100);
    line(0,i*myMult,500,i*myMult);
}

Activity 3. Create a grid, by adapting the previous activity, and investigate transparency

Now adapt the set of lines, so to create a grid of lines. And also by increasing the strokeWeight of the lines (making them appear wider).

Line art; showing horizontal and vertical lines in a grid
Line art; showing horizontal and vertical lines in a grid

Now change the transparency value, to (say) 40%, as stroke(i,100,100,40); This will mean that when the lines fall on top of each other the colours will add together to create darker colours.

Line art, with transparent horizontal and vertical lines
Line art, with transparent horizontal and vertical lines

Now, explore different line weights, quantities and positions.

Activity 4. Diagonal lines

By changing the orientation of the lines, we can now create different pictures.

For example. Try creating a set of 100 lines diagonally. We can keep the same for loop, just create a set of 50 lines to the centre, and then another 50 lines to the end.

Top Tip.
Make your coding life easy!

1) easy to read variable names
2) memorable names
3) keep values understandable, e.g., use percents
4) comment code.

line(0,i*myMult,i*myMult,0);
line(500,i*myMult,i*myMult,500);

In this case, we have set strokeWeight(20), and the colour to be the loop variable, and its transparency of to be a value of 40 (which means 40 out of the 100 that we have previously set in the colorMode setup).

stroke(i,100,100,40);
Line art, showing lines of varying hue and semi transparent
Line art, showing lines of varying hue and semi transparent

Activity 5. Incrementing diagonal lines

Finally create a set of lines that increment across both the x and the y axis. This will create incrementing diagonal lines. So for instance, with 40 lines, transparency set to 30, with the strokeWeight of 30.

Line art example, showing semi transparent lines that are incrementing in both x and y direction
Line art example, showing semi transparent lines that are incrementing in both x and y direction

And finally you can also add the reverse lines, as shown below:

Line art example, showing incrementing lines on x and y axis and y and x axis
Line art example, showing incrementing lines on x and y axis and y and x axis

By changing the values (increasing the quantity of lines to 200, selecting transparency to be very low, e.g., 3, stroke weight to 2) different versions can be created.

Line art example, showing diagonal lines and a subtle colour map
Line art example, showing diagonal lines and a subtle colour map

Go further

Have a look on the internet for other line-art examples. Get inspired by those examples and try to recreate them. For example, have a go at the following:

  1. instead of using coordinates from external points on a square, you could do them from internal points.
  2. try creating them from random points
  3. try to plot them around a circle.

By Jonathan

Jonathan is constantly designing things, educating people, and always learning. He is professor of visualisation at the School of Computer Science and Electronic Engineering, Bangor University, U.K. He leads the Visualization, Data, Modelling and Graphics Group (VDMG), leads project rainbow and is an author of the Springer book "Five Design-Sheets" sketching design method.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.