Working with sequence 1: The Beacon

During the lectures in this cycle we have been introduced by Mogens Jacobsen to a small sequencer program he has made. We were encouraged to use it to work with the different light patterns from Harrison et al. (2012). My partner Kathrine and I chose to work with the “Beacon” and the “Raindrops” pattern. This post will be describing how we worked with the beacon pattern, and how we experienced backtalk (Schön 1992) throughout the process.

We were intrigued by the “Beacon” pattern because of the seemingly illogical illustration of the light intensity. According to the illustration the beacon blinks twice two times per cycle. Additionally the blink is emphasized by two even more intense blinks for each regular blink.

The beacon pattern (Harrison et al. 2012)

In order to reproduce this behavior, we decided to set the lightness of the regular blink to 80 (out of 100) in order to be able to accentuate the blink by further increasing the lightness to 100 in the intense blinks. In order to reproduce the sequence a total of 25 discrete steps were required in the sequencer. The amount of steps could have been lowered by having steps with varying lengths, but this approach was the one giving us the best overview of the behavior.

var LightSeq = [0, 0, 0, 0, 0, 80, 100, 80, 100, 80, 0, 0, 0, 0, 0, 80, 100, 80, 100, 80, 0, 0, 0, 0, 0]; //lightness value

At this point we learned an important lesson about the nature of lightness. Working with our program in a windowed browser, we were annoyed that our regular blinks was looking grey, rather than white. This can be attributed to the materiality of our screen (Ebsen 2013), as the relation to white areas in other parts of the screen influenced the perception of our blinking sequence. In order to avoid this effect, we found that running the program in fullscreen mode, changed the perception of the program from different shades of grey, to different light intensities. Through experimenting we even learned that placing a plain white sheet of A4 paper in front of the screen further helped in changing this effect as it effectively removed the relation between the screen area and its white frame.

This experience is good example of the see-move-see characteristics of the design process (Schön 1992) as we were able to evaluate the expression of our program by way of our appreciative system (Schön 1992) and then act accordingly through several cycles of experimentation with the expression of our program. The next step was figuring out how we wanted to add interactivity to the program.

Because of the particularities of the regular and the intense blink, we decided that we would treat them as two different entities and allow the user to control the intense blink by adding them to different steps in the beacon sequence.

This was accomplished by mapping the x-coordinate of the mouse position to certain steps in the sequencer. When the user clicks, two intense blinks are added to the regular blinks in the part of the sequence. This means that we conceptually divided the sequencer into five “big” steps containing five “smaller” steps and the x-axis of the screen into five corresponding areas. Clicking in the first fifth of the screen width would add two blinks to the first big step in the sequencer as shown in the code below:

if(e.clientX>=0 && e.clientX<windowWidth/5)
countd[0] = 2;

Soon we found that the symmetric nature of the beacon sequence made it impossible to see the different steps in the sequencer as everything repeated itself after the first step. To counter this, we needed to make it obvious when the sequence repeated itself. So instead of the beacon pattern, we switched to the staircase blinking pattern as the base for our program(Harrison et al. 2012). As the staircase starts and ends on different levels of intensity, it is easy to see when the sequence repeats and discern between the different steps in the sequence. Once again we experienced backtalk (Schön 1992) from our work, as we were driven to reflect on our choices in order to improve on our design.

Although we changed the blinking pattern, we decided to stick to our original plan of being able to place two intense blinks on a certain step in the sequence. Thus our sequence now looked like this:

var LightSeq = [80, 80, 80, 80, 80, 60, 60, 60, 60, 60, 40, 40, 40, 40, 40, 20, 20, 20, 20, 20, 0, 0, 0, 0, 0]; //lightness value

In the resulting staircase pattern it is easy to see the different steps in the sequence, and when it starts over.

Staircase without blink

In the animation below, you can see how it looks when two intense blinks are added to the last step of the sequencer.

Staircase with blink

In this program we had now tried to map the steps of the sequencer to the x-axis of the screen however this mapping didn’t feel entirely tight. In the words of Lenz, Diefenbach & Hassenzahl (2013) the interaction was very covered, in the sense that the relation between the space and steps were not evident.

This realization prompted us to do a quick revision of the program to change the mapping between space and steps. In this new revision we made the step currently shown in the sequencer the one the user interacted with. How the this change in mapping affected the experience of the interaction will be discussed in a later post.


Ebsen, T. (2013). Material Screen (Doctoral dissertation, PhD Dissertation).

Harrison, C., Horstman, J., Hsieh, G., & Hudson, S. (2012, May). Unlocking the expressivity of point lights. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (pp. 1683–1692). ACM.

Lenz, E., Diefenbach, S., & Hassenzahl, M. (2013, September). Exploring relationships between interaction attributes and experience. In Proceedings of the 6th International Conference on Designing Pleasurable Products and Interfaces (pp. 126–135). ACM.

Schön, D. A. (1992). Designing as reflective conversation with the materials of a design situation. Research in Engineering Design, 3(3), 131–147.

Show your support

Clapping shows how much you appreciated Christian Sivertsen’s story.