A personal exploration of connections between creative computing, maker-centred learning, self-expression and social engagement; with a special twist on hacking fine arts.

April 15, 2019

Playing with René Magritte, micro:bit and Scratch


Today I share an activity very similar to the last one. It consists of using micro:bit and Scratch to play computationally with a work of art (it could be from a museum or also public art). In this particular case we play with the works "Golconda" by René Magritte from The Menil Collection (Houston) and "The Treachery of Images" also by Magritte, on display at the Los Angeles County Museum of Art (LACMA).

Golconda, René Magritte (1953) and The Treachery of Images, René Magritte (1929).

Magritte is an artist that children like very much (they like all surrealists) because of his ability to unsettle you and make you wonder what you're seeing. After exploring his works with the children (either in a museum or on the Internet), you can let them choose a couple of them and think about how to create an interaction between a physical work (on paper, cardboard, etc.) and a virtual work (on the screen).

In my example, as you can see in the video above, the idea is that by rotating physically the painting of the pipe we can animate the digital Golconda painting, creating the effect of raining men (up and down), and if we shake the pipe we turn the men into pipes.

The programming of the effects is quite simple, but we use many sprites and also clones, so it's probably an activity for kids aged 12 and up. The materials we need are: the micro:bit board, a computer or tablet with an Internet connection, a device that can take pictures, and some graphic editing software (although with the Scratch editor can be enough). In my example, one painting is on the screen and the other is printed, but the activity would be even better if the children draw or paint their own works (inspired by Magritte or by others). To use micro:bit from Scratch we must install ScratchLink and add the micro:bit extension inside our project (more info here).

The most laborious part of the activity would be to cut out the men from the painting, but luckily I found that a digital design studio (commoners) created the same animation, so I used their cutouts. Another arduous task if we work with the painting Golconda is to place all the sprites in the same positions as in the real artwork, also taking into account that they are in different layers. Getting the characters and placing them in their initial positions are the only two tricky tasks of this project.

Like I said, the Scratch programming is simple. It is based on using the micro:bit extension to detect the tilt angle of the board (which is attached behind the printed paint). Depending on the tilt angle we then make the men move up or down. And if we detect a shake, then we change the costume of all sprites (from man to pipe, or vice versa). You can check my Scratch project and the scripts here (feel free to remix!).

Main scripts. The angle will depend on how you place the micro:bit. 
Positions will be different for each sprite.

The "raining men" animation.

Reimagine

You could try a similar project but with your own physical and virtual artworks instead of using paintings by Magritte. Or you could build a small museum room with cardboard and colors, and create interactions between the virtual room and the cardboard room. If you want to be inspired by other projects that can be done with micro:bit you can take a look at these ideas.

March 20, 2019

Playing with Joan Miró, micro:bit and Scratch


Today I share a very simple activity. It consists of using micro:bit and Scratch to play computationally with a work of art (it can be from a museum or also public art). In this particular case we will play with the work "Painting on White Ground" by Joan Miró from the collection of the Museo Thyssen-Bornemisza (Madrid).

Painting on White Ground, Joan Miró (1927).

As you can see in the video above, the idea is that by moving the micro:bit board we move the painting, and if we shake the board we cause a chaos in the elements of the painting, which in a few seconds is recomposed.

It is an activity that can be performed with children from 8 years old. The programming of the effects is simple. The materials we need are: the micro:bit board and its USB cable, a computer or tablet with an Internet connection, a device that can take pictures, and some graphic editing software (although with the Scratch editor can be enough). To use micro:bit from Scratch we must install ScratchLink and add the micro:bit extension inside our program (more info here).

To work with Miró's painting we need a photo of the artwork and the we have to cut out all its elements and add them as sprites within a Scratch project. To cut out characters we can use free and open source software like Gimp. There are also online editors like Pixlr. And if you prefer a straightforward solution, the Scratch paint editor is very simple but still powerful enough to play with pictures.

