Project 3 : From A to Z

This post will show how my project has been done in detail from the very begining to the end. Lets the images speak for themself.

1.Sketches

2.Photoshop-ing

 Final version for printing.

3.Assembling with the help of a thumbtack, blutack and some extra pieces of card.

note: the extra pieces of card are added as lockers ( to prevent the wheel to rotate more than 180 degrees ). This feature did not show in the version for exhibition because i found another way to do the same thing ( as the pieces of card did ) with less efford. (using blutack instead)

300 words to describe my work.

CITRUS FRUIT

Lemons, limes, oranges and grapefruits have basically the same taste: sour and sometimes sweet. They are all good sources of vitamin C. Their slices also look generally the same. The reason is that they are all brothers and sisters in a fruit family called “citrus”.

The only obvious difference of the slices in the Citrus family is the colour. For instance lemons’ slice are yellow, limes’ slices are green and oranges’ slices are orange. Therefore I thought it would be interesting to use this kind of nature things for my ‘Variable’ explanation (the colour between different kinds of citrus fruits is the “variable”).

Description+ Instruction: My exhibition setup contains a piece of paper and a paper wheel behind it. In the piece of paper at the front, there is an image of a citrus fruit slice in black and white (this is the general shape of a slice of any citrus fruit) then a “+” and a blank window which embodies the variable. This variable contains the colour value. If you rotate the wheel behind the piece of paper (either clockwise or counter clockwise), the window (variable) will show different colours (in this case, we have 3: orange, yellow and green) whenever a colour shows in the first window, look at the other window after the “=”, different fruits will appear accordingly.

New posts coming soon

Note to the tutor: new posts coming after this week as I am quite busy with other papers' assignment

The chosen programming term

Variable

Well, it actually did not take me too long to choose that one from the given terms. Basically, i think variable was somethings that i had to deal with in every program that i wrote. And it was one of the first thing to be learned when studying about programing. It makes programming way easier if being used properly. That's why variable became one of the most powerful and useful term in programming. It allows programmers to make more flexible program

So what is variable in programming?

Easy definition for easy understanding variable :

A symbol or name that stands for a value.


Every variable has a name, called the variable name, and a data type.

For example:
Lets call x =200 , y =200 so

x+y will be 400 , obviously

if we change x =100, y = 500 then x+y will not be 400 anymore but 600.

So x and y are variables. They are not constant because we can change the value of them. Therfore the sum of x and y will change accordingly.

Visualize the term variable: A box that hold things inside it.

Project 3

-----------------------------------------------------------------------------------------------------------------

From WIP to Final

Finally, the work on this current project has come to its end.

There is actually not much difference between the WIP and the Final. Frankly, there was only one change: reducing the "flashing effect" of the lines which i found quite annoying after playing again and again for 20 times.

That change was a success in my own opinion. It prevented too much thing happening at the same time on the screen which sometimes up set the viewer's eyes.

Here's the link to the Final: http://www.openprocessing.org/visuals/?visualID=27815

Link to the early stage work and the variation of the final product :

http://www.openprocessing.org/visuals/?visualID=27814 - Variation


http://www.openprocessing.org/visuals/?visualID=27813 - Early stage

And screenshots of different stages of work :

Reflection on the WIP

Screen shot from the dev#13

Well, the WIP ( the one that i uploaded to openprocessing ) has achieved my goal set at the interim presentation 2 weeks ago. It was inspired by many things that i found interesting for this project.

First of all, the most influencing stuff is actually my own work in the first project.The pattern that i used in the current project is a small part of the wallpaper in the previous project that i like.


I want to keep my project 2 complex but tidy just like what i did in the project one. I want to achieve high level of contrast between patterns and other elements to the background. That's why I don't use a lot of color as you can see. It is too distracting ,in my opinion. I just used black, white and red as my main color theme. In the work process, i continually switched the color around and applied it to the different elements until i found it the most eye-satisfying.

While i was working on the color, i came across an inspiring image :

Yes, that is the burning fuse of firework. It would be cool if this kind of motion appear in my project. Then i started to think about how to abstract the image and integrate it to the current pattern. After a while, i finally found a solution. ( see the code in openprocessing for more detail )

Secondly, when i have a tidy and complex image, i need good sounds to go with it. That why i choose the xylophone sounds. They are refined sounds. They sound clean yet have a level of complexity when group them up together.

