About marcela

Posts by marcela:

FitBit Challenge


For our first assignment, we were supposed to collect our own data and graphically display it in a form of a postcard.

It took me a while to figure what I want to show. I was considering following topics I’m interested in: travels, photography, cultures.

Finally, I came out with the idea to use my Fitbit as a source of my data.

I decided to show how active I was during the previous week.

In my project, I’m using 4 different colors, to differentiate 5 things tracked by fitbit during one day: steps, active minutes, floors and hours of sleep. To be more precise:

  • pink – floors taken,
  • yellow – steps taken,
  • light blue – hours of sleep,
  • dark blue – active hours,
  • orange – miles walked

All dot’s that empty show the minimum of activity I would like to have during  the day.

I show the extra activity by adding dots filled with color.

Lastly, the crossed dot means the lack of activity.

I divided my research into 8 groups. The first seven shows the days of the week, the last one summarizes the past week.

Hopefully I didn’t confuse you.

Here are some pictures I took:

img_2273 img_2274 img_2275 img_2276 img_2277 img_2278


Synonyms & Uppercase


For our firs assignment,  we were supposed to

“Find a source text and manually perform one of the mashup techniques .Create a webpage with the results using some combination of HTML, CSS, and/or JavaScript. Host the page on github pages (or your own server). There is no need for programming for this assignment, it’s just about getting set up in an environment and starting to think about creative ways to play with text. However, you may choose to include animated or interactive elements if you like. Think about creative ways for the page to be “self-documenting”, i.e. instructions for the text mashup, references, etc.”

Since my JavaScript and jQuery skills are rather poor, for my assignment I decided to create two projects, practicing simple commands and events.

I called the 1st project  ‘The synonyms’. It is supposed to turn each word of a given text into its synonyms.

I must say I had many problems with that, since I’m not familiar with using API. Also, I had problem with an array of words, which for some reason reversed their order. Finally, I managed to get something satisfying and get it working.

Here’s the LINK

The second project is a simple ‘Turn your text to Uppercase’ converter.

Here’s the 2nd LINK


Web Self Portrait

After a very nice class, when I realized how much

Our first assignment for Live Web is to create an interactive self portrait, using videos or audio tags along with JavaScript and CSS.

I decided to create a webpage that shows 6 things that I love most (skipping photography).
I dig through my phone, and found some videos, that fit perfectly.

I decided on not showing the control panel and just be able to play the video.
The videos activate when the user hover over the posters.

I still have many things I wanna change, hopefully I’ll manage to fix my bugs soon.






My synchronous website is iScribble – interactive drawing and chatting website.

You can create public or private canvases and share it with many people. In the meantime, you can also chat.

I used to draw there while being in high school. It was a lot of fun back then.

screen-shot-2016-09-13-at-12-36-50-pm screen-shot-2016-09-13-at-12-37-02-pm

Optical Illusions

For my final project, I decided to explore the topic of Op art and an optical illusion. I wanted to find out, if we can achieve similar effect, by coding art that is moving, and by coding art that is a still image, but gives the viewer the impression of movement.

Typically, Op artists used only black and white in order to produce the greatest contrast in their designs, since this contrast causes the greatest confusion for the eye, which struggles to discern which element of the composition is in the foreground and which in the background.


But color was also a focus of attention at times, as in Vasarely’s Plastic Alphabet series (1960-1980). The ways in which color suggests space, and the ways colors contrast with one another, proved fertile areas for experiment.

Vasarely-Gestalt-4 vasarley_89044_3

Feeling inspired, I decided to code my own op-arts.

I divided them to 3 groups:

  • animated ones:

wavespiralblack spiral shock palindrome gif2 gif circles2 gif33



  • static ones:


triangle spiral_snail

  • colorful






Nature of Code Final Proposal

Screen Shot 2016-04-13 at 8.46.03 AM

For my Nature of Code final project, I decided to try my hands at Unity 3D.

I want to create a Coral Reef Scenery, full of abundant variety of living creatures fish, turtles, crabs, sharks etc. I’d like to implement some Nature of Code to the project, by creating different school of fish ( flocking systems), current and random movers ( single fish/ sharks).

I think this is a great opportunity to practice both coding, as visual skills.

I find it a bit challenging, since I haven’t been using Unity a lot, and am not familiar with C#, but with a little help of tutorials I’m sure I will be able to figure something out. So far, I’ve created several flocking systems and some caustic effects. Still working on Sun shafts.

This is what I have so far:

First flocking system:


Flocking system without collider:


First Collider Attempt:


Collider test with a wall

overview collider_test

Finally, creating a reef


caustic effect:



overview2 scene

and here’s what I have so far:


Screen Shot 2016-04-13 at 8.46.03 AM

Screen Shot 2016-04-13 at 8.45.40 AM Screen Shot 2016-04-13 at 9.00.11 AM

Nature of Code Midterm

For my midterm project, I decided to explore relations between attractors & movers in the code. Fortunately, I had zillion ideas, unfortunately, also had way too less skills to achieve the result what I wanted.

Tried to play with fractals, processing and three.js,


Not everything was successful, but I definitely learned a lot


Finally, I decided to focus on the ‘attractor’ example and modify it to make a nice visual effect.

