Interactive News Map

This project was originally a data visualization project that aimed to showcase the diversity that really dominates at ITP. Each circle represented the number of people that are from that specific Country. We took this idea and developed it further and decided that because of all the political madness that was going on in the USA during the elections period, no one paid much attention to all the news going on around the world. Therefore, the idea is that it is important to always know what is going on outside your own little bubble. This map is used as a platform that allows you to watch the news (and other videos) by clicking on a specific Country.

After we user tested the project, most of our users told us that it would be better to focus on the story we are trying to say and add more videos for each country rather than spend time creating a zoom effect that we originally were thinking of creating. Most people also liked the fact that you could see the videos popping up in this context of the world map. They liked that they were able to view the rest of the world while looking at one video rather than having to zoom in and out. Therefore, for our final, we focused mainly on the content of the map, and made sure to make it as simple as possible in order for people to know what is happening when looking at it. We added the “about us” page and a “submit your video” tab in order for people to better understand our story and how we would like to expand this further into a global platform where people can upload their video and see it instantaneously on the map. In addition, we added more video for each country and added back and forward arrows.

In the future, we would like to make this 3d and also add cities in our map because some countries are either too big to identify one piece of news to it, or some countries such as Cyprus are divided. For example, the news in Ohio might be different from the news in New York. This is also an interesting concept to think about…How the news even if they come from the same country can change depending where exactly you are in that country (north, south, west, east). People could really understand the different point of views and where do these come from. I belive this concept has a lot of potential and can be very educational.

There are a lot of questions to be asked and a lot of questions to be answered for further developing this project, but I believe that this should be a platform that is currated and gives people the freedom and the voice to upload their own personal videos, not videos from news sources but personal footage taken from protests or any “scenes” happening in each city that deal with serious issues (political, environmental, social).

Code: https://github.com/alexiak24/itpmap

Experimenting with Kinect

My original final project idea was to create some kind of interactive movement experience using the Kinect. I thought about tracking peoples’ walks and explore how walking in a certain way can tell a lot about someone’s personality. I started experimenting in p5 and started thinking how I would want to make this look visually. I started sketching simple lines and thought about maybe creating a canvas where each line  represents each person’s walk. In the third image you can see that every time the mouse pauses, a cyrcle is drawn and slowly grows depending on how long the mouse is paused in the same position. Also if you drag the mouse faster a thick line is formed and if you drag the mouse slower a thin line is formed. My original thought was if I combined this with the kinectron depending on how big the cyrcle is or how thick the lines are one could tell how fast someone is walking and whether if they pause between steps and for how long. However, when I tried using the program, even with simple lines it seemed like it would freeze and I couldn’t really get the result I wanted. However I intend to explore this idea of movement tracking in the future 🙂

Kinectron Code: https://alpha.editor.p5js.org/alexiak/sketches/HJNWATvZe

ITP Map

For my data visualization project I decided to create a map of ITP. I sent a google form to the ITP class of 2018 and I received 60 responses (which is half of our class). I tried linking the google form data directly to P5 through our professor’s video tutorial but I couldn’t make it work so I decided to manually create a JSON file with all the information. What was really hard was mapping the latitude and longitude points with pixels.

screen-shot-2016-10-27-at-3-35-17-pmscreen-shot-2016-10-25-at-1-54-27-pm

screen-shot-2016-10-27-at-3-26-41-pm

DOM – Optical Illusion

I was inspired by this giph I found on giphy and wanted to re-create this optical illusion for this week’s assignemnt. It was a really challenging because as the squares rotate the background changes as well from black to white and the border is removed. It is interesting that we are starting to explore the P5js libraries. My issue with this assignment was that every time the color changes sometimes it doesn’t still have the same effect and I’m not sure why.

via GIPHY

Code: https://alpha.editor.p5js.org/

Under the Sea

For this week’s assignment I decided to create an animated representation of the ocean. I love snorkeling, so I wanted to represent the variety of colors and sizes that fish have in this week’s chapter of arrays. What was the hardest part of the assignment was figuring out how to make the fish reach the width and come back. I used translate to change the position of the x and y coordinates and push and pop to achieve this. I am thinking of developing this into a game in the future. Maybe I could bring out a shark where the user’s goal will be to avoid the shark by moving the fish around.

Coke melodies

