5. Oktober 2012

Fifth Day: Our duty today was to create a slider that could change the attributes of the shape/object depending on which end of the slider the button was leaning toward. What was given at the start: three sliders that was placed horizontally. When the buttons were moved, the color of the background would change (each slider represented one of the RGB). Our goal was to change the slider's position from horizontal to vertical. Afterwards, most of us just experimented with what attributes of an object/shape the sliders could influence. I took the example from the rotating smiley and tried to change the rotation speed of the smaller smiley and the size of the bigger smiley. New in this lesson was the "class" category. Unlike the classes "PShape, PImage and PVector", this class has its own tab. To explain it simply: It is a sub file from which its attributes can always be used once it is already been described (as "methods") in the class tab. So for example: If multiple shapes/objects of the same kind are wanted, creating a class could be easier, writing only one class and mentioning it repeatedly on the main tab. That way, firstly, chaos in the syntax can be avoided and it looks neat. Secondly, it saves a lot of energy, rather than using the "copy-and-paste"-technique with whole paragraphs. So for this task, the slider was created in the class and could be added into the main tab (GUI) as many times as wanted. GUI:

Slider sliderR = null;
Slider sliderS = null;
void setup()
{
 size(400, 400);
 strokeWeight(7); // linienbreite

sliderR = new Slider(50,50,20,200,.5);
 sliderS = new Slider(28,50,20,200,.5);

}

float rot = 5;

void draw()
{
 background(100);
 float radius = dist(0,0,width/2,height/2); // rechne die distanz vom mousecursor zum fensterzentrum aus
 radius = map(radius,0,width,1,4); // rechne aus in welchem bereich der radius am schluss sein sollte

pushMatrix();
 translate(200,200);
 //rotate(calcAngle());
 scale(sliderR.pos()*0.9);
 smiley(); // funtions aufruf
 //popMatrix();

 //pushMatrix();
 rotate(rot);
 rot = rot + sliderS.pos();
 translate(90,90);
 scale(.2);
 smiley(); // funtions aufruf
 popMatrix();

sliderR.draw();
 sliderS.draw();

}

void mousePressed()
{
 sliderR.mousePos(mouseX,mouseY,true);
 sliderS.mousePos(mouseX,mouseY,true);

}

void mouseDragged()
{
 sliderR.mousePos(mouseX,mouseY,true);
 sliderS.mousePos(mouseX,mouseY,true);

}

// funktion
void smiley()
{
 noFill();
 ellipse(0,0,180,180); // kopf

// fill(0);
// ellipse(0 - 30,0 - 30,20,20); // linkes augen
// ellipse(0 + 30,0 - 30,20,20); // rechtes augen
//
// noFill();
// arc(0,0,100,100,radians(20),radians(180-20)); // mund
}

Slider:

class Slider
{
 PVector _p1;
 PVector _p2;

int _w;
 float _pos;

Slider(int x,int y,int w,int h,float pos)
 {
 _p1 = new PVector(x + w *.5,y);
 _p2 = new PVector(x + w *.5,y+h);

_w = w;

_pos = pos;
 if(_pos > 1.0)
 _pos = 1.0;
 else if(_pos < 0.0)
 _pos = 0.0;
 }

float pos()
 {
 return _pos;
 }

boolean isHit(int x,int y)
 {
 if(y > _p1.y && y < _p2.y &&
 x > _p1.x - 5 && x < _p1.x + 5)
 return true;
 else
 return false;
 }

void draw()
 {
 pushStyle();
 drawSlider();
 drawKnob();
 popStyle();
 }

void drawSlider()
 {
 stroke(255);
 line(_p1.x,_p1.y,_p2.x,_p2.y);
 line(_p1.x + _w * .5,_p1.y,_p1.x - _w * .5,_p1.y);
 line(_p1.x + _w * .5,_p2.y,_p1.x - _w * .5,_p2.y);
 }

void drawKnob()
 {
 stroke(0);
 fill(255);
 PVector dir = PVector.sub(_p2,_p1);
 PVector pos = PVector.add( _p1 , PVector.mult(dir,_pos)); //distance from knob to start point

rect(pos.x-3,pos.y-3,6,4);

}

void mousePos(int x,int y,boolean pressed)
 {
 if(pressed)
 {
 if(isHit(x,y))
 { // move knob
 PVector dir = PVector.sub(_p2,_p1);
 _pos = 1.0 / dir.mag() * (y - _p1.y);

}
 }
 else
 { // mouse over

}
 }

}