Categories

# 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. Y gweithgaredd i wneud braslun sydyn cyn i chi godio, introduces the Critical Thinking Sheet. You can find a copy of the CTS sheet here.
2. Arlliw Disgleirdeb Dirlawnder activity.
3. Mae'r 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.

1. If you have not done so already: print out the Taflen Meddwl Gritigol. 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.

``````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;``

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` wrth `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).

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.

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.

``````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);``

## 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.

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

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.

## 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

Mae Jonathan yn gyson yn dylunio pethau, yn addysgu pobl, ac yn dysgu drwy'r amser. Mae'n athro delweddu yn yr Ysgol Cyfrifiadureg a Pheirianneg Electronig, Prifysgol Bangor, y DU. Mae'n arwain y grwpiau Delweddu, Data, Modelu a Graffeg (VDMG), yn arwain prosiect enfys ac mae'n un o awduron y llyfr Springer "Five Design-sheets ", dull dylunio braslunio.

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