22. Oktober 2011

Planets

In this example, the goal was masking the background of a SVG and having the SVG follow the cursor.

/* ----------------------------------------------------------------------------
 *  codingSpace14						
 * ----------------------------------------------------------------------------
 *  svg
 * ----------------------------------------------------------------------------
 *  prog: max.rheiner@zhdk.ch
 * ----------------------------------------------------------------------------
 */

PImage[] imageList = null;    // variable sauber initialisieren

void setup()
{
  size(600,600);      // def. fenstergroesse
  
  imageList = new PImage[4];
  imageList[0] = loadImage("./images/1.jpg");
  imageList[1] = loadImage("./images/2.jpg");
  imageList[2] = loadImage("./images/3.jpg"); 
  imageList[3] = loadImage("./images/4.jpg");
    
  PImage maskImg = loadImage("./images/5.jpg");
 
  imageList[3].mask(maskImg);
 
  //imageMode(CORNER);
}

void draw()
{
  background(255);
  
  pushMatrix();
    translate(10,100);
    for(int i=0;i < imageList.length; i++)
    {
       if(i == (imageList.length - 1)) {
         image(imageList[i],mouseX - width + 70, mouseY - height / 4,180,140);
       } else {
         image(imageList[i],0,0,140,140);
       }
       translate(150,0);
    } 
  popMatrix();
}

Lines

The goal was to be able to click the mouse on two different points, and have a ball go back and forth on a line between the two points. I extended that to an infinite amount of points so that the ball moves from the first thru the last point and back again. The first image represents one of the attempts to get there, the second is the result.

PVector[]   pos = new PVector[50];
//PVector     endPos = new PVector();
int         curTime = 0;
int         animSpeed = 200;
int         animTimePerLine = 2000;
int         animTime = 0;
int         lineSections = 100;
boolean     drawFlag=false;
int         clickCounter = 0;
int         posCounter = 0;
int         direction = 0;

void setup()
{
  size(640, 480);
  smooth();
  loop();
}

void draw()
{

  background(51);

  // calc. the anim time
  if (curTime >= animTimePerLine * (posCounter + 1) && curTime < animTime) {

    posCounter++;
    //println("booya");
  } 
  else if (curTime >= animTime) {

    direction = 1;
  } 
  else if (curTime <= animTime - animTimePerLine * (clickCounter - posCounter - 1) && curTime > 0 && direction == 1) {

    posCounter--;
  } 
  else if (curTime <= 0) {

    direction = 0;
  }

  //println(curTime);

  if (direction == 0) {

    curTime += animSpeed;
  } 
  else {

    curTime -= animSpeed;
  }

  // calc. the current time in the animation

  if (drawFlag)
  {

    for (int i = 0; i < clickCounter - 1; i++) {


      stroke(255);
      line(pos[i].x, pos[i].y, 
      pos[i + 1].x, pos[i + 1].y);
    }

    //drawFlag = false;
  }

  // calculate the position of the circle on the line
  if (posCounter < clickCounter - 1) {

    PVector dir = PVector.sub(pos[posCounter + 1], pos[posCounter]);
    
    float distance = PVector.dist(pos[posCounter], pos[posCounter + 1]);
    
    println(distance);
    
    float normTime = (curTime - (animTimePerLine * posCounter)) * 1.0 / animTimePerLine;

    //normTime = map(curTime, 0, 1, );
    
    PVector position = PVector.add(pos[posCounter], PVector.mult(dir, normTime));
    ellipse(position.x, position.y, 20, 20);
  }
}

void mousePressed()
{
  //if(clickCounter == 0) {

  drawFlag = true;
  curTime = 0;
  posCounter = 0;
  pos[clickCounter] = new PVector(mouseX, mouseY, 0);
  //endPos = startPos.get();

  animTime = animTimePerLine * clickCounter;

  ++clickCounter;

  //}else{

  //endPos.set(mouseX,mouseY,0);

  //clickCounter = 0;

  //}
}

void mouseDragged()
{
}

void mouseReleased()
{
  //drawFlag = false;
  println("released");
}

void moveBall() {
}