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

October 19, 2020

Hacking public art with Scratch

 

In 2018, I conducted a workshop on hacking public art at the Scratch@MIT Conference. Since then, I had pending to prepare this tutorial. In fact, rather than a tutorial, this is more like a set of suggestions, tips and indications, because the activity, as you will see, can be approached in many ways, and is totally open to variations.

The idea is very simple, and consists of using creative coding to play with the art that we have in our surroundings.

 
Try this Scratch project with 3 examples.

The activity can be performed with children, adults, families, and is also perfect for teacher training. It is interesting because it allows us to work outdoors, work in teams, improve our coding skills, and learn from the art we have around us, which we may see every day, but to which we often don't pay enough attention.

The main idea is to take a walk with our team, choose public artworks that we would like to play with, think together about what we could do, and finally program it with Scratch. We can code outdoors, with laptops or mobile devices, or we can first take the pictures outdoors and then go code in the classroom, home, museum, etc.


With the Scratch graphic editor we can make many effects, and for many animations it is more than enough. But sometimes it is useful to know that there are free online graphic editors, which allow us to play with the photos in many more ways. Sometimes these are useful to prepare the photos before uploading them to Scratch. I recommend Photopea and Pixlr, which are very intuitive.

Ideas and things you could try:

1. Adding elements from another context

2. Bringing to life a sculpture or painting

3. Duplicate elements and play with them

 

You can find inspiration in the projects of this Scratch studio, and I invite you to add your owns there.

Also, I share a step-by-step to learn how to create a project like the first one in this post (where the Scratch cat replaces the Botero cat).

Step 1: We take the photo of the sculpture, we upload it and use it as a backdrop in Scratch. 