Then you have to program two behaviors: (1) make all the elements rotate together when we rotate the board, and (2) cause chaos in the elements when we shake the board.

 (1) Rotating the sprites when we rotate micro:bit

 (2) Shaking the sprites with random turns and moves when micro:bit is shaken

You can see my Scratch project and how it is programmed here.

 Moving the elements of the painting in a chaotic way.

Reimagine

You can try a similar project but with your own creations instead of using a painting by Miró (Kandinsky works would also be great for this kind of projects). You can also make the elements of Miró's painting dance to the rhythm of some music. Or you can build a small museum room with cardboard and colors, and create interactions between the virtual room and the cardboard room. If you want to be inspired by other projects that can be done with micro:bit you can take a look at these ideas.

March 8, 2019

Imitating Sophie Taeuber's abstract art with Scratch


Sophie Taeuber-Arp (1889–1943) was a Swiss artist, painter, sculptor, textile designer, furniture and interior designer, architect and dancer. She is considered one of the most important artists of concrete art and geometric abstraction of the 20th century.


Today, on Women's Day, I want to write a post dedicated to this amazing woman, who was a pioneer of the early twentieth century avant-garde.

More than two years ago I published in Scratch a project on how to imitate Sophie Taeuber's abstract art. These projects that mimic ways of painting are useful for getting into the artist's mind, understanding what he or she was doing, and designing prototypes and starting points that might lead you to create your own works of art. This particular project can be implemented in many ways, and can be programmed by children, youth or adults. It was inspired by this painting below.

Six espaces distincts, Sophie Taeuber-Arp (1939).

My Scratch project divides the stage into six parts, just like the painting. The shapes are also the same (each is a sprite) but their position, direction and color are random. Although of course the result is far from perfect, I find it a fun and easy way to play with an artwork, and at the same time learn from it. You can try the project in Scratch to see the randomness:

Scratch project.

Each of the shapes has its sprite within the Scratch project.

And each of the sprites has different costumes, with different colors.

The algorithm is as simple as distributing the shapes in the six available spaces, giving them a random direction, and also a random costume.

Reimagine

Can you do something similar with another abstract artist? What if the shapes don't move randomly but following a music, or responding to some physical interaction through a sensor?

March 6, 2019

Hacking Museu d'Art de Girona with Creative Computing. Art Hackathons in museums


This article continues to explore ways to "hack" the art of museums using creative computing. With these activities I intend to give original examples of how to bring art closer to children and families, allowing them to use digital technologies to play, express themselves and reflect collaboratively on what they are seeing/experimenting in the museum.

Specifically, this post explores the idea of "art hackathon", focusing on the Girona Art Museum, and using Scratch as the main tool for the playfulcoding.

In the video above you can see four examples of possible games and interactions with sculptures and paintings inside the museum.

How can we use creative computing and playfulcoding to play/interact/reflect on works of art?

We can create our own artworks inspired by what we see, or we can make elements that are not from the artworks suddenly appear in them, or make elements of the artworks move and change color or shape, or make the artist who created the artwork appear and interact with it, or create a story based on several artworks... The list would be endless. Humor is often a great starting point.

How do we organize an art hackathon in a museum?

There are many possible ways. I think it's interesting that the hackathon happens as part of a visit to the collection or a temporary exhibition. Children, families (or people in general) should be grouped into teams, and a good amount of time should be spent walking, getting to know the art, taking photos, taking notes, sketching, etc. The help of a guide is always valuable in this first part. Afterwards, ideally inside the museum, we should find a space where we can sit down with our team, do brainstorming, and then we can start working with our ideas and start programming by using our laptops (which are often not allowed in museums!). If we use Scratch, it will be useful to have an Internet connection. If we create our projects based on photos taken in the museum (as in the examples in the video) we will also need a mobile phone that can take photos. Take into account that you may not be allowed to take photos in some collections, or if allowed you may need to do it without flash.

