Interactive Application Compose

We need to compose our Interactive Application using authoring tool. After a short discussion, we decide to try it in Processing that using Java Script. Below is the progress of the code composing:

//import webcam
import processing.video.*;
Capture video;
//contitional switches and actions variable
int bounceaction=0;
int bounceaction2=0;
int bounceswitch=0;
int bounceswitch2=0;
int snakeaction=0;
int snakeaction2=0;
int snakeswitch=0;
int snakeswitch2=0;
int end=0;
//button variable
int button=0; //button triger
int bx=700; //button x position
int by=500; //button y position
//bounching ball variable
float x = 100;
float y = 100;
float xspeed = 3;
float yspeed = 1;
//snake variable
int[] xpos =new int[50];
int[] ypos =new int[50];
int i =0;

//bouncing ball function
void bounce(){
  x = x + xspeed;
  y = y + yspeed;
  if ((x > width) || (x < 0)) {
  xspeed = xspeed * -1;
  }
  if ((y > height) || (y < 0)) {
  yspeed = yspeed * -1;
  }
  noStroke();
  fill(150);
  ellipse(x,y,60,60);
}
void bounce2() {
  bounce();
  if ((x+x > width)  ) {
  xspeed = xspeed * -1;
  }
   if ((y+y > height)  ) {
  yspeed = yspeed * -1;
  }
  ellipse(x+x,y+y,60,60);
}
void bounce3() {
   if ((x*1.5 > width)  ) {
  xspeed = xspeed * -1;
  }
   if ((y*1.5 > height)  ) {
  yspeed = yspeed * -1;
  }
  ellipse(x*1.5,y*1.5,60,60);
}

//snake funtion
void snake(){
  for (int i=0; i < xpos.length-1; i++){
    xpos[i]=xpos[i+1];
    ypos[i]=ypos[i+1];
  }
  xpos[xpos.length-1] = mouseX;
  ypos[ypos.length-1] = mouseY;
   for (int i =0; i < xpos.length; i++){
    noStroke();
    fill(255-random(255),255-i*5,random(255));
    ellipse(xpos[i],ypos[i],i,i);
  }
}
void snake2 (){
  for (int i =0; i < xpos.length; i++){
    noStroke();
    fill(255-random(255),255-i*5,random(255));
    ellipse(xpos[i],ypos[i],i,i);
    fill(random(255),0+i*20,255);
    rect(xpos[i]+100,ypos[i]+100,i,i);
  }
}
void snake3 (){
  for (int i =0; i < xpos.length; i++){
    noStroke();
    fill(255-random(255),255-i*5,random(255));
    ellipse(xpos[i],ypos[i],i,i);
    fill(0+random(255),0+i*5,random(255));
    ellipse(xpos[i]-300,ypos[i]-150,i+50,i+20);
    fill(random(255),0+i*20,255);
    rect(xpos[i]+100,ypos[i]+100,i,i);
  }
}

void setup() {
size(800,600);
video = new Capture(this,800,600,15);
}

void webcam() {
if (video.available()) {
video.read();
}
image(video,0,0);
}

void mousePressed() { //conditional logic that triggered after mousepress
  if (!(((mouseX > ( bx+60))||(mouseY > (by+60)))||((mouseX < bx)||(mouseY < by))))
    button= int (random(1,4));
  if (bounceswitch==1) //swicthes and actions condition for bouncing ball
    bounceaction=1;
  if (bounceswitch2==1)
    bounceaction2=1;
  if (snakeswitch==1) //swicthes and actions condition for snake
    snakeaction=1;
  if (snakeswitch2==1)
    snakeaction2=1; 
  if (end==3) //ending condition 1 (black screen)
    button=3;
  if (end==4)
    button=4; //ending condition 2 (text)
}
 
void draw() {
  webcam();
  rect (bx,by,60,60); //button
  if (button==1){ //bouncing ball
    webcam();
    bounce();
    end=int (random(1,4));
    bounceswitch=1;
    }
 if (bounceaction==1){
   bounce2();
   end=int (random(1,4));
   bounceswitch2=1;
  }
  if (bounceaction2==1){
    bounce3();
    end=int (random(3,4));
  }
  if (button==2){ //snake
   webcam();
   snake();
   end=int (random(1,4));
   snakeswitch=1;
  }
  if (snakeaction==1){
   snake2();
   end=int (random(1,4));
   snakeswitch2=1;
  }
  if (snakeaction2==1){
   snake3();
   end=int (random(3,4));
  }
   if (button==3) //ending 1
   background (0);
   if (button==4) //ending 2
   background (20,255,100,255);
}