Step 2: We open the same image again but as a sprite. Then we have to cut out the body of the statue (we won't need its head) and we can change its color to make it more similar to the orange color of the Scratch cat. 

Step 3: Now we have to edit the Scratch cat sprite, remove its body with the graphics editor, select the head and copy it, return to the statue's sprite, paste the head and adjust it (orientation and size).

Step 4: Finally we only have to program the animation. First we make the sprite totally transparent (set ghost effect to 100), and we set the size and position that it has to have to be right over the cat statue in the background. Then, we wait as long as we want and with a loop we make it appear slowly (decreasing the ghost effect in each iteration).

 




March 19, 2020

Hack your window with Scratch. Family creative learning activity

Update (April 7th, 2020): Check the Hack Your Window studio to see lots of examples that people are sharing. I'm sure they'll give you ideas! You can also watch this videotutorial by Frank Sabaté (it's in Catalan but very visual!) where the idea is explained step by step.

Update (April 14th, 2020): Here a videotutorial in English by El Rincón de Primaria.
Now that, because of the confinement due to the COVID19, we look at the world from the window, I propose a family creative learning activity with Scratch.

Take a picture of a window at home, and using Scratch, turn it into a computer game, or into an animated story, an art project, etc. The possibilities are endless, you just have to imagine.

I'm going to share three examples and give you some advice.

Example 1:


Example 2:


Example 3:


Okay, this is very cool, but how do we do it?

If this is the first time you've heard of Scratch, visit the site, register, click "Create", and start exploring a little. You can do some of the tutorials that the website itself will propose, and you'll see that it's very simple!

If you already know a bit about Scratch, here I share with you some very simple steps to turn a picture of a window into a digital animation. But these are just examples, let your imagination fly!

1. We have already taken the picture. Now what?

Go to Scratch, create a new project, and add your photo as a new sprite from your computer. Now, go to "costumes", and with the paint editor you can modify the photo, for example we can cut out the inside part of the window, to make things happen inside. Then you can program this sprite to center it and send it to the front (so the other sprites will pass behind).



2. We add a stage and other sprites

In this example we have emptied the inside part of the window, and now we can put in some more beautiful views. We could use a photo of us, a drawing, a landscape from Internet, etc. Add it to the Scratch project as a stage, then add other sprites! In this example I added two birds and a wizard.


3. Create your game or story

When you have all the elements, now comes the really fun part: explore how to program them to make things happen in your project. For example, make the sprites move, talk, draw... Don't be afraid of making mistakes! For example, my birds move like this:

Important: when you finish your project, share it on the Scratch website, and then add it to this studio, so we can see it, and your project can inspire others.

And if you share it on social networks, please use the hashtags
#HackYourWindow i #ScratchAtHome.


Hackea tu ventana con Scratch. Actividad creativa en familia

Ahora que, debido al confinamiento por el COVID19, nos miramos el mundo desde la ventana, os propongo una actividad familiar creativa con Scratch.

Haced una foto de una ventana de casa, y utilizando Scratch, convertidla en un videojuego, o en una historia animada, un proyecto artístico, etc. Las posibilidades son infinitas, sólo hay que echarle imaginación.

Os comparto tres ejemplos y os doy unos consejos.

Ejemplo 1:


Ejemplo 2:


Ejemplo 3:


De acuerdo, esto es muy guay, pero como lo hacemos?

Si es la primera vez que oís hablar de Scratch, visitad la web, registraros, haced clic en "Crear", y empezad a explorar un poco. Podéis hacer alguno de los tutoriales que la misma web os propondrá. ¡Ya veréis que es muy sencillo!

Si ya conocéis un poco Scratch, aquí os comparto unos pasos muy sencillos para convertir una fotografía de una ventana en una animación digital. ¡Pero sólo son ejemplos, haced volar vuestra imaginación!

1. Ya hemos hecho la foto. Y ahora qué?

Id a Scratch, cread un proyecto nuevo, y añadid vuestra foto como un nuevo personaje desde vuestro ordenador. Ahora, id a "disfraces", y con el editor de dibujo podéis modificar la foto, por ejemplo podemos recortar la parte interior de la ventana, para poder hacer que pasen cosas dentro. Después podéis programar este personaje para centrarlo y enviarlo al frente (así los otros personajes pasarán por detrás).



2. Añadimos un escenario y otros personajes

En este ejemplo hemos vaciado la ventana, y ahora podemos poner unas vistas más bonitas. Podríamos utilizar una foto nuestra, un dibujo, un paisaje de internet, etc. Añadidla al proyecto Scratch como escenario. ¡Después añadid otros personajes! En este ejemplo yo he añadido dos pájaros y un mago.


3. Crea tu juego o historia

Cuando ya tenéis todos los elementos que queríais, ahora viene lo más divertido: explorad cómo programarlos para hacer que pasen cosas en vuestro proyecto. Por ejemplo haced que los personajes se muevan, que hablen, que dibujen... ¡No tengáis miedo a equivocaros! Por ejemplo, mis pájaros se mueven así:


Importante: cuando hayáis terminado vuestro proyecto, compartidlo en la web de Scratch, y luego añadidlo a esta galería, así los podremos ir viendo, y vuestro proyecto podrá inspirar a otros.

Y si lo compartís por redes sociales, utilizad los hashtags #HackYourWindow i #ScratchAtHome.


Hackeja la teva finestra amb Scratch. Activitat creativa en família

Ara que, degut al confinament pel COVID19, ens mirem el món des de la finestra, us proposo una activitat familiar creativa per fer amb Scratch. 

Feu una foto d'una finestra de casa, i fent servir Scratch, convertiu-la en un videojoc, o en una història animada, un projecte artístic, etc. Les possibilitats són infinites, només cal posar-hi imaginació.

Us comparteixo tres exemples i us dono uns consells.

Exemple 1:


Exemple 2:


Exemple 3:


D'acord, això és molt guai, però com ho fem?

Si és el primer cop que sentiu a parlar de Scratch, visiteu la web, registreu-vos, feu clic a "Crear", i comenceu a explorar una mica. Podeu fer algun dels tutorials que la mateixa web us proposarà. Ja veureu que és molt senzill!

Si ja coneixeu una mica Scratch, aquí us comparteixo uns passos molt senzills per convertit una fotografia d'una finestra en una animació digital. Però només són exemples, feu volar la vostra imaginació!

1. Ja hem fet la foto. I ara què? 

Aneu a Scratch, creeu un projecte nou, i afegiu la vostra foto com a personatge des del vostre ordinador. Ara, aneu a "vestits", i amb l'editor de dibuix podeu modificar la foto, per exemple retallar la part interior de la finestra, per poder fer que hi passin coses a dins. Després podeu programar aquest personatge per centrar-lo i enviar-lo al davant (així els altres personatges passaran per darrere).



2. Afegim un escenari i altres personatges

En aquest exemple hem buidat la finestra, i ara podem posar-hi unes vistes més boniques. Podem fer servir una foto nostra, un dibuix, un paisatge d'internet, etc. Afegiu-lo al projecte Scratch com a escenari. Després afegiu altres personatges! En aquest exemple jo hi he afegit dos ocells i un mag.


3. Crea el teu joc o història

Quan ja tens tots els elements que volies, ara ve el més divertit: exploreu com programar-los per fer que passin coses en el vostre projecte. Per exemple fer que els personatges es moguin, que parlin, que dibuixin... No tingueu por a equivocar-vos! Per exemple, els meus ocells es mouen així:


Important: quan acabeu el vostre projecte, compartiu-lo a la web de Scratch, i després afegiu-lo a aquesta galeria, així els podrem anar veient, i el vostre projecte en podrà inspirar d'altres.

I si el compartiu per xarxes socials, feu servir els hashtags #HackYourWindow i #ScratchAtHome.



March 17, 2020

Bringing to life visual poems with Scratch


In this post I will show you how to combine poetry, visual arts and playful coding. More specifically, I want to show you how to use Scratch to bring some visual poems to life.

Visual poetry is basically an experimental artistic expression that constitutes a genre of its own. It can be placed in the frontier of painting, photography, design, writing, and even poetic action. In short, it is a poetic creation based on visual resources.

In this small project we will bring to life three beautiful visual poems by Joan Brossa, a famous Catalan poet.

For each poem we will follow the same procedure. We will (1) look at the original poem, (2) see the final effect in Scratch, and then (3) see some ideas and tips for coding the animation. These are not complete tutorials, but rather stimuli for you to look for visual poems or make your own, and then create animations with Scratch to bring them to life.

If we imagine it as an educational activity (I prefer "learning experience"), it is ideal for simultaneously learning literature, art and technology. It is adaptable to many ages, as we can choose easier or harder poems to bring to life.

Poem 1

Original:

Scratch animation:


Scratch tips: 

To achieve this effect, the first thing I did is to edit the image of the original poem and delete all the letters inside the piano. Then I put the image of the empty piano into Scratch (as a sprite), and painted the white surfaces in transparent color.

Then I used only one more sprite, with the particularity that its "costumes" are all the letters of the alphabet. Scratch has some pre-designed sprites that are letters, but they don't have "costumes". For language, literature and poetry projects it is very useful to have all the letters of the alphabet as "costumes" for a single sprite. If Scratch had a sprite with these characteristics it would be very useful. In fact, just as there are extensions for drawing or making music, it would be very interesting if Scratch included an extension for language constructions (playing with letters and words).

For these reasons I just mentioned, I had to create a new sprite, with the letters of the alphabet as costumes. That was a bit tricky, having to download images of all the letters and put them into a single sprite. The good news is that I already did it, so you can reuse my sprite (you'll find the link to my Scratch project at the end of the post).

Once we have the piano-sprite and the alphabet-sprite, the idea is to use clones to generate many letters that originate from a single point (the center of the stage) and move in random directions, bouncing when they hit the piano.

For the bounces, just use the sensor that lets you know if a sprite is touching another one.

In my project, the alphabet-sprite creates 200 clones of itself and each clone executes this script:


Poem 2

Original:


Scratch animation:


Scratch tips: 

In this case the animation is quite easy. This time I used seven sprites: one for the umbrella, and the other six are for each word line ("pluja" means "rain" in Catalan; the original poem uses the word "lluvia", which is "rain" in Spanish).

To achieve the effect you have to play with layers and transparency. The umbrella-sprite is quite special. It covers the whole stage, and it's shaped like this (the squared surface is transparent):


If we put this umbrella-sprite on the front layer, and move the word-lines-sprites in the back (previously tilted), we will get the desired effect. The scripts are really easy. You can check them in my Scratch project (see link at the end).

Poem 3

Original:
Scratch animation:


Scratch tips: 

The last poem also has a pretty simple animation. It was more time consuming to get the sprites than not to program them. We have a sprite for each letter of "llibertat" (the Catalan word for "freedom"). But I wanted to keep the exact same font of the original poem, so I used an image editor to cut out each of the letters. These letters are simply placed in a curve, respecting the size (which decreases).

The beautiful aspect of the programming was to get the effect of the birds. I used a single sprite-bird (you can draw a bird and create several costumes, or reuse one of the many birs-sprites that you can find in the Scratch community), which clones itself to get the flock. Each bird executes exactly the same code, but with a couple of random parameters (size and direction). Here below you have that script:


Finally, here you can see the Scratch project with the 3 visual poems all together, plus music by Chopin:

 Check the scripts and feel free to remix the project here.

Reimagine
Visual poetry gives us infinite ways to experiment with Scratch. Instead of using famous poems, try to create your own. Or you can also add music and sound effects. Or you can even add interactivity using devices like Makey-Makey or micro:bit.