24. September 2013

ARRAYS - LISTEN - SVG + BILDER - VEKTOREN - ANIMATION http://blogs.iad.zhdk.ch/codingspace/lektionen/arrays-listen/ http://blogs.iad.zhdk.ch/codingspace/svg-bilder/ http://blogs.iad.zhdk.ch/codingspace/lektionen/vektoren/ http://blogs.iad.zhdk.ch/codingspace/lektionen/animation/ http://blogs.iad.zhdk.ch/codingspace/animation-loesung/ DIENSTAG, 24.09.2013 Nach den Kurzpräsentationen der Hausaufgaben, schnitten wir die Themen <Arrays, ArrayList, SVG + Bilder, Animationen> an. Wir mussten zuerst mit <Arrays, ArrayList, SVG + Bilder> herumtüfteln, um die ganze Sache besser zu verstehen. Ich baute bei einere bereits vorhandenen Übung eine drag&drop Funktion ein und lies zwei .png darum kreisen, welche ich in ein <array> speicherte. Des Weiteren veränderten wir einen uns gegeben Code (Animation Beispiel 2), um das vorgegeben Ziel zu erreichen (siehe Link /animation-loesung/). EIGENERFAHRUNG Die Logik hinter der ganze Sache korrekt anzuwenden macht Spass, jedoch muss man zuerst drauf kommen. Über einfache <if> abfragen kann man sehr viel und rel. einfach erreichen. Einfach einen <int> oder <boolean> generieren und mit den verschiedenen Konditionen abfragen bis es passt. Die Vektoren muss ich nochmal genauer anschauen. Habe zwar das Prinzip verstanden, jedoch bin ich noch sehr unsicher. Beispiel 1

float   myButtonXPosition;
float   myButtonYPosition;
int     myButtonSize = 60;
boolean mouseOverButton = false;
boolean locked = false;
float   buttonDifToX = 0.0;
float   buttonDifToY = 0.0;

PImage[] imageList = null;

void setup(){
size(600, 400);
myButtonXPosition = width/2.0;
myButtonYPosition = height/2.0;

imageList = new PImage [2];
imageList[0] = loadImage("./images/1.png");
imageList[1] = loadImage("./images/2.png");
}

float rotation = 0;

void draw(){
background(0);

if (mouseX > myButtonXPosition-myButtonSize && mouseX < myButtonXPosition+myButtonSize &&
mouseY > myButtonYPosition-myButtonSize && mouseY < myButtonYPosition+myButtonSize){

mouseOverButton = true;
}

else{
mouseOverButton = false;
}

pushMatrix();

ellipse(myButtonXPosition, myButtonYPosition, myButtonSize, myButtonSize);
translate(myButtonXPosition, myButtonYPosition);
pushMatrix();
rotate(rotation);
translate(100,100);
scale(1);
image(imageList[0],0,0,15,15);
pushMatrix();
rotate(rotation);
image(imageList[1],0,0,5,5);
popMatrix();
popMatrix();
popMatrix();

rotation+= 0.008;
}

void mousePressed() {

if(mouseOverButton){
locked = true;
}

else{
locked = false;
}

}

void mouseDragged() {

if(locked){
myButtonXPosition = mouseX-buttonDifToX;
myButtonYPosition = mouseY-buttonDifToY;
}
}

void mouseReleased() {
locked = false;
}

Output 1 Beispiel 2 (Übung Animation)

PVector     startPos = new PVector();
PVector     endPos = new PVector();
int         curTime = 0;
int         animSpeed = 30;
int         animTime = 2000;
boolean     drawFlag=false;
int          press = 0;
boolean      animDir = false;

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

void draw() {
background(51);

if (animDir == false) {
curTime += animSpeed;
}

else {
curTime -= animSpeed;
}

if (curTime>=animTime) {
animDir = true;
}

else if (curTime <= 0) {
animDir = false;
}

// calc. the current time in the animation
float normTime = curTime * 1.0 / animTime;

if (drawFlag){

stroke(255);
line(startPos.x, startPos.y,
endPos.x, endPos.y);

// calculate the position of the circle on the line
PVector dir = PVector.sub(endPos, startPos);

PVector pos = PVector.add( startPos, PVector.mult(dir, normTime));
ellipse(pos.x, pos.y, 20, 20);
}
}

void mousePressed(){
switch(press) {
case 0:
drawFlag = true;
curTime = 0;
startPos.set(mouseX, mouseY, 0);
endPos = startPos.get();
press++;
break;
case 1:
endPos.set(mouseX, mouseY, 0);
press++;
break;
case 2:
drawFlag = false;
press = 0;
break;
}
}

Output 2