However, there are still things that make me unhappy as i mentioned in the earlier post. That is the sounds aren't in sync with the image ( the ellipse) whenever the second and so on patterns are generated. I am not sure if it is the computer processing's problem or the code problem. I haven't found a proper solution to solve the problem yet.

Openprocessing works again for me. Therefore i just uploaded my latest Work In Process to it. It is the number 13th in the series of development, a final stage product but not the final one. Now i am working on the number 14th - hopefully, a better version and final version. However, i think i will have to use the one that i uploaded to the openprocessing to present in the mean time because i am currently having not much clue how to improve it. What I need now is feedback from other people first before i can continue my work.

No more blank talk, here the link:

http://www.openprocessing.org/visuals/?visualID=27065

A big thanks to Tim, I have achieved what i set as a goal in the internim presentation. He was very helpful at the last night tutorial session. I had to wait two and a half hours for my turn though.

However, i am not very happy because when i reach this level of the project, i found out that there were still so many thing to do. In worse case, I have to restart from the beginning.

In my opinion, my work now is quite good looking ( for my taste) but still lacks of fun to play with or frankly, boring. The interaction between the patterns and the mouse are not so good and still very simple. The sounds alone are quite OK but then the things that represent it have serious problem. They don't sync with the sounds.

I haven't got any comment or feedback from other people though. I don't know what people think about my project now.

Still got a lot of works to do. See you in the next post. Hopefully a good news.

Well, seems like i have to upload my code here for the time being but i will try again later to upload the code to openprocessing.



So here's the code that i have been working on so far:
--------------------------------------------------------------------------------------------------------------
import ddf.minim.*;
import ddf.minim.signals.*;
import ddf.minim.analysis.*;
import ddf.minim.effects.*;

  Minim minim;
  AudioPlayer song1;
  AudioPlayer song2;
  AudioPlayer song3;
  AudioPlayer song4;
  AudioPlayer song5;
  AudioPlayer song6;
  AudioPlayer song7;
  AudioPlayer song8;
  AudioPlayer song9;
  AudioPlayer song10;
 
  //ArrayList Line1 = new ArrayList();
  //Line.add(Line1);
  int s1=0;

void setup(){
  size(500,500);
  background(255);
  minim = new Minim(this);
  song1 = minim.loadFile("1.wav");
  song2 = minim.loadFile("2.wav");
  song3 = minim.loadFile("3.wav");
  song4 = minim.loadFile("4.wav");
  song5 = minim.loadFile("5.wav");
  song6 = minim.loadFile("6.wav");
  song7 = minim.loadFile("7.wav");
  song8 = minim.loadFile("8.wav");
  song9 = minim.loadFile("9.wav");
  song10 = minim.loadFile("10.wav");
}
void draw(){
}
/*void mouseDragged(){
  background(255);
  smooth();
  stroke(0);
  strokeWeight(0.2);
  int x1,x2;
  int m1=mouseX;
  int m2=mouseY;
  for(x1=0; x1<=500; x1=x1+5){
      line(x1,0,m1,m2);
    }
  for(x2=0; x2<=500; x2=x2+5){
      line(m1,m2,x2,500);
    }
    //song.play();
}*/
void mouseClicked(){
  background(255);
  smooth();
  stroke(0);
  strokeWeight(5);
  point(mouseX,mouseY);
}

void mouseDragged(){
  background(255);
  smooth();
  stroke(50);
  strokeWeight(0.2);
  int x3,x4;
  float m3=mouseX;
  float m4=mouseY;
  for(x3=0; x3<=500; x3=x3+20){
      line(x3,0,m3,m4);
    }
  for(x4=0; x4<=500; x4=x4+20){
      line(m3,m4,x4,500);
    }
   
}
void mouseReleased(){
  background(255);
  smooth();
  stroke(0);
  strokeWeight(0.2);
  int x1,x2;
  float m1=mouseX;
  float m2=mouseY;
  for(x1=0; x1<=500; x1=x1+20){
      line(x1,0,m1,m2);
    }
  for(x2=0; x2<=500; x2=x2+20){
      line(m1,m2,x2,500);
    }
    if (m1<=50){

      song1.loop();

      stroke(0.2);

      fill(255,100);

      s1=s1+5;

      ellipse(m1,m2,s1,s1);

     
    }
     if (m1>50 && m1<=100){
      song2.loop();
    }
     if (m1>100 && m1<=150){
      song3.loop();
    }
     if (m1>150 && m1<=200){
      song4.loop();
    }
     if (m1>200 && m1<=250){
      song5.loop();
    }
     if (m1>250 && m1<=300){
      song6.loop();
    }
     if (m1>300 && m1<=350){
      song7.loop();
    }
     if (m1>350 && m1<=400){
      song8.loop();
    }
     if (m1>400 && m1<=450){
      song9.loop();
    }
     if (m1>450){
      song10.loop();
    }    
}
void stop()
{
    song1.close();
    song2.close();
    song3.close();
    song4.close();
    song5.close();
    song6.close();
    song7.close();
    song8.close();
    song9.close();
    song10.close();
    minim.stop();
    super.stop();
}
 
