VOYAGER

To start the interaction with this art project, you have to click on to the screen to begin it. There are 8 balls on the screen that changes color to move the balls you have to press 'b' to make the speed go +5 to take away the speed press 'v' which will take -5. You could paint on to the canvas with the mouse. you could change paint brush size by tapping on the top and down arrow keys. If you click with the mouse a black circle will appear.

​

(FIXED)

problems:

I tried to make another keypressed to make the balls stop moving and stay in there places, but it doesn't work. When you press 'n' the balls speed will go 0.

​

CODE:

//fordrawing

var mousesize;

var brushSize;

//ball1

var xSpeed;

var ySpeed;

var xPos;

var yPos;

var bSize;

//ball2

var aSpeed;

var bSpeed;

var aPos;

var bPos;

var aSize;

//ball3

var  cSpeed;

var  cPos;

var  dPos;

var cSize;

//ball4

var  eSpeed;

var  fSpeed;

var  ePos;

var  fPos;

var  eSize;

//ball5

var gPos;

var  hPos;

var  gSpeed;

var  gSize;

//ball6

var iPos;

var jPos;

var hSpeed;

var hSize;

//ball7

var  kPos;

var  lPos;

var iSpeed;

var iSize;

//ball8

var mPos;

var nPos;

var jSpeed;

var jSize;

//ballcanvas

var  lPos;

var  oPos;

var  kSize;

//color

var sR,sG,sB;

var sColor;

function setup() {

  createCanvas(1000, 1000);

  background(180, 255, 180);

  brushSize=50;

  //mouse

  mousesize=10

  //ball1

  xSpeed=15;

  ySpeed=10;

  xPos=50;

  yPos=50;

  bSize=90;

  //ball2

  aSpeed=15;

  bSpeed=9;

  aPos=50;

  bPos=50;

  aSize=40;

  //ball3

  cPos = 200;

  dPos = 200;

  cSpeed = 15;

  cSize = 50;

  //ball4

  eSpeed =10

  fSpeed =20

  ePos = 50

  fPos = 50

  eSize = 30;

  //ball5

  gPos=200

  hPos=200

  gSpeed=30

  gSize=20

  //ball6

  iPos=200

  jPos=200

  hSpeed=50

  hSize=40

  //ball7

  kPos=50

  lPos=50

  iSpeed=70

  iSize=50

  //ball8

  mPos=800

  nPos=800

  jSpeed=40

  jSize=50

  //ballcanvas

  lPos=500

  oPos=500

  kSize=500

  //color

  sR=200

  sG=100

  sB=0

}

function draw() {

  sR = random(255,0,0);

  sG = random(0,10);

  sB = random(0,200);

  fill(sR,sG,sB);

  noStroke();

  ellipse(mouseX, mouseY, mousesize, mousesize);

  sColor=color(sR,sG,sB);

  fill(sColor)

  noStroke();

  //1

  ellipse(xPos,yPos,bSize,bSize);

  //2

  ellipse(aPos,bPos,aSize,aSize);

  //3

  ellipse(cPos,dPos,cSize,cSize);

  //4

  ellipse(ePos,fPos,eSize,eSize);

  //5

  ellipse(gPos,hPos,gSize,gSize);

  //6

  ellipse(iPos,jPos,hSize,hSize);

  //7

  ellipse(kPos,lPos,iSize,iSize);

  ellipse(mPos,nPos,jSize,jSize);

  //centerball

  fill('black');

 // ellipse(lPos,oPos,kSize,kSize);

  xPos=xPos+ xSpeed;

  yPos=yPos+ ySpeed;

  aPos=aPos+ aSpeed;

  bPos=bPos+ bSpeed;

  dPos=dPos+ cSpeed;

  ePos=ePos+ eSpeed;

  fPos=fPos+ fSpeed;

  gPos=gPos+ gSpeed;

  iPos=iPos+ hSpeed;

  kPos=kPos+ iSpeed;

  mPos=mPos+ jSpeed;

 //b1

  if((xPos>(1000-bSize/2)) || (xPos<bSize/2)){

    xSpeed=-xSpeed;

}

  if((yPos>(1000-bSize/2)) || (yPos<bSize/2)){

    ySpeed=-ySpeed;

    }

   //b2

    if((aPos>(1000-aSize/2)) || (aPos<aSize/2)){

    aSpeed=-aSpeed;

}

  if((bPos>(1000-aSize/2)) || (bPos<aSize/2)){

    bSpeed=-bSpeed;

    }

  //b3

  if ((dPos > (1000-cSize/2)) || (dPos < cSize/2)){

     cSpeed = -cSpeed; 

  }

  //b4

  if((ePos>(1000-eSize/2)) || (ePos<eSize/2)){

    eSpeed=-eSpeed;

}

  if((fPos>(1000-eSize/2)) || (fPos<eSize/2)){

    fSpeed=-fSpeed;

  }

  //b5

   if ((gPos > (1000-gSize/2)) || (gPos < gSize/2)){

     gSpeed = -gSpeed; 

}

    //b6

   if ((iPos > (1000-hSize/2)) || (iPos < hSize/2)){

     hSpeed = -hSpeed; 

   }

     //b7

       if ((kPos > (1000-iSize/2)) || (kPos < iSize/2)){

     iSpeed = -iSpeed; 

}

  //b8

       if ((mPos > (1000-jSize/2)) || (mPos < jSize/2)){

     jSpeed = -jSpeed; 

}

  //presscircle

   if (mouseIsPressed) {

    ellipse(500, 500, 500, 500);

    fill(255);

     textSize(50);

    text('GROOVY',390,475,500);

  } else {

    ellipse(0, 0, 0, 0);

  }

  print(mouseIsPressed);

}

//speedoftheballs

function keyPressed(){

    if (key === 'b'){

        xSpeed+=5;

        ySpeed+=5;

        aSpeed+=5;

        bSpeed+=5;

        cSpeed+=5;

        eSpeed+=5;

        fSpeed+=5;

        gSpeed+=5;

        hSpeed+=5;

        iSpeed+=5;

        jSpeed+=5;

    }

  if (key ==='v'){

        xSpeed-=5;

        ySpeed-=5;

        aSpeed-=5;

        bSpeed-=5;

        cSpeed-=5;

        eSpeed-=5;

        fSpeed-=5;

        gSpeed-=5;

        hSpeed-=5;

        iSpeed-=5;

        jSpeed-=5;

}

  if (key ==='n'){

        xSpeed=0;

        ySpeed=0;

        aSpeed=0;

        bSpeed=0;

        cSpeed=0;

        eSpeed=0;

        fSpeed=0;

        gSpeed=0;

        hSpeed=0;

        iSpeed=0;

        jSpeed=0;

  }

   if(keyCode === UP_ARROW){

    mousesize += 25;

  }

    if (keyCode === DOWN_ARROW){

      mousesize -= 25; 

    }

}