Easing issue.

I can't seem to get my rotation to ease. Please be aware that this is for p5.js (bit more picky on variable declaration placement then processing)

var achtergrond, rotatie;
var tijd = 2000;
var millisNu = 0;
var easing = 0.1;


function setup() {
  createCanvas(500,500);
  achtergrond = loadImage("background.png");
}

function draw() {
    image(achtergrond,0,0);
    var pRotatie = 0;
    var dRotatie = 0;

        if (millis()-millisNu > tijd){
        rotatie = random(-360,360);
        millisNu = millis();
        }

    dRotatie = rotatie-pRotatie;
    pRotatie += (rotatie-pRotatie)*easing;

    push();
    translate(250,250);
    rotate(radians(pRotatie));
    stroke(255);
    noFill();
    ellipse(0,0,200,200);
    line(0, 0, 0, -100);
    fill(0);
    ellipse(0, -100, 20, 20);
    fill(255);
    ellipse(0, -100, 5, 5);
    noFill();
    strokeWeight(3);
    arc(0, 0, 40, 40, 0, PI, OPEN);
    pop();

    fill(255);
    noStroke();
    textAlign(CENTER);
    text(floor(dRotatie),250,250+40);

}

Answers

  • resolved! had to declare rotatie=0; in the setup.

  • edited December 2014

    As you've already found out, JS variables start w/ value undefined.
    Java pre-initialize its fields w/ a value according to their declared type! ;;)
    Numbers w/ 0 & objects w/ null mostly. ~O)

Sign In or Register to comment.