12c: interactive permutation – V2 | CodingSpace | IAD Interaction Design

12c: interactive permutation – V2

Fabian Troxler | 23:30 | Categories: Allgemein |

8. Dezember 2010

Auf der Basis meines Procsessing-scripts für die Permutation (12b) hab ich einige Erweiterungen eingebaut: So beeinflusst nun der Mauszeiger nicht nur die Ausrichtung der Zeichen sondern auch deren Form.

Durch klicken mit der linken Maustaste wird nun eine Wellenform vom Klickpunkt ausgelöst. Es können sogar mehrere Wellen erzeugt werden, die sich auch überlagern:

Ausserdem habe ich einige Keys zur Steuerung gewisser Funktionen eingebaut:

'1'-'6' - verschiedene Grundformen/Varianten (Noch im Ausbau)
'm' - "Mute"-Taste, der Mauszeiger wirkt nicht mehr direkt auf die Form ein (MouseOver), nur noch Wellenerzeugung ist möglich (kann durch das Drücken einer bliebigen Taste wieder ausgeschaltet werden)
'Pfeil oben/unten' - Vergrössern /Verkleinern der Anzahl Zeichen (eine Art Zoomfunktion)
'Pfeil links/rechts' - Vergrössern /Verkleinern des "MouseOver" Einflussbereichs.

Code: download

//import processing.opengl.*;
ArrayList waves;
int     anzahl = 7;
int     rand = 50;
float   i = 50;
float   xStep;
float   yStep;
float   rot,rotx,roty;
float   distance;
float   adddistance;
float   realdistance;
float   maxdistance;
float   maxdistanceratio;
float   sizeratio;
Wave    wave;
int     wavenmbr = 0;
boolean mousepressed = false;
boolean pressed = false;
char    keypressed;
int     mousex,mousey;

void setup()
{
  size(1200, 1200);
  smooth();
  maxdistanceratio = 0.4;
  xStep = (width - 2 * rand) / (float)(anzahl-1);
  yStep = (height - 2 * rand) / (float)(anzahl-1);
  maxdistance = sqrt(sq(width)+sq(height));
  maxdistance = maxdistance * maxdistanceratio;
  sizeratio = 7.0/anzahl * (width/600);
  adddistance = 0;
  waves = new ArrayList();
  //noLoop();
}

void draw()
{
  background(255);

  pushMatrix();
  translate(rand,rand);
  for(int y=0; y<anzahl;y++)
  {
    pushMatrix();
    for(int x=0; x<anzahl;x++)
    {
      rot = atan2((mouseX-rand - x*xStep),(mouseY-rand - y*yStep));
      distance = dist(mouseX-rand,mouseY-rand,x*xStep,y*yStep);

      realdistance=0;
      adddistance = 0;
      for (int iwaves = 0; iwaves < waves.size(); iwaves++)
      {
        Wave wave=(Wave)waves.get(iwaves);
         i = wave.i();
        realdistance = wave.reald(x*xStep,y*yStep);
        wave.draw(realdistance, sizeratio, i);
        adddistance += wave.adddist();

      }

      if (distance >= maxdistance )
      {
        distance = maxdistance;
      }

      drawPermutationObj(rot);

      translate(xStep,0.0f);
    }
    //println();
    popMatrix();
    translate(0.0f,yStep);
  }
  popMatrix();
}

void drawPermutationObj(float rot)
{
  if (pressed)
  {
    waves.add(new Wave(mousex, mousey, rand));
    wavenmbr = wavenmbr + 1;
    // println(wavenmbr);
    pressed = false;
  }

  pushStyle();
  pushMatrix();
  scale(sizeratio);
  rotate(-rot+HALF_PI);
  if (key == 'm')
distance= maxdistance;
  distance = distance + adddistance;
  switch(keypressed)
  {
  case '1':
    distance = distance + adddistance;
    stroke(0);
    fill(0);
    // shadow
    ellipse(map(distance,0,maxdistance,0,14),0,map(distance,0,maxdistance,16,46),map(distance,0,maxdistance,16,46));
    noStroke();
    fill(255);
    //white ring
    ellipse(map(distance,0,maxdistance,0,-14),0,map(distance,0,maxdistance,46,50),map(distance,0,maxdistance,46,50));
    stroke(0);
    fill(0);
    // center ellipse
    ellipse(map(distance,0,maxdistance,0,-14),0,map(distance,0,maxdistance,16,42),map(distance,0,maxdistance,16,42));
    break;

  case '2':
    distance = distance + adddistance;
    stroke(0);
    fill(0);
    // shadow
    ellipse(map(distance,0,maxdistance,14,0),0,map(distance,0,maxdistance,46,16),map(distance,0,maxdistance,46,16));
    noStroke();
    fill(255);
    //white ring
    ellipse(map(distance,0,maxdistance,-14,0),0,map(distance,0,maxdistance,50,46),map(distance,0,maxdistance,50,46));
    stroke(0);
    fill(0);
    //center ellipse
    ellipse(map(distance,0,maxdistance,-14,0),0,map(distance,0,maxdistance,42,16),map(distance,0,maxdistance,42,16));
    break;

  case '3':
    distance = distance + adddistance;
    stroke(0);
    fill(0);
    // shadow
    ellipse(map(distance,0,maxdistance,0,14),0,map(distance,0,maxdistance,46,16),map(distance,0,maxdistance,46,16));
    noStroke();
    fill(255);
    //white ring
    ellipse(map(distance,0,maxdistance,-14,0),0,map(distance,0,maxdistance,50,46),map(distance,0,maxdistance,50,46));
    stroke(0);
    fill(0);
    //center ellipse
    ellipse(map(distance,0,maxdistance,-14,0),0,map(distance,0,maxdistance,42,16),map(distance,0,maxdistance,42,16));
    break;

  case '4':
    distance = distance + adddistance;
    stroke(0);
    fill(0);
    // shadow
    ellipse(map(distance,0,maxdistance,0,0),0,map(distance,0,maxdistance,46,16),map(distance,0,maxdistance,46,16));
    noStroke();
    fill(255);
    //white ring
    ellipse(map(distance,0,maxdistance,-28,0),0,map(distance,0,maxdistance,50,46),map(distance,0,maxdistance,50,46));
    stroke(0);
    fill(0);
    //center ellipse
    ellipse(map(distance,0,maxdistance,-28,0),0,map(distance,0,maxdistance,42,16),map(distance,0,maxdistance,42,16));
    break;

  case '5':
    distance = distance + adddistance;
    stroke(0);
    fill(0);
    // shadow
    ellipse(map(distance,0,maxdistance,0,0),0,map(distance,0,maxdistance,46,16),map(distance,0,maxdistance,46,16));
    noStroke();
    fill(255);
    //white ring
    ellipse(map(distance,0,maxdistance,-50,0),0,map(distance,0,maxdistance,50,46),map(distance,0,maxdistance,50,46));
    stroke(0);
    fill(0);
    //center ellipse
    ellipse(map(distance,0,maxdistance,-50,0),0,map(distance,0,maxdistance,42,16),map(distance,0,maxdistance,42,16));
    break;

  case '6':
    distance = distance + adddistance*2;
    noStroke();
    fill(map(distance,0,maxdistance,255,80));
    // shadow
    ellipse(map(distance,0,maxdistance,0,0),0,map(distance,0,maxdistance,46,16),map(distance,0,maxdistance,46,16));
    noStroke();
    fill(255);
    //white ring
    //ellipse(map(distance,0,maxdistance,-50,0),0,map(distance,0,maxdistance,50,46),map(distance,0,maxdistance,50,46));
    stroke(0);
    fill(0);
    //center ellipse
    ellipse(map(distance,0,maxdistance,-80,0),0,map(distance,0,maxdistance,100,16),map(distance,0,maxdistance,100,16));
    break;
  }

  popMatrix();
  popStyle();
}