My goal was have a system of movers, flying randomly  on the screen. Then, slowly, they were supposed to create a hidden image.

To make it happen, I prepared a few png & jpg files, that were about to be presented by movers. After importing them into p5, I wrote a nested loop, that iterates through each pixel of the image. Each one, having the RGB value bigger than 0 and smaller than 254 was meant to attract elements of the particle.

Screen Shot 2016-03-23 at 8.54.34 AM Screen Shot 2016-03-23 at 8.54.38 AM

Screen Shot 2016-03-23 at 8.54.45 AM

Once it finally worked, I decided to add some functions to the mouse and keyboard. I just wanted to totally mess up the drawing and redraw it again when the mouse is pressed.

[gif here]

The key changes the image to another one from the array. Once we reach the last one, we go back to the 1st one.

feel free to play


Book Cover vol.2

‘For next week you’ll design a cover for a book of your choice. You can use form, color and typography, but not images. The main constraint is that you need to use a grid system to place elements on the page.’

I’ve picked a book about Beata Pawlikowska’s travel to Amazon Jungle. Decided to create colorful geometrical pattern, which reminds me of colors which amazon tribes use to paint their bodies.

Here’s the whole process of my project:

Screen Shot 2016-03-03 at 7.38.23 PMScreen Shot 2016-03-03 at 8.20.50 PMScreen Shot 2016-03-03 at 8.50.02 PMScreen Shot 2016-03-03 at 9.40.24 PMScreen Shot 2016-03-04 at 2.04.23 PM

Screen Shot 2016-03-04 at 2.06.52 PMScreen Shot 2016-03-04 at 6.29.31 AMScreen Shot 2016-03-04 at 8.10.00 AM

And the result:



unpublished versions:

lqlq tes

Font design


This week we were supposed to design a font based on word and write the word using this typeface.
I decided to design a font created by multiple random thin lines crossing with each other.

Because I was totally wired in, instead of displaying jus a word, I wrote the whole alphabet.
I have to say that the whole process took me a looooong time, but I was really happy with the result.

I decided to use the ‘Gotham’ font, convert it to poly and randomly connect points of the array. Of course JS wasn’t aware of the letter shape, so the lines between random points created a chaos, not a letter shape:

Screen Shot 2016-02-25 at 7.01.16 PM

Screen Shot 2016-02-25 at 7.09.14 PM Screen Shot 2016-02-25 at 7.12.22 PM

to make it look like a letter, I had to draw a poly converted letter again, draw a rect and using fill path rule display just a rectangular shape, with carved letter inside.  Finally I got the result I was looking for:

Screen Shot 2016-02-25 at 8.40.26 PM

This process was pretty crazy, since I had to do it separately for each letter of the alphabet.


Final Result:

al favie copy aal

and the prints:

IMG_8120.JPG IMG_8121.JPG

Self Portrait

scanHere we go! Finally, I finished my Computational Portraiture assignment!

The task was to ‘create a computational portrait. The portrait had to portray a person, in an environment conveying something about them that is not visible to the eye’.

During our class, James and Alexander showed us zillions of amazing tools, we could use to work on our final projects.

I have to say, I was overwhelmed. After long research, many tests, I finally decided to play with Unity 3D.

My idea was to create a 3D self-portrait, placed in my own Wonderland. I wanted to allow the user to walk around my world, so that he could explore more ‘me’ in great details.

As an introduction, I just want to say that I’m a big Tim Burton Fan. He inspires me a lot, so obviously, my work had to be a little bit related to a piece of his art.

One of my favorite movies of his is Alice in Wonderland. Moreover, my middle name is Alice, so naturally my inner wolds looks pretty similar to what he showed in the film.

I have to admit, it’s a little bit trippy and psychedelic, but I guess that’s what I like the most 🙂

First step was to take a 3D scan. Thanks to the best Moon, I was able to get a 3D model of myself. We used Kinect and the software Skanect. I was pretty surprised with the result! The ‘3D me’ turned out to be pretty accurate.


Screen Shot 2016-02-14 at 4.16.46 PM

Screen Shot 2016-02-14 at 4.13.27 PM

scanI was playing around with Maya and Blender. Feeling goofy, using Creo Parametric 2 & Keyshot  I created a Oscar Statuette out of my scan 😉


Then, started working on my scenery:

Screen Shot 2016-02-16 at 7.48.52 PM

Screen Shot 2016-02-18 at 12.53.37 PM

Here’s my beloved horse:


some screenshot from the progress:

Screen Shot 2016-02-27 at 12.07.11 PMScreen Shot 2016-02-27 at 12.07.21 PMScreen Shot 2016-02-27 at 12.07.34 PMScreen Shot 2016-02-27 at 12.07.46 PMScreen Shot 2016-02-27 at 12.08.01 PM

And the first video:

and another one:

Finally, the result:


Final video :

Now, finally, here’s the link where you can play!


Hope you’ll enjoy! 🙂 Have fun! Looking forward to hear your feedbacks!

Also, I’d like to thank James George and Alexander Porter for an amazing class! I wish it would last longer, so I could experience more tools and continue my Unity adventure! Thanks again and looking forward to have some workshops with you in the nearest future!