javascript

Peer 2 Peer & midterm proposition

This week, I’ve been struggling with peer to peer connection. After many hours and Abhisheck’s help, I managed to create a chat, that can connect many users.

To call a person, the user must know their ID and use it to connect.

In the meantime, I started thinking of my midterm project.

I decided to work on my last week’s project. I want to create fully working video chat, where the user has the ability to add some filters to the videos and snap it. I was also thinking about creating an online webcam gif application.

I will try to work on that idea as well.

Here’s a LINK to my last week’s project

screen-shot-2016-10-10-at-11-23-09-pm screen-shot-2016-10-10-at-11-23-19-pm screen-shot-2016-10-10-at-11-23-29-pm screen-shot-2016-10-10-at-11-23-39-pm screen-shot-2016-10-10-at-11-23-48-pm screen-shot-2016-10-10-at-11-24-12-pm

 

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