Inspired by the ICM+PCom synthesis I wanted to create a coke piano since I am a huge fan of coca-cola. I used melodies from coke ads and coke jingles as well as the characteristic sound of a coke can being opened and poured in a glass. I sticked a pressure sensor on each can so every time one presses the sensor a different coke sound is played. Unfortunately, the sound that was playing from P5 was a little bit distorted and replayed the sound 2 times on top of each other. I tried increasing the delay and it helped a little bit but not completely.

Coke melodies with arduino from ALEXIA KYRIAKOPOULOU on Vimeo.

int sensorPin = A0; // select the input pin for the potentiometer
int sensorPin2= A1;
int sensorPin3 = A2;
// select the pin for the LED
int sensorValue; // variable to store the value coming from the sensor
int sensorValue2;
int sensorValue3;

void setup() {
// declare the ledPin as an OUTPUT:
Serial.begin(9600);
pinMode(sensorPin, INPUT);
pinMode(sensorPin2, INPUT);
pinMode(sensorPin3, INPUT);
}

void loop() {
// read the value from the sensor:
sensorValue = analogRead(sensorPin);
int mappedForce = map(sensorValue, 0, 1023, 0, 255);
Serial.print(mappedForce);
Serial.print(“,”);

sensorValue2 = analogRead(sensorPin2);
int mappedForce2 = map(sensorValue2, 0, 1023, 0, 255);
Serial.print(mappedForce2);
Serial.print(“,”);

sensorValue3 = analogRead(sensorPin3);
int mappedForce3 = map(sensorValue3, 0, 1023, 0, 255);
Serial.println(mappedForce3);

delay(1500);

Link to P5 code

Pong Game – Week 2 + Week 4

For week 2 I tried to explore how I could create a bouncing ball and thought about recreating one of my favorite games from when I was a child, the “pong game”. It was challenging to think of the if statements in order for the ball to bounce back every time it hits the paddle as well as using the “keyPressed” function to control the right paddle with the arrows and the keyboard characters “Q” and “A” to control the left paddle. What was also really hard was creating the movement of the bouncing ball and I used only a specific angle for it to move around the canvas for this stage. It was really hard for me to think how I could make make the ball move only inside the “walls” of the canvas and with a random angle every time but will explore how I could work on my pong game and add more features later on.

Code: https://alpha.editor.p5js.org/projects/HkmmS9gT

For week 4 we could work on a previous project and develop it so I took the opportunity to add more features to my pong game. I added sound and a “Game over” sign every time the ball misses the paddle and also randomized the ball’s angle.

Code: https://alpha.editor.p5js.org/projects/HkSPcf70

Shapes & Color

How Computational Media applies to your interests?

My background is in marketing communications and I worked at Ogilvy & Mather as a Digital Account executive. I worked with designers and developers to create several digital projects (websites, apps etc.) and was always inspired and intrigued by the whole development process. I was always eager to get a hands on experience in coding and especially creative coding. Since I was very young I loved experimenting with art and ever since I went to College and started working I stopped exploring my passion and this zeal I always had for creation so I’m glad to be back!!

It’s interesting to explore this totally new format of creativity with p5 in our ICM class. What I would love to create would be probably something interactive with video and sound. Through exploring the p5 gallery one of the projects that I was inspired from was The “Face Sound Visualization” by Nithi Prasanpanich. I loved how she integrated sound in this project and thought that the design of the interactive face was really cool.

screen-shot-2016-09-16-at-6-10-51-pm

Me exploring the Face Sound Visualization project by Nithi Prasanpanich, 2015


My”Butterfly”

The first project was really a challenge for me since I have no coding or design experience! It took me some time to get used to the language and tried to understand how this program is “thinking.” I wanted to create a butterfly and started drawing the first triangle for the wings. It was hard for me at first to understand how the X, Y positioning really works so I had to experiment with the shapes in the P5 reference page and went back and adjusted my numbers a couple of times. When I finally started working on the second wing, I had trouble making it symmetrical with the first one and was wondering if there would be a function that could make shapes reflect one another automatically. Would be interesting to find out later in class 🙂

screen-shot-2016-09-15-at-5-01-28-pm

screen-shot-2016-09-15-at-4-58-49-pm

After experimenting a lot with creating different colors with RGB I finally finished my first drawing and I am proud of it!!
screen-shot-2016-09-15-at-4-40-22-pm