Why does my sketch behave differently in processing than online?

edited November 2016 in JavaScript Mode

I want to make a little sketch that takes mouse coordinates, converts them into angles for an arm using trigonometry and draws said arm with the right angles. It all works online (http://sketchpad.cc/WOgGcdTlAF) but in the processing program it only moves in wierd steps and along certain lines. Try it out yourself. Literally copy the exact code from sketchpad and put it into the processing program. If anyone has any idea as to why and how I can avoid this problem, please help. Is it a glitch that should be reported? If so, what exactly is going wrong here? PS: Don't mind the commented out things in the code, they are either for a serial in arduino or they still originate from when I made this on khanacademy). Right now I'm using version 3.2.3 of the program.

Code again:
//import processing.serial.*;

//Serial arduinoSerial;
//String val;

int endX = 100;
int endY = 100;


int length = 300;
int length2 =300;

int centerX=600;
int centerY=300;

float angle;
float angle2;

void setup() {
  size(600, 600);
  //String portName = Serial.list()[0];
  //printArray(Serial.list());
  //arduinoSerial = new Serial(this, portName, 9600);
}

void draw() {
  //if(arduinoSerial.available()>0){
    //val = arduinoSerial.readStringUntil(10);
    //println(val);
  //}


  background(255, 255, 255);
    //angle+=1;
    //angle2+=1;

    endX=mouseX;
    endY=mouseY;


    angle = -(acos((pow(length2, 2)-pow(dist(centerX, centerY, endX, endY), 2)-pow(length, 2))/(2*dist(centerX, centerY, endX, endY)*length))+atan((endY-centerY)/(endX-centerX)));

    angle2 = -acos((pow(dist(centerX, centerY, endX, endY), 2)-pow(length2, 2)-pow(length, 2))/(2*length2*length));

    println(degrees(angle));
    println(degrees(angle2));

    //angle = degrees(angle);
    //angle2 = degrees(angle2);

    stroke(0, 0, 0);
    strokeWeight(10);
    point(endX, endY);
    line(centerX, centerY, centerX+cos(angle)*length, centerY-sin(angle)*length);
    stroke(255, 0, 0);
    line(centerX+cos(angle)*length, centerY-sin(angle)*length, centerX+cos(angle)*length+cos(angle2+angle)*length2, centerY-sin(angle)*length-sin(angle2+angle)*length2);
    textSize(20);
    fill(0, 0, 255);
    //text((round(centerX+cos(angle)*length+cos(angle2+angle)*length2)).toString()+" "+(round(centerY-sin(angle)*length-sin(angle2+angle)*length2)).toString(), centerX+cos(angle)*length+cos(angle2+angle)*length2, centerY-sin(angle)*length-sin(angle2+angle)*length2);

    //text(angle, centerX-100, centerY-20);
    //text(angle2, centerX+cos(angle)*length, centerY-sin(angle)*length+20);



}

Answers

  • edited November 2016 Answer ✓

    In Java, when doing a division operation, when both of its operands are of integral type, the result is also integral. Any fractional part is removed from it! @-)

    In JS, there's no integral division. The result doesn't have its fractional part truncated! ~O)

    The language "glitch" happens at the division expression inside function atan(): #-o
    atan( (endY - centerY)/(endX - centerX) )

    We need to (cast) at least 1 of its operands to (float): *-:)
    atan( (float) (endY - centerY)/(endX - centerX) )

    While I was at it, I've slimmed your code as well: :ar!

    // forum.Processing.org/two/discussion/19166/
    // why-does-my-sketch-behave-differently-in-processing-than-online
    
    // 2016-Nov-20
    
    static final int L1 = 300, L2 = 300, L1Q = L1*L1, L2Q = L2*L2;
    static final int CX = 600, CY = 300;
    
    void setup() {
      size(600, 600);
      smooth(3);
      noCursor();
      strokeWeight(10);
    }
    
    void draw() {
      final int endX = mouseX, endY = mouseY;
    
      final float d = dist(CX, CY, endX, endY), dq = d*d;
      final float at = atan((float) (endY - CY) / (endX - CX));
    
      final float ang1 = -(acos((L2Q - L1Q - dq) / (2*L1*d)) + at);
      final float ang2 = -acos((-L2Q - L1Q + dq) / (L2*L1<<1));
    
      final float c1 = cos(ang1), s1 = sin(ang1);
      final float x1 = CX + c1*L1, y1 = CY - s1*L1;
    
      final float x2 = x1 + cos(ang2 + ang1)*L2;
      final float y2 = y1 - sin(ang2 + ang1)*L2;
    
      background(-1);
      stroke(#FF0000);
      line(x1, y1, x2, y2);
    
      stroke(0);
      line(CX, CY, x1, y1);
      point(endX, endY);
    }
    
  • atan2 is a bit friendlier and doesn't have the divide-by-zero error possibility

Sign In or Register to comment.