Collaborative Drawing

screen-shot-2016-09-26-at-11-59-02-pm

screen-shot-2016-09-27-at-12-02-58-am

In this week, I was working on creating a collaborative chat.

I had some problems with separating mouse coordinates for each user. After solving this problem, I decided to move my canvas, what obviously caused another problem – the drawing was being created far from the mouse. I have a feeling that I solved it, but any small change in the code might mess it up again, so I rather won’t brag about it.

I keep trying to figure how to draw continuous line when pressing the mouse, but the fact that I have to send and display the drawing from the server makes it a very hard task to complete.

So far I managed to draw straight lines between each ‘click’ of the mouse.

I also added ‘login’ panel & clear button. Still fighting with continuous drawing.

screen-shot-2016-09-27-at-12-00-37-am screen-shot-2016-09-27-at-12-02-21-am screen-shot-2016-09-27-at-12-00-37-am

 

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