The same that I have just proposed above could be done with the public art of a city, a neighborhood, etc. This option usually allows more flexibility than the museum. In next articles I will show some examples in this direction.

The art hackathon at the museum is an ideal activity for families. It can be organized with large or small groups, and can be implemented with the help of the museum or on your own (always respecting all museum rules for visitors, and referencing all the artworks and artists!).

Examples from Girona Art Museum

1. Bringing to life a sculpture.


One fun thing we can do with Scratch is to bring a sculpture (or painting) to life. In this case we added a body to the head. And we turned the eyelids into "sprites", so that we can move them and show the eyes (drawn by us).

2. Adding elements from another context.


In this case we cut out the background of the wooden sculpture and replaced it with a night sky. Then we added some elements from other contexts: the flying Scratch cat, and some Lemmings. Notice that we could turn this artwork into the stage of a game created by us.

3. Create a self-reference by making the artist appear. Modify part of the painting in a different style.


Here we made Santiago Rusiñol (the author of the painting) appear using an image of him painted by Picasso. We used a touch of humor by adding a rabbit and making Rusiñol shoot laser beams through the eyes. We also transformed a part of the painting (the Church of Sant Feliu) by mixing styles and giving it a popart twist.

4. Bringing to life characters from paintings and make them interact.


This last example consisted of giving life to two characters from two separate collages, making one of them enter the other collage, and then make them dance and change color.

The four examples have in common that they are based on photographs taken in the museum, and that in all of them we cut out parts of the photograph in order to eliminate them, move them, or bring them to life. As I said in previous articles, in order to cut out sprites you can use the Scratch paint editor, which is very simple but still powerful enough to play with your photos, or you could use a free and open source software like Gimp, or online editors like Pixlr.

Reimagine

The projects created during the art hackathon will be simply starting points, prototypes, ideas from which to continue creating and learning. We can continue iterating, improving projects and reimagining new ones. What if you make artworks belonging to different museums interact with each other? What if you add interactions with the physical world to your artistic Scratch projects? What if you add music to your creations?

Wanna check my Scratch project to see the scripts? Follow this link. Feel free to remix.

February 23, 2019

Hacking art at the museum with playful coding: Picasso


In this article we continue the series where we explore how to hack and play with famous works of art by using programming. In this specific case we will play with two paintings by Picasso, from the MoMA collection. For the coding part we will continue using Scratch.

A fun activity to increase children's (and adults') love for art is to create stories from paintings and sculptures. It is a way to immerse ourselves in the works of an artist and express our creativity with storytelling.

The example I present here is very simple. From a photo where you can see two paintings side by side, we bring to life two characters, one in each painting, making them talk, move, and even exchange the canvases. 

This activity is perfect for an art hackathon. Imagine that you visit a museum with your class or with your family, you walk around the exhibition halls, alone or accompanied by a guide, and while you enjoy the works and learn about the artist, you also take photos already thinking about the stories you are going to create.

After that, in the museum as well (or at school or at home), divided into teams, you start to imagine and create stories, hacking and playing with the pictures you have taken.

We need mobile phones to make the photos and computers (or tablets) connected to the Internet. Apart from this, we only need Scratch, although sometimes a graphics editor can be very useful to play with the photos. Paper and pencil to create storyboards are also highly recommended.

To cut out characters we can use free and open source software like Gimp. There are also online editors like Pixlr. Gimp has different selection tools and has a plugin called "Resynthesizer" that allows you to select something you want to remove from an image, and with the push of a key, it's gone without a trace. If you think these tasks are complicated, you can search for tutorials on the Internet. In Youtube you will find many videos that teach you how to do these things using Gimp or Pixlr. Or if not, you can simply use the Scratch paint editor, which is very simple but still powerful enough to play with your photos.

