Kinetic Interfaces – Assignment 2 (ORI)

Project Title: GooglyEyes

Needless to say, my project for this assignment did not go as planned. I encountered several difficulties along the way, which led me to jot down some questions for our next class. We all learn from our mistakes!

My original project was meant to be a canvas filled with rotating “eyes” who’s pupils would follow around the user’s mouse, as she/he moved it throughout the screen. I later realized we weren’t meant to have interaction on our projects for this week, so I discarded the latter attribute.

My code began looking something like this:

In the screenshot, you will see I had only one eyeball coded into my program so far. Thereafter, I had a rotating function which mapped the mouse of the user and created motion in my animation according to the mouse’s location.

I extracted part of this code from our professor’s examples, w01_demo_04_transformation_forLoop.pde. 

However, I didn’t want the eyeballs’ motions to be linked to a user’s mouse and neither did I want the eyeballs to fill up my canvas. In fact, I wanted them to disappear immediately. So, I changed my code to this:

Unfortunately, with the code above, my eyeballs wouldn’t move at all.

After several attempts at implementing a ‘motion’ factor into my code, referencing the book Processing: A Programming Handbook for Visual Designers and Artists by Casey Reas, I asked Professor Moon to assist me in achieving my ultimate goal: to get my eyeballs to rotate, while using the center of my canvas as its axis.

In the end, my assignment ended up looking like this:

I created various eyeballs, that would be scattered throughout a fraction of my canvas. These eyeballs each have their own user-defined functions (void eye1(), void eye2()…etc.). And finally, I added an audio file (by importing one of processing’s sound libraries) meant to improve the ‘psychedelic’ feeling I was trying to achieve with my assignment.

Watch a video of my final project here.

Kinetic Interfaces – Programming fundamentals – Week 2


A modification of the original ball moving animation that spawned with mouse holding, but a twist. The balls now wrap around and they get progressively faster as they wrap around the edges. I think this is a good twist on the original creation where the balls just bounced around. The template already had an ArrayList of balls for storing them so I simply used the existing architecture. As I figured out how to make the balls warp, I went to see if there was a way I could smoothly make it warp across the border, but it would see that it would require a lot more modification to the code. Including how balls are rendered when they encounter a border. Overall, I enjoyed making this animation.

// Ball.pde

// you can organize your code better by using the tabs!
// modified by Andrew Huang

class Ball {
  float x, y, size;
  color clr;
  float xspeed, yspeed;