void keyPressed()
{
  switch(key)
  {
  case ' ':
    save("permutation.jpg");
    break;
  case '1':
    keypressed = key;
    break;
  case '2':
    keypressed = key;
    break;
  case '3':
    keypressed = key;
    break;
  case '4':
    keypressed = key;
    break;
  case '5':
    keypressed = key;
    break;
  case '6':
    keypressed = key;
    break;
  }
  if (key == CODED)
  {
    if (keyCode == UP)
    {
      anzahl++;
      xStep = (width - 2 * rand) / (float)(anzahl-1);
      yStep = (height - 2 * rand) / (float)(anzahl-1);
      sizeratio = 7.0/anzahl * (width/600);
      maxdistance = sqrt(sq(width)+sq(height)) * maxdistanceratio * sizeratio;
    }
    if (keyCode == DOWN)
    {
      anzahl--;
      xStep = (width - 2 * rand) / (float)(anzahl-1);
      yStep = (height - 2 * rand) / (float)(anzahl-1);
      sizeratio = 7.0/anzahl * (width/600);
      maxdistance = sqrt(sq(width)+sq(height)) * maxdistanceratio * sizeratio;
    }

    if (keyCode == LEFT)
    {
      maxdistanceratio = maxdistanceratio - .1;
      maxdistance = sqrt(sq(width)+sq(height)) * maxdistanceratio * sizeratio;
    }

    if (keyCode == RIGHT)
    {
      maxdistanceratio = maxdistanceratio + .1;
      maxdistance = sqrt(sq(width)+sq(height)) * maxdistanceratio * sizeratio;
    }
  }
}

void mousePressed ()
{
  mousex = mouseX;
  mousey = mouseY;
  mousepressed = true;
  pressed = true;
}

Classe 'wave' :

class Wave {
  float _adddistance = 0;
  float _sizeratio;
  float i = 0;
  float _realdistance;
  int _mousex,_mousey,_rand;
  int _wavebreite = 80;
  int _wavehight = -400;
  float _wavespeed = 0.1;

  Wave (int mousex, int mousey, int rand)
  {
    realdistance = realdistance;
    _mousex = mousex;
    _mousey = mousey;
    _rand = rand;

  }

  float adddist()
  {

    return _adddistance;
  }

  float i()
  {
    i+=_wavespeed * _sizeratio;
    return i;
  }

  float reald(float xstep, float ystep)

  {
  _realdistance = dist(_mousex-_rand,_mousey-_rand,xstep,ystep);
  return _realdistance;

  }

  void draw(float realdistance, float sizeratio, float i)
  {
    _sizeratio = sizeratio;
    if (i <= 1200)
    {
      //ellipse(mousex,mousey,i,i);
      if (realdistance >= i-_wavebreite && realdistance <= i+_wavebreite)
      {

        float j = 0;
        j = (i - realdistance);

        if (j >=0)
          _adddistance = map(j,-_wavebreite,_wavebreite,_wavehight,0);
        else
          _adddistance = map(j,-_wavebreite,_wavebreite,0,_wavehight);
       // println("adddist : " + _adddistance);
      }
      else {
        _adddistance = 0;
      }
    }
    else
    {
      i = 0;
    }
  }
}

CodingSpace IAD Interaction Design | 1. Semester

Willkommen auf unserem Seminar-Blog

Immer auf dem aktuellen Stand bleiben

Member Login

Registration is closed

12c: interactive permutation – V2

Information

Studenten