As I always say, and although these activities are for educational purposes, it is very important that when we play with works of art we always cite the artists and the works. If you want to do it with works of contemporary art by living artists, unless the art is public, it would be a good idea to inform the artist.

In my example I have turned a character from the painting "Harlequin" and a character from the painting "The studio" into two Scratch sprites.

Below you can see the two paintings and the Scratch project. If you look at the project on the Scratch website you can see how it is programmed by clicking on "see inside". You will see that the programming is very simple. I encourage you to remix it.

"The studio" (1927-28) and "Harlequin" (1915) by Pablo Picasso (MoMA collection).


Reimagine

Like all the activities I propose, this one can also be re-imagined in many ways. What if you create a story where characters jump from painting to painting? Or what if each team creates a part of the story and then they put them together? What if you mix characters from different artists? And what about doing it with sculptures?

February 11, 2019

Playful coding with a famous painting. Magritte


In this activity I try to show how we can have fun using coding to hack or play with a famous painting. Specifically, I used Scratch to do some playful coding with the painting "The pilgrim", by René Magritte. Magritte is an artist that children like very much (like all surrealists) because of his ability to unsettle you and make you wonder what you're seeing.

The programming in my project is very simple. It allows to move the head of "The pilgrim" with the arrow keys and make it coincide with the body (in the painting they are separate). You can also change the head and make others appear: the same face covered by an apple (a reference to another painting by Magritte), the Scratch cat, or Picasso's face.

In this project we are exploring two of the many things we can perform on a painting through creative computing: (1) to make an object in the painting move, and (2) to make appear new objects that were not in the painting.

Even if we use images of artworks for educational purposes, it is very important that we always cite the works and the authors.

To move an object in the painting, first we have to turn it into a "sprite". This means that we have to cut it out from the image, and fill the remaining space so that the cut is not noticeable (content-aware fill). In the image below you can see the original painting, the version without the face, and the face.


Although cutting images with the Scratch drawing editor is feasible, if we want to do a precise work, then it is not recommended. To do this kind of tasks we can use free and open source software like Gimp. There are also online editors like Pixlr. Gimp has a plugin called "Resynthesizer" that allows you to select something you want to remove from an image, and with the push of a key, it's gone without a trace.

When you have completed these steps, programming with Scratch is very easy. Simply put the painting without the face as a background (or as a sprite in the back layer) and then add a sprite that is the face you have saved in a separate file. From then on you can move the face, modify it, add sounds, or anything else you can think of.

I've added some buttons to the project that allow you to change the face. I do it through "costumes". The same sprite has several costumes with other images that I have added. Check the project and the scripts here, and feel free to remix it.



Reimagine

There are many ways to reimagine this activity. Take a look at other Magritte's paintings, you will see that they are very thought-provoking and will give you a lot of ideas. Let the children explore them. Also think about how to add interactivity with the physical world. For example, there are some objects that appear recurrently in Magritte's paintings (hats, apples, pipes, umbrellas). You can play with real objects and the Makey-Makey kit to make them appear or disappear from the paintings on the screen.


February 4, 2019

Imitating Jackson Pollock's abstract art with Scratch


This article is the first in a series that will explain how to play at imitating the abstract art of some painters by using Scratch.

We begin with Jackson Pollock's abstract expressionism. My Scratch project is inspired by his work "One: Number 31" (1950), on display at MOMA, New York City. 

Pollock, well known for his "drip paintings", is a very popular artist and proof of this is that on the Scratch website we can find dozens of projects inspired by his works. 


The activity that I describe below is conceived to generate a quite realistic result (although of course very far from a real Pollock painting). For the activity you only need a computer (or some mobile device) and an Internet connection. 

Although the version of the activity I am going to describe is more appropriate for secondary school students (since they need to have notions of angles and concepts such as randomness), we could also simplify it and implement it with primary school children.

Step 1. Learning about Jackson Pollock


