Introduction to Computational Media

  • Witchcraft: from fiction to fact

    My main inspiration for this project is a recently released book that collects several essays written by Silvia Federicci about Witches and Witch-Hunt and their relationship with the development of patriarchy and capitalism. What drove my attention about these topic is that something I thought was over in the Middle Age, is still happening in many parts of the world. Innocent people, mostly elderly women are being accused of witchcraft. The consequences of practicing ‘evil magic’ are deathly.

    With this in mind, I wanted to use data visualization to tell these stories. Digging deeper on this topic it was very difficult to find more information about it, and almost impossible to find a rich data set that could help me expose this findings to a general audience through visualization.

    There is more information available about the 1500 - 1600 periods of witch killing, but the numbers had nothing to do with the contemporary facts. Through some first visualization experiments I realized I needed to cross this information with some other source in order to make it valuable.

    While investigating about the modern witch hunts, the most reliable information I was able to find where news articles that told short stories and facts about witch killings. So I decided to build my own database logging every piece of news I could find. With it, I took note of the dates of the articles, the source and the under which categories this news where divided. In this process, I found several articles that where catalogued as “weird stuff” or other synonyms that to me, sound wrong.

    With about 20 news articles collected I did several experimentations with text analysis. But again, I was missing something to compare and show something more engaging to my audience. So I took at step back and thought what do people associate with witches. Pop culture and the image of a old green lady with a pointy hat flying on a broom is usually what comes to many minds when they think about witches.

    Following the experiments with text analysis, I decided to search for something that could pair the headlines of the articles I’ve collected. Besides the visual images about witches in pop culture witchcraft also manifests through spells; short sentences that rhyme and when chanted out loud can produce magical effectsTo pair the headlines of the articles I collected spells said in pop culture occidental classics such as Sabrina the Teenage Witch, Harry Potter, Bewitched, among others.

    The goal was to create a visually compelling effect between that transformed a spell into a news headline. In other words, show the shift from fiction to factual that would re-direct the discourse from popular witchcraft concepts to the real witch-hunts happening today. This is my final result:

    See source code

  • Final Project Proposal

    During the past year I have been asking myself how did humanity chose that men was going to be the dominant gender in society. In which point did women gained a secondary role and begun being oppressed by the patriarchy. I came across to a compilation of essays by Silvia Federici: Witches Witch-Hunting and Women where I found what it could be an answer to my question. In her book, she reviews the connection between the rise of capitalism and female oppression, while telling the story of witches and witch hunting, torture and murder.

    “It is in this context that the attack of women as ‘witches’ should be located. Because of their unique relation to the process of reproduction, women in many capitalist societies have been credited with a special understanding of the secrets of nature, presumably  enabling them to procure life and death and discover the hidden property of things. Practicing magic (as healers, folk doctors, herbalists, midwives, makers of love philters) was also for many women a source of employment and undoubtedly a source of power, although it exposed them to revenge when their remedies failed.

    I feel that a very effective way to communicate these findings is by revealing actual data. For the final project of this course I intend to visualize a dataset of ‘witch’ hunt cases to demonstrate how what it seems a fairy tale, fiction or something from the past, is still happening nowadays.

    So far I found one article published in the year 2003 that contains an analysis of surveys performed in Tanzania’s villages. The datasets compares local rainfall variation to identify the impact of income shocks on murder in a rural Tanzanian district.

    Although this article is very powerful in terms of the year published, the data is very quantitative. There is also an interesting table I found in wikipedia that has less cases dated for the 1600, but contain the description of each killed witch. 

    I would like to visualize one of the datasets presented, or maybe combine both (or look make a deeper research) in order to put this information out there available for many people to engage. 

  • Censorship

    Loading media into p5.js makes sense when there is a way to read the information given and use it for something. In this sketch I used the ability of computational media to read the color information of every pixel of a determined image. After gathering the RGB code of the pixels where the mouse is positioned I used the mousePressed function to draw a big rectangle on top of the image in order to pixelate it as if it was censored. I have encountered many cases where social media networks such as Instagram decide that a women’s nipple is sexual content and different to a male one. So in this sketch the interaction will lead you to pixelate and ‘protect’ yourself from this illegal content.

    See sketch

  • Starships bar graph

    My aim was to use the Star Wars Api SWAPI and draw the information about the starships. I wanted to draw an inner circle for the crew capacity and a outer circle for the passenger capacity. This way, I could compare the sizes of each starship in relation to the amount of people (or other universe habitants) they could carry, as well as the total starships. Besides not being able to properly read the data, the numbers where either to big or to small to show draw the circles in the canvas. Not even with the map or constrain function I was able to normalize the numbers. 

    After giving up on the idea of drawing the crew and passengers numbers, I decided to make a simple bar graph that showed the length of each starships and their names. I was only able to show one of the ships for this sketch. Hopefully I can achieve my initial goal with a second iteration of the sketch. 


    See my not ready sketch :(

  • Fridge Word Magnets

    Following my previous work with random phrases and the inspiration from the famous word magnets, I made a p5 version of it. In my sketch you are able to input random words and after you feel you have enough of them, you can paste them around the fridge. I used the input DOM element to allow the user to write the words. Even though if you intuitively press the Enter key, the words will be added to the array. But in order to make it easier to use, I also added a button to the interface to add the words to the array. For it to be more aesthetically appealing and have a better look, I loaded a fridge image into the sketch. To enhance even more the feel of the magnets, I added a slight random rotation for each of the words that you add.

    See sketch

    What is missing now is the possibility to move the words once you have them ‘on the fridge’, allowing to build phrases that make more sense, or not. But for now, I think the game is to be somehow surprised with the random order in which the words appear as you click the mouse around the screen.

  • Random Phrasing

    Inspired by the weird phrases that typeface designers use to showcase the letters such as "The quick brown fox jumps over the lazy dog". The last contains every letter of the english alphabet so people can see the how the typeface will look. But in google fonts they use shorter ones that do not contain every letter, but a handful of them. So I started by making an array with all the words of one of these phrases. With this I wanted to make something similar to the fridge magnets that have words and you can arrange them to invent phrases. Instead of dragging them around the fridge, the words would appear at the mouse position randomly so you could 'paint' with them and see what other random phrases you could come up. 

    It didn't work as I wanted because the words are continuously randomizing themselves and the sketch looks crazy, but I think I figured what I'm supposed to do in order to fix it.  

    See sketch

  • Bouncing Strings

    Starting from the creepy smile faces class example, I transformed them into a series of flexible strings. The bouncing effect is given by the Y position of the mouse in order to simulate a hand playing multiple strings, like a guitar. I made a function that draws the flexible lines twice with different parameters. And used a for loop to build the rules for these strings. I also added some shiny colors to tell apart the different lines on the sketch. The R channel of this color is controlled by the X position of the mouse making crispy combination between the two.

    See sketch


  • Double algorythmic artwork

    For this first two-person-programming experience we started by understanding the 10 Print example and playing around with it independently. We then met and shared some previous sketches of buttons and sliders and figured out how to insert them in the sketch. After this first attempt, we each came up with different results:

    My original sketch 

    Defne's original sketch 

    We met to compare our sketches and combine them. With some difficulties on combining snippets of code which had been done with different logics, we worked our way into making a sketch that was aesthetically pleasing for both:

    Final sketch

    We also encounter in the process a lot of weird results on our code, some that looked better than others, and some that looked more like errors than an intentional sketch. We kept this one. 

  • Textile drawing

    For this assignment I wanted to use the classic bouncing ball. I started my sketch with one of p5 web's example to figure out the math around the bouncing feature of an ellipse, which I find it's the most difficult part to code. First thing I did was to make sure the ellipses stayed in the canvas. I spent some time just staring how the path of the ellipse would start making a pattern that looked like a textile weaving. With this in mind, I made the mouse interaction, the 'weaving tool'. The x position changes the stroke weight of the ellipse, allowing the animation to draw mainly colored 'stitches' or moon-shaped ones. Everything else in the sketch is set to random, so whenever you refresh it, it will randomly pick a color, the initial position of the ellipse and the angle of the direction of drawing.

    See sketch


  • Bojack in p5.js

    For me, computation is like a reachable parallel universe. A space to make almost anything you can imagine and that it is not impossible to reach. It may require some time, but things can always get done. I was (and still am) particularly surprised by the sorcerer characteristic that computational media has. If properly hidden, it is the perfect tool to achieve the ‘movie magic’ to impress an audience. This cool thing about this is that this way of impression builds a special engagement between the audience and the ‘artwork’. Last year I was able to prove this by myself when I collaborated in the design and implementation of an interactive installation about neuroscience. Without the goal to educate the people who experienced the installation, I was able to corroborate how after visiting the room, a tiny awareness about the neural network the piece was about sparked among the visitors. In this case, instead of trying to understand a complex scientific paper filled with unintelligible pictures and data tables, we brought new findings in neuroscience to the general public. In this course I would like to continue to develop similar exercises and transform interesting topics in entertaining and impressive experiences.


    When creating this first sketch in p5.js I felt like doing a tedious hand-made craft. I thought that the cartoon I chose was going to be easier than I thought, but I guess that is something that usually happens. I say a hand-made craft because of the process of building each figures felt super slow compared to making the same figures in a software like Adobe Illustrator. I know there are a thing called variables to make some processes easier, like defining a color so that then you can write just ‘cherry red’ instead of ‘(217, 25, 82)’, but I’m not sure how to use them properly and I’m expecting to find out soon. Also, by the end of the building of BoJack I gave up on some arcs which I couldn’t figure how to put in the right position and angle as desired. I commented them to someday come back to them and figure them out.

  • +1 929 3818418
  • This email address is being protected from spambots. You need JavaScript enabled to view it.