About marcela

Posts by marcela:

Painting program

Screen Shot 2015-09-15 at 4.56.40 PM

At our second classes, we continued discovering p5. Mostly, we focused on creating variables, initializing them, varying and finally using them.

For our second assignment, we were supposed to create a sketch that includes one element controlled by the mouse, element that changes over time, independently of the mouse and an element that is different every time you run the sketch.

I decided to focus on creating painting program, which would include multiple functions.

I started from creating really basic, ellipse-shaped white pencil, which could create very simple, white marks on a black canvas.Screen Shot 2015-09-09 at 2.01.45 PM

Next, I started to experiment with different shapes.Screen Shot 2015-09-09 at 2.03.57 PM

Then, I experimented with colors:

Screen Shot 2015-09-09 at 2.26.35 PM

Screen Shot 2015-09-09 at 2.24.20 PMWhy shouldn’t I try to change the size?

Finally, the decision – Let’s make a painting program!

I started with simple color changing function :

Screen Shot 2015-09-12 at 9.59.54 PM

Screen Shot 2015-09-12 at 8.19.37 PM

Added some extra functions like: changing tip size, picking the random color (R button), and erasing what we already drew (E button).

Finally, I ended up with the idea of changing the color of the canvas. For that I created 3 sliders which control the red, green and blue lights, each ranging from 0 to the maximum of 255.

To create sliders I used DOM createSlider() function. I didn’t like their appearance though, so I slightly changed their look in HTML document.

Screen Shot 2015-09-15 at 12.54.05 PM

There was a bug. I didn’t like the fact that I paint ‘under’ my sliders. To eliminate that I created a rectangle placed under sliders, merging its color with the background’s color.

Screen Shot 2015-09-15 at 8.10.12 PM

You can play with it HERE !


I’ve sent it to my dad, and here’s what he did 😀


Be creative and Enjoy!

First Arduino Kit

I am so excited! I just got my first Arduino Kit. As a photographer at heart, I decided to take some pictures and share them on my blog (till all pieces are still safe in the box, nothing is lost and everything smells brand new)!

Here’s how the Kit looks like:

Arduino KitArduino KitArduino Kit  Arduino Kit Arduino Kit

Arduino KitArduino Kit Arduino Kit

The set includes:

  • Arduino Projects Book
  • Arduino Uno – a heart of my future projects,
  • USB cable – connects Arduino to computer
  • Breadboard – on which I will be able to build electronic circuits,
  • Jumper wires – connect components to each other on the breadboard, and the Arduino,
  • Battery snap – to connect 9V battery to power leads,
  • Photoresistor- (photocell / light dependent resistor) – Variable resistor that changes its resistance based on the amount of light that falls on its face,
  • Potentiometer – variable resistor with three pins,
  • Pushbutton – close a circuit when pressed,
  • Temperature sensor – changes its voltage output depending on the temp.of the component,
  • Tilt sensor – switch, that opens and closes depending on its orientation,
  • 1 Liquid Crystal Display (LCD) – display based on liquid crystals,
  • Light Emitting Diodes (LED) – diodes illuminating when electricity passes through it,
  • DC motor – converts electrical energy into mechanical energy,
  • Servo motor – geared motor that can only rotate 180 degrees.
  • Piezo – electrical component that can be used to detect vibrations and create noises,
  • H-bridge- circuit that allows to control the polarity of the voltage applied to load (usually motor),
  • Optocoupler – allows to connect two circuits that don’t share a common power supply,
  • Transistor – three legged device that operates as en electronic switch,
  • Capacitors – store and release energy in a circuit,
  • Diode- ensures electricity only flows in one direction
  • Gels – to filter out different wavelengths of light,
  • Male header pins – fit into female socket. help connecting things ,
  • Resistors – resist the flow of electrical energy in a circuit

After creating this handout and studying it a little bit, I feel a little bit overwhelmed, but still very motivated and excited!

Can’t wait for my first project! Wish me luck!


What is Interaction?


For our 1st week assignment, we were supposed to read the first two chapters of ‘The Art of Interactive Design, Physical interaction’ by Crawford, and the web article ‘The Future Of Interaction Design’. I really enjoyed both of the readings, even though it took me ages to translate all the fancy words I didn’t understand. (‘nothingburger’? really?!).

The Art of Interactive Design’ focuses on Crawford’s meaning of Interactivity. He claims that this overused term is widely misunderstood by humans.  To explain the real meaning of interactivity, he provides an interesting example of ‘two actors, who alternately listen, think and speak’. It cannot be called interaction, if someone just listens, or just speaks. The interaction needs a deeper sense. Providing an example of ‘human-fridge interaction‘ (when every time you open a refrigerator the light turns on),  author tries to convince us, that interaction is a whole, more complex set of actions. He is pointing the importance of interaction rather than just a reaction. Interaction involves three factors:  listening, thinking and speaking. All that three steps are equally important to succeed. It’s good to remember that real interaction engages the user completely and it’s supposed to create an experience.

Another material provided to us is Bret Victor’s article titled ‘A Brief Rant On The Future Of Interaction Design’.

Bret focused on interaction between human and digital technology. Mostly, he glorifies the capabilities of human hands.

We live in a three-dimensional world. Our hands are able to rotate, pick up, squeeze objects. Our future though, are tools that he calls ‘Pictures Under Glass’, which involve minimal human interaction. The hands becomes the central component of our Interactive Future.

Bret Victors doesn’t like the Microsoft’s, perfect, idyllic scenario, which envisions a future of relaxed, happy people touching screens to communicate with each other. This not too visionary video shows how limited interaction will be. How human capabilities are going to be limited to just a swipe of a finger.

I gathered some pictures of how the future is going to look like:


If I were about to create my own definition of ‘physical interaction’, I’d say that it is a process of at least two things acting on each other. It doesn’t matter if it’s a human-human, or human-device interaction. Moreover, I think that people should receive physical feedback from the entire environment. To get a best results – not just a vision, but all our senses should be engaged.  That’s what makes a really good physical interaction.

Designers should not forget to design physical interaction as intuitive as it’s possible. They should observe and search for use natural ways we already interact with the environment. Basing on this knowledge, they are able to design more intuitive, easy-to-understand interfaces. Let’s glorify simplicity! It is crucial to minimize the effort the users have to put to interact.

Of course, there are some good example of digital technology that are not interactive. Digital TV, videos, audio systems and DVDs are the most common examples, we are using every day. They are available on a variety of screens and don’t require any active engagement.

Once again, I created a set of pictures visualizing examples of non-interactive digital technology:


First ICM classes

Hello! I’m Marcela! Here’s my first post about my first ICM classes, lectured by Dan O’Sullivan!

At our first classes we started to explore p5, which turned out to be pretty exciting.

Our first task was to create our own screen drawing. After few hours of struggling what to draw, I finally decided to create a fancy puppet. I have to say, it was time consuming. The task wasn’t difficult, but my artistic soul was giving me a hard time.

After drawing shapes of this funny thing, the moment has come to give it some colors. I’m pretty sure that I decolorized the whole composition at least 4 times.

Finally, I just decided to leave it as it is, and enjoy finished homework.

It was a great warm up exercise. I don’t have much experience with programming, but I hope I’ll get better really soon. At least I’ll try my best!

Here’s how my baby looks like:

Screen Shot 2015-09-06 at 3.26.40 AM

Screen Shot 2015-09-06 at 10.12.58 PM Screen Shot 2015-09-06 at 7.52.21 PM


Hope you like it too!