Of course the best way to enjoy Pollock is to immerse yourself in his paintings, standing in front of them in a museum. As I usually say, if you are lucky enough to have a nearby museum with Pollock works on display, the first thing I would recommend is a visit with the children. They can take photos (if allowed) or make drawings, copying or inventing new works inspired by Pollock. But if the museum option is not possible, the Internet is full of resources to learn. For example, it is very interesting to know how he painted directly with the canvases on the floor (see video above), what came to be known as "drip paintings". The MOMA website is also a good place to learn and enjoy the 86 works that are shared online.

The painting I have chosen is huge and occupies an entire wall: 2,69 m x 5,30 m.

Step 2. Painting a first layer of lines on the virtual canvas

The way I propose the activity, the programming is divided into two main parts. The first consists of painting thick lines and large areas of color. These lines later will be almost covered when in the second part we paint the network of thin lines, but they will generate some spots and shadows that are very useful so that the final effect is realistic. 

Scratch is a free programming language and online community where you can create your own interactive stories, games, and animations. On this occasion we use it to make an interactive artistic project.

In Scratch 3 there is an extension called "Pen" that allows us to draw on the stage. It's as simple as using the Pen Up and Pen Down blocks and moving the sprite around the stage. This is how we can draw a thick curved line (with random thickness and random transparency): We repeat 50 times a small forward movement, and we turn a few degrees left or right.

Drawing a random, thick and curved line.

If we now repeat the previous script 50 times and add a random color (within a set of 3 possible colors), we will be able to fill the stage with thick random lines of different colors and transparencies.

 Drawing 50 thick lines with 3 colors.

Step 3. Painting a large network of thin lines above what we had created before

Now we repeat the previous process but drawing many more lines, thinner, longer, and with five colors instead of three.

Drawing a random, thin and curved line.

 Drawing 200 thin lines with 5 colors.

If we now put the two parts together, and we first draw the fifty thick lines and then the two hundred thin lines, we get a result that is totally random each time, but always keeps the same style. To give it a realistic touch and make it look like a photo taken in the museum, we can add a sprite that represents people looking at the painting.

Result of running the program 4 times.

When we program a project like this we are generating a lot of iterations. The first part of the program has two nested loops with a total of 250 iterations (50x50). And the second part has two other nested loops, with a total of 60,000 iterations (200x300). All this makes the execution of the program slow. The whole process of painting the canvas can take more than 30 minutes. Watching how it runs is beautiful (and almost hypnotic), and I've added jazz music in the background. But Scratch allows to run the projects in "turbo mode" and you can see the result in just a few seconds (Shift-click on green flag for turbo mode).

My Scratch project. Shift-click on green flag for turbo mode.

Step 4. Reimagine

Finally, some ideas on how to play with the project, improve it and remix it. For example you can start playing with the numbers (length and thickness of the lines, number of iterations, etc.) and see how the result changes. You can also play with the colors. I've chosen some colors very similar to those used by Pollock, but you can use any. You could also have several sprites painting at the same time, or add a sprite that "drips" small colored dots on different parts of the stage, to make it even more realistic.


January 29, 2019

Hacking Mondrian with Scratch and Makey Makey


This creative learning activity consists of replicating on cardboard a Mondrian painting, and then hacking it by using Scratch and Makey Makey. The final result is a physical device connected to a digital one. Touching with the hand the colors of our replica on cardboard, we change the colors of the original painting that we have on the screen.

For teachers, educators, or parents, here is a proposal of how to implement the activity (of course there are many variants and alternatives to explore):

Materials and resources 


A piece of cardboard, coloured wax pencils, a black marker, copper adhesive tape, a Makey Makey kit (board, alligator clips, jumper wires, USB cable), a laptop, and Scratch

Step 1. Learning about Piet Mondrian