  Ball(float tempX, float tempY) {
    x = tempX;
    y = tempY;
    size = random(10, 100);
    clr = color(random(255), random(255), random(255));

    xspeed = random(-2, 5);
    yspeed = random(-2, 5);

  void display() {
    ellipse(x, y, size, size);
  void move() {
    x += xspeed;
    y += yspeed;
  void bounce() { // change to wrap instead
    if (x < 0) {
      //xspeed = -xspeed;
      x = width;
      xspeed -= 5;
    } else if (x > width) {
      //xspeed = -xspeed;
      x = 0;
      xspeed -= 5;
    if (y < 0) {
     // yspeed = -yspeed;
      y = height;
       yspeed -= 5;
    } else if (y > height) {
      //yspeed = -yspeed;
      y = 0;
       yspeed -= 5;

// main. pde

ArrayList<Ball> balls = new ArrayList<Ball>();

void setup() {
  size(500, 600);

void draw() {

  for (int i=0; i<balls.size(); i++) {
    // I suggest this way!
    // much more convenient, right?
    Ball b = balls.get(i); 

  // let's add balls at the mouseX/Y position when mousePressed !
  if (mousePressed) {
    balls.add( new Ball(mouseX, mouseY) );

Week 2: Animations (Moon)

Name: Mehr Un Nisa Javed

Professor: Moon

Date: 16th September’2018


Create a simple sketch (a static image or animation) using User-Defined Functions and Transformation functions
The idea behind this project is that I wanted to do something with circles or eclipse some shapes but then the idea came in my mind that why shouldn’t I make 3D shapes. I found it pretty interesting yet, hard to make. Before stumbling upon this, I made three more animations and I’ll share the link of three of them which I really liked.
It’s here… 1st one 

This one was fairly harder for me as I wanted to make a gif of fish move. For that I had to extract several pictures of the fish and then the fish was able to move. I really want to take this project further and add user defined functions to it so that the requirements can be met.

How the Second animation looks like… 

Here, I faced difficulty writing the code and making the spiral. The float numbers were fairly hard to write. In interaction lab I wasn’t taught/or I don’t remember about float theta = 0. This was hard to figure out but trial and error did help.

The third one… 

This one is pretty simple and I played with a few functions through the prior knowledge.

Final Assignment looks like…


I struggled a lot with recalling the functions of processing as I could not attend the previous two weeks of classes as I was not originally enrolled in the class. I had studied processing last semester in Interaction Lab so I was not purely lost but at some points I was lost as well.

I made a different shapes which would would move like how it happens in the games. I chose this for several reasons and one was that I had done something similar in Interaction Lab. I feel like my final version might be missing something as well just likes my previous versions which I have posted above.

I made 2 3D boxes which were not really easy for me to make as I am totally new to push and pop matrix. I also made 2 spheres , one under the boxes and one on side of the page. I feel like it would have made it more interesting If I would have made the spheres 3D too as well as if they would have made in circles.

Moreover, this has three user defined functions and transformation of shapes as well. I did try to incorporate much of transformation here such as rotation or translation as I find it pretty much fun.


  1. I need to be careful with my brackets
  2. I need to be sure that I wrote the correct file name in processing instead of wasting my time figuring out what went wrong
  3. I wanted to add sounds as well but as I had made several animations for this project so I was really drained at the end
  4. The tutorials and class examples for processing are really useful
  5. The ease of experimenting with things in Processing is an advantage in learning to program.


I believe, If I could have enrolled earlier in the class then, my chances of performing much better in this assignment could have had surely increased (Needed some recall).


Kinetic Interfaces: W2 Assignment – Candle (Sherry)

This week I create a candle in Processing using user-defined functions and transformation functions.

Basically, you can light up the candle by hovering the mouse on it and put it out by holding down the mouse button to release the smoke (carbon dioxide?) and moving to where fire is.

My three user-defined functions:
1. drawCandle(float y):
Since the candle gets shorter as it burns, I set the y-coordinate as a parameter of this function.

2. drawFlame(float x, float y):
I used a semicircle and 20 horizontal lines of different lengths (given by cosine) to draw a natural  flame shape.

I translated the center of the flame to the parameters (x, y) so that this function can be used to draw flames both on the tip of candle and following the cursor. Also I scaled the flame between 1±0.15 randomly every 15 frames to simulate the flickering effect, but here I found that there was always a black line moving up and down on the flame. I haven’t figure out the reason yet.

3.drawSmoke(float r, float x, float y):
I collected the coordinates of vertices by using the below sketch

Then I used transformation functions to rotate and scale it.

So the final sketch looks like this:



Kinetic Interfaces: Assignment Week2 (Emma)

This is the link to my week2 assignment: Click here

In this assignment, we are asked to create a simple sketch (a static image or animation) using at least 3 User-Defined Functions and Transformation functions. In my work, I explored the functions and created an interesting aesthetic experience.

This is the video showing how it looks:

The work is consisted of 3 user-defined functions:

  1. void MyOwnSquare: used to create the blue square arrays in the background

To create this blue square arrays, I use two nested for loops  so that the squares can be  arranged in an ordered way. Also, the blue squares themselves are rotating, which is easy to achieve in rotate(radians(frameCount)) function.

2. void MyOwnRect: used to create the rotating squares following the mouse

This part is a little bit tricky, at first I want to create the effect that, once the user mouseclick, then appears a rotating square at (mousex, mousey), and if the user click elsewhere, more and more rotating squares come up. However, I didn’t achieve it cause I have no idea how to combine void draw() and void mouseClick() together. So I changed my way and create a line of squares. Also, I added a semitransparant rectangle as the background, so there are shadows as I move the mouse.

3. void MyOwnLine: used to create the black lines in the background

I add the third function to create more effects. I also make use of for loops here, so that the line can duplicate in the gap distance I set.


boolean rotate;

void setup() {
  size(500, 500);

void draw() {
  fill(0, 0, 0, 30);
  rect(0, 0, width, height);

  for (int n=0; n<height; n=n+20) {

  color c = color(129, 216, 207); // blue
  float speed = 10;
  for (int x =0; x<width; x=x+50) {
    for (int y =0; y<height; y=y+50) {
      MyOwnSquare (x, y, 10, c, speed);

  if (rotate == true) {
    MyOwnRect(random(5, 50), 255, 255, random(255), 6);

void MyOwnRect(float w, float r, float g, float b, float n) {
  translate(mouseX, mouseY); 
  fill(r, g, b);
  rect(0, 0, w, w, 7); 

void MyOwnSquare(float x, float y, int w, color c, float speed) {
  translate(x, y);
  rotate( radians(frameCount) * speed );
  fill( c ); 
  rect(0, 0, w, w);

void MyOwnLine(float y) {
  translate(0, y);
  line(0, 0, width, 0);

void mouseClicked() {
  rotate = true;

Kinetic Interfaces: Weekly Assignment 2 – Functions and transformations (Peter)


In this week’s assignment, we are practicing transformation functions and user-defined functions, with consideration of modularity and reusability.


So what I created is a clock. Other than reading the local time and presenting it, it has two extra functionalities: speed up and changing background color according to the time. The basic idea is that when it is in the middle of a day, the color will be sky blue, and then it would go darker and darker as the time gets later and later. The functionality of speeding up the clock was just meant to be a testing tool, but later it seems that it adds another layer of interactivity.


I created five user-defined functions, which are listed as below.

drawClockFrame(): This is a simple function that draws the clock frame.

drawClockHand(float w, float h, color c, float startTime, int timeScale, float speedScale): This function is responsible for the clock hands to move as the time goes by. It takes several arguments to determine where the hand currently is, the color, and what hand (min, sec, hour) the hand is, and how fast it should move. Note that it is reusable, all the three hands are implemented with this one single function and are able to represent the actual time.

backGroundColor(float seconds): This function determines the current background color. It takes a time argument, with the range from 0 to 86400, which tell what it is now in a day, then the function changes the background color according to the time.

speedControl(): This function implements the time speed control bar. For test and playability purpose, the speed of time is controllable, with the range from 1 time of actual speed to 2000 times. Note that it just scales up the radians to make this possible, therefore when you move the red ellipse back to the original point, it would tell the actual time again.

textClock(): This function shows the time with text, and also prints out the current speed of time.

Video Demo

Please click this link to access the video.


Kinetic Interfaces – Week2 Assignment OOP (Francie)

In this assignment I create three functions (hiderA, hiderB, and hiderC) that contains different animated geometries. hiderA is a 3D cube rotating on its X and Y axes. hiderB is a shape that is combined by three identical squares. hiderC consists of two squares that overlap each other and rotate on their shared center.

Then in order to add interesting interactions, I create the fourth function which is called scanner. It is a huge square that rotates on one of its corners so that the scanner always covers 1/4 of the canvas. I want to make those three functions randomly change their locations and appear in the white part like being “scanned”.

However, it is a bit difficult to change locations randomly and make the scanner detect them separately in each rotation. So I put this idea aside and turn to mouse interactions.

I define two conditions of the program: a calm one with white background and slow motion, another crazy one with flashy background and extreme fast movements. Every time the screen is clicked, it will switch from one condition to another. Here is the demo video of the assignment:

I spent a lot of time trying to solve the problem of how to make hiderC zoom in and out regularly. At first I naturally came up with scale(). However, it is one-direction change and I did not figure out how to bounce back and forth between a range. Then I tried frameCount and a sequence of number, but they all failed. Suddenly I thought of trigonometric functions, and in the end the sin() worked.

Olesia Ermilova, Week 2 Assignment

For this week’s assignment, I decided to play with the heart shape. I created three hearts by using different methods. The biggest heart was generated through a For loop and complex Pi calculations. The other two are more static, however, the smallest one rotates around the point of translation. The only problem with it is that it leaves a trace after a full circle. So I need to look into that. Overall, it was a quick and nice exercise that helped me to understand how functions work in Processing.

void setup() {

void draw() {
  whyGodWhy(width/2-43, height/2);

void myOwnThing() {
  for (int i=0; i<61; i+=4) {
    float x = 0.25 * (-pow(i,2) + 40*i + 1200)*sin((PI*i)/180);
    float y = -0.25 * (-pow(i,2) + 40*i + 1200)*cos((PI*i)/180);
    fill((x +frameCount) % 360,100,100);
void ohMyGod () {
  translate(width/2-140, height/2-120);
curveVertex(150, 600);
curveVertex(150, 270);
curveVertex(30, 150);
curveVertex(75, 75);
curveVertex(150, 100);
curveVertex(150, 300);

curveVertex(150, 300);
curveVertex(150, 100);
curveVertex(225, 75);
curveVertex(270, 150);
curveVertex(150, 270);
curveVertex(150, 600);

void whyGodWhy(float x, float y) {
  rotate( radians(frameCount) );
vertex(50, 15); 
bezierVertex(50, -5, 90, 5, 50, 40); 
vertex(50, 15); 
bezierVertex(50, -5, 10, 5, 50, 40); 

Week 1 (Moon)

Name: Mehr Un Nisa Javed

Professor: Moon

Date: 10th September’2018



  • Research online about innovative and interesting interfaces. Pick one from your research and prepare a casual presentation for next week.

Interference which I have chosen

World Wildlife Fund’s iPAD App

Reason for Choosing

I chose this because I feel like this is really important for me and others too who believe in protecting endangered species.Therefore, I want to see how innovative interferences can persuade  people.


WWF has provided the users with an interactive experience which would help the users to get closer to the lives of the rhinos, elephants, whales and other species which they fascinate. Users can figure out the lives of the species and work in supporting WWF in an extremely unique way. There are different versions of the app i.e. the version of tiger would help to perform different functions such as cut the bamboos of panda etc.  Thus, unique and fresh stories of the species are updated regularly.

This app shows that the websites and the products for consumers are not the only areas where advances can be seen for the user interferences. The developers of iPAD are continuously working on finding more and more unique ways for their users to interact with the device beyond the idea of justing turnings pages with the fingers.

A new app for the iPad which is also free was released by the World Wildlife Fund which is an amazing example of what the users can do with the interactions based on gestures. The users can use their fingers in order to remove/erase any sort of pictures and use the fingers to move the icebergs. Also, users could use their hands for moving the icebergs so that vital information could be presented. All of these functions are tied in simple and elegant interference which is informational and easy to follow.