void keyPressed()
{
  if(key == 's' || key == 'S')
  {
    String filePath = selectInput("Saving PNG - Select or Type File Name");  // Opens file chooser
    if(filePath != null)
    {
      save(filePath + ".png");
    }
  }
}
--------------------------------------------------------------------------------------------------------------

So what it does?

If you drag the midpoint, the pattern will change according to the new mousex position and mousey position

This is what it will appear when you drag the midpoint and then release it in the area x <= 50

. Note: the circal is intended to represent the playing sound but in the mean time i  only managed to make it appear at a certain area (50>=x ), not all. (see the yelow highlighted code)

What i want it to be done:  -I want to make other pattern by clicking in the white space on the screen. To achieve these i have to use arrayList but i still dont really get it.

-I want the circal appears wherever the midpoint is when the mouse released. And it will get bigger when the sound plays (prob the value will change from 0-20 range) and vanishes when the sound stops and then begins another loop when the sound plays again.This idea is actually inspired by the xylophone sound (as i mentioned in the earlier post). It always make me think about water drop whenever this sound plays

- I want the midpoint of each pattern connect with others by straight lines and these line will change the length if you change either or both midpoints' position that they connect.

Where has my project been?

It has been a while since i last updated my blog. I couldn't upload my code to openprocessing anymore. I dont know why but it seems like openprocessing is refusing my brilliant code ( kidding! :-) )

This afternoon i just spent about an hour to find my desired sound for the project and to edit it (the sound).

Well, the thing was that it was hard to find a proper sound that actually fits the images when the code plays. There were millions of sound samples over the net.

But, i think today is my lucky day because i have finally found the sound that fit the project quite well( in my opinion ). I came across the xylophone sound samples when skimming through hundreds of sound on the site named : freesound.org. I really like them. They even inspired me. And the best think: I got some new idea for the project thanks to the sound.

With the sound ready, i am half way to the goal.

I am trying to upload the code one more time to illustrate what i have done so far. If openprocessing still refuse my code then i will have no other way than upload the code and the images here.

Brain-storming ( the process BEFORE the previous post )

 

 

These are what i had had in mind  before the chosen idea came up.

Internim Presentation of Project number TWO

After hours thinking about what to do in this up coming project 2 and a lot of sketches was created ( which will be uploaded in the later posts), i have finally came up with the best sketch (in my collection) that i could offer at the time ( the image below this text ) to present to the class in Friday.

Detail:

Background size : 500x500
Default background: black or white - blank ( according to the image below, there would be a pattern in the background as default, but i changed the idea )

Sounding: the background will be divided vertically into 10 sections ( 10 different sound in each section ) and horizontally into 100 sections ( volume level 0-99 ). And the grid is not visible to the users.

Mouse click (everywhere in the screen): Creates a line pattern as seen in project 1 ( image below). Wherever the mouse click,the mid point of the pattern will be generated and gradually connect to the edges by lines. And also depending on where a midpoint is made, the patten has its own sounding characteristic.

SamplePattern ( when mouse clicked at the point (250,250) - play sound number 5-6 volume 50% )

Mousedrag ( drag the midpoints of the patterns ) change the sound and the volume according to the new position of the midpoint.

Midpoint vs. midpoint Patterns will interact with each other through their midpoint. When a new pattern is created, the midpoint of it will draw a line to connect with the midpoint of the older pattern appeared on the screen. (The sound will play in order from old to new.)

Idea to be developed : I am thinking about adding some more effect. For instance what does it like if i drag quickly the pattern and then suddenly release the mouse -> the pattern will keep flying across the screen and bounce back until it hits the wall...