If you are lucky enough to have a nearby museum with Mondrian works on display, the first thing I would recommend is a visit with the children. They can take photos (if allowed) or make drawings, copying or inventing new works inspired by Mondrian. If the museum option is not possible, the Internet is full of resources to learn. For example, the painting I chose is "Composition with Blue, Yellow, and Red" (1927), on display at Museum of Fine Arts, Boston. The museum's website has information about that painting, but also Google Arts an Culture let you explore the museum, or you can check websites like WikiArt, a visual art encyclopedia.

Step 2. Replicate or invent a Mondrian work on cardboard


The next task is to cut a piece of cardboard (or whatever material you think is most appropriate) and replicate (or invent from) the Mondrian work of your choice. You can use coloured wax pencils, markers, paints, etc. Once the artistic work is finished, our piece must be prepared so that it can interact with Makey Makey and Scratch. I used copper adhesive tape to mark some areas of the painting with which we will play. The areas covered by the tape will be like buttons that when touched will cause changes in the digital version that will be on the screen. A more effective and fun solution for children would be to use colored conductive play dough instead of copper tape. We could cover the whole area of some of the squares or rectangles with conductive play dough. If you use the tape, make sure it reaches the edge of the cardboard, which is where we'll attach the alligator clips. If you want you can also create buttons like the ones in my example ('random' and 'reset') that later you can also program with Scratch.

Step 3. Connections with Makey Makey


In this phase we have to prepare the connections with the Makey Makey board. Each of the areas where you have put copper tape or conductive play dough must be connected to the board, either by alligator clips or jumper wires. Makey Makey turns anything into a touchpad, so with the kit we can turn objects like bananas, coins, or anything conductive into a computer keyboard key to control onscreen gaming action, play software-based instruments, etc. In our case, we will turn our painting on the cardboard into a control with which to hack the real work of Mondrian that we will have on the computer screen. In the Makey Makey website you can find tutorials that you may find useful. But the Internet is full of videos, examples and detailed activities. Do a search if you need help or ideas.

In the example of the picture above I connected the blue area of the painting with the round "Space" pad on the Makey Makey. I also connected one end of an alligator clip to "Earth" on the bottom of the front side of the board. With this setting, every time I take with one hand the free end of the alligator clip connected to "Ground" and I touch with the other hand the copper tape in the blue area, I'm closing the circuit, so it is as if I were pressing the "Space" key on the keyboard. Of course now we need to program with Scratch so that each time this happens, the blue area of the painting on the screen changes color.

Step 4. Coding with Scratch

Scratch is a free programming language and online community where you can create your own interactive stories, games, and animations. On this occasion we use it to make an interactive artistic project.


There are many possible approaches to programming this project with Scratch. In mine, the idea is to put a background photo of the original Mondrian painting that we are hacking, or to draw a replica with the paint editor. Then we have to create a "sprite" for each colored area we want to play with. These sprites can be created with the paint editor, and must have the same shape and size as the area over which we will put them. Also, for each of them we have to create "costumes" with different colors.

The sprite for the blue area and its costumes.

The coding part is very simple. Basically we have to use blocks from the section "events" and the section "looks". The idea is to make the sprites change costumes when we press certain keys (or what is the same: change costume every time we touch a colored area of our cardboard work connected to Makey Makey).

 Scripts for programming the blue area sprite.

I programmed it without using the Scratch extension for Makey Makey. But Scratch 3 includes an extension specifically for it, making it even easier.

If you're new to Scratch, you can take a look at the tutorials it includes, or I also recommend this great guide: Creative Computing Guide.

Step 5. Reimagine

I haven't explained all the details for implementing the activity, but I think I've highlighted the key points. Here you can see the Scratch project I made. Try it, explore it, remix it.

With the same core idea you can imagine many other activities:

- Change Mondrian for other abstract artists.
- Instead of making the colors change, make the shapes move.
- Add music. Every time we touch an area we can change the color and play a sound.
- Choose a figurative painting, and when touching the represented figures on the cardboard make a dialogue appear on the screen, or make them move, or make appear figures from other paintings, etc.