Live Web

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

 

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

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