About marcela

Posts by marcela:

Shark Attacks

dataart

For this week’s assignment, we were supposed to prepare our first data visualization, basing on JSON or xml file.

I spent a lot of time searching for a proper dataset but deeply failed, that is why I decided to create my own one.

Since I was young, I was very interested in Sharks. I couldn’t stop watching ‘Jaws’ on and on again. I figured that I might find some interesting information about these animals.

I came across the ‘Shark Attack’ article on wikipedia and felt very inspired to visualize ‘Confirmed unprovoked shark attacks around the world’.

After creating JSON file, I started experimenting with different shapes, positions and juxtapositions of arrays.

My goal was to map the size of circles with the number of fatal and total attacks. Additionally, I needed to downgrade size of circles displaying total attacks 5 times, since the numbers were extremely high comparing to the numbers of ‘fatal’ attacks.

I used 2 color sets of colors:  shades of red for fatal attacks,  and blue for total attacks.

My JSON file contained 14 groups, consisting:

  • Region of attacks,
  • Number of total attacks
  • Number of fatal attacks
  • Year of last fatality.

I placed each region ( and it’s 2 circles) in random places of concentric circles.

I also planned to sort my sets chronologically –  by the year of the last fatality – but still trying to figure it out.

It was a ver nice task. I think I’ve learned a lot and (OH MAN!) realized that I can’t code in Java… Hopefully I will change it soon!

dataart1 dataart2 dataart3

Chat using node.js & socket.io

screen-shot-2016-09-20-at-12-25-18-am

Assignments: Get up and running with Node.js on Digital Ocean and the example Chat Application. Try to extend it a bit, make it better, more fun.

I had just too many crazy ideas for this homework… Eventually, I ended up trying to understand each line of my code? Did i succeed? – No. Did I improve? – Yes.

Here are a few goals I managed to achieve:

changing the background color each time someone sends a post.

  • adding a footer
  • adding a username
  • adding a transparent box around text

I also managed to randomly change colors of text input and its position, but the visual effect wasn’t satisfying, so I quit the idea…

I tried to spread the text and locate each quote in a different part of the screen but kept moving the whole div instead… same with text colors.

screen-shot-2016-09-19-at-11-24-05-pm screen-shot-2016-09-19-at-11-25-07-pm screen-shot-2016-09-19-at-11-25-49-pmscreen-shot-2016-09-19-at-11-23-34-pm

Finally, I achieved a pretty neat effect:

screen-shot-2016-09-20-at-12-19-45-am screen-shot-2016-09-20-at-12-21-03-am screen-shot-2016-09-20-at-12-22-37-amscreen-shot-2016-09-20-at-12-25-11-amscreen-shot-2016-09-20-at-12-25-18-am

GITHUB LINK

FitBit Challenge

img_2275

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

screen-shot-2016-09-13-at-12-27-41-am

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

screen-shot-2016-09-13-at-12-38-51-am

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.

CHECK IT OUT HERE

screen-shot-2016-09-12-at-10-46-15-pm

screen-shot-2016-09-12-at-10-47-17-pm

screen-shot-2016-09-12-at-10-45-45-pm

 

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.

riu-kiu-c

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

rainbow3wavy

LINK TO GIFS

  • static ones:

dots_linescircles_b_w

triangle spiral_snail

  • colorful

 

rainbooowrainbow3reddy

rainbow2

spiralrainbow

 

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:

gif_flock

Flocking system without collider:

no_collider

First Collider Attempt:

gif_1

Collider test with a wall

overview collider_test

Finally, creating a reef

insta_lapse

caustic effect:

caustic

scenery:

overview2 scene

and here’s what I have so far:

scene2

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,

1

Not everything was successful, but I definitely learned a lot

Untitled-2

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

HERE