Characters: the Magic Mirror

The magic mirror is an important part in my project to help the user choose their dress by finishing a body shape test and a color test.

As Ines's suggestion, I used a vintage style to create an old fashion and mystery feeling. The outer gold barrier were created in AI. Then spread some golden sparkles with processing coding, dividing then to difference Alpha value.

Sparkle() {

    angle = random(0, 360);

    shift = 0;

    shiftSpeed = random(-0.01f, 0.01f);

    widthLimit = (float)rnd.nextGaussian() * 50;

    angularSpeed = random(PI/720, PI/180);

    float tmp = random(0,1);

    if (tmp < 0.4) {

      //c = new Color(72,7,1);

    c = new Color(134,80,16);

    } else if (tmp < 0.8) {

    //c = new Color(113,28,0);

    c = new Color(215,179,101);

    } else {

    //c = new Color(157,73,26);

    c = new Color(212,217,213);

    }

  }

   

  void move() {

    angle += angularSpeed;

    if (angle > 360) {

      angle -= 360;

    }

    shift += shiftSpeed;    

    shiftSpeed += random( -0.05f, 0.05f );

    if (shift > widthLimit) {

      shiftSpeed = 0;

    }

    else if (shift < -widthLimit) {

      shiftSpeed = Math.abs(shiftSpeed) * 0.5f;

    }

  }

To make the interacted effect more magical, I add an water spreading effect when the mouse is in the mirror, which was inspired by the Magic Water Effect of Rodrigo Amaya in OpenProcessing.

void waterEffect() {

  //Toggle maps each frame

  i=oldind;

  oldind=newind;

  newind=i;

  i=0;

  mapind=oldind;

  for (int y=0;y<height;y++) {

    for (int x=0;x<width;x++) {

  short data = (short)((ripplemap[mapind-width]+ripplemap[mapind+width]+ripplemap[mapind-1]+ripplemap[mapind+1])>>1);

      data -= ripplemap[newind+i];

      data -= data >> 5;

      ripplemap[newind+i]=data;

  //where data=0 then still, where data>0 then wave

  data = (short)(1024-data);

      //offsets

  a=((x-hwidth)*data/1024)+hwidth;

      b=((y-hheight)*data/1024)+hheight;

    //bounds check

      if (a>=width) a=width-1;

      if (a<0) a=0;

      if (b>=height) b=height-1;

      if (b<0) b=0;

      ripple[i]=texture[a+(b*width)];

      mapind++;

  i++;

    }

  }

}

Reference:
1. Algorithms for visual design using the Processing language(Terzidis, Kostas, 2009);
2. Processing(Greenberg, Ira, 2007);
3. Magic Water Effect by Rodrigo Amaya (http://www.openprocessing.org/sketch/43543);