Processing Works Perfectly Local but Cursor Incorrect Position Online

matt136

Hello,

My file works perfectly local when I run it in Processing, however, when I upload this to my website the cursor on the animation is around 500px from my cursor. Please see here:

https://ts133842-container.zoeysite.com/

The size of the frame matches the size against size(). My code is below.

Particle p = new Particle();

final int LIGHT_FORCE_RATIO = 70;  
final int  LIGHT_DISTANCE= 70 * 50;  
final int  BORDER = 100;  
float baseRed, baseGreen, baseBlue;  
float baseRedAdd, baseGreenAdd, baseBlueAdd;  
final float RED_ADD = 3.2;   
final float GREEN_ADD = 1.7;  
final float BLUE_ADD = 4.3;  
float boxX, boxY;
float widthSize = width;

int rectWidth = 915;
int rectHeight = 197;


//PImage img;

void setup() {
  background(0);
  size(1840, 400);
 // surface.setResizable(true);
  noCursor();
  //img = loadImage("flowtoy.jpg");
  baseRed = 0;
  baseRedAdd = RED_ADD;

  baseGreen = 0;
  baseGreenAdd = GREEN_ADD;

  baseBlue = 0;
  baseBlueAdd = BLUE_ADD;

  boxX = width/2;
  boxY = height/2;
}

void draw() {
  //image(img, 400, 100, img.width/2, img.height/2);
  if (mouseX>boxX-rectWidth && mouseX<boxX+rectWidth &&
    mouseY>boxY-rectHeight && mouseY<boxY+rectHeight) {

    //saveFrame("output/LightDrawing_####.png");

    baseRed += baseRedAdd;
    baseGreen += baseGreenAdd;
    baseBlue += baseBlueAdd;

    colorOutCheck();

    p.move(mouseX, mouseY);


    int tRed = (int)baseRed;
    int tGreen = (int)baseGreen;
    int tBlue = (int)baseBlue;

    tRed *= tRed;
    tGreen *= tGreen;
    tBlue *= tBlue;


    loadPixels();

    int left = max(0, p.x - BORDER);
    int right = min(width, p.x + BORDER);
    int top = max(0, p.y - BORDER);
    int bottom = min(height, p.y + BORDER);


    for (int y = top; y < bottom; y++) {
      for (int x = left; x < right; x++) {
        int pixelIndex = x + y * width;

        int r = pixels[pixelIndex] >>16 & 0xFF;
        int g = pixels[pixelIndex] >> 8 & 0xFF;
        int b = pixels[pixelIndex] & 0xFF;


        int dx = x - p.x;
        int dy = y - p.y;
        int distance = (dx *dx ) + (dy* dy);  


        if (distance < LIGHT_DISTANCE) {
          int fixFistance = distance * LIGHT_FORCE_RATIO;

          if (fixFistance == 0) {
            fixFistance = 1;
          }   
          r = r + tRed / fixFistance;
          g = g + tGreen / fixFistance;
          b = b + tBlue / fixFistance;
        }
        pixels[x + y * width] = color(r, g, b);
      }
    }

     updatePixels();
  } else { 
    setup();
  }

  //updatePixels();
}


void colorOutCheck() {
  if (baseRed < 10) {
    baseRed = 10;
    baseRedAdd *= -1;
  } else if (baseRed > 255) {
    baseRed = 255;
    baseRedAdd *= -1;
  }

  if (baseGreen < 10) {
    baseGreen = 10;
    baseGreenAdd *= -1;
  } else if (baseGreen > 255) {
    baseGreen = 255;
    baseGreenAdd *= -1;
  }

  if (baseBlue < 10) {
    baseBlue = 10;
    baseBlueAdd *= -1;
  } else if (baseBlue > 255) {
    baseBlue = 255;
    baseBlueAdd *= -1;
  }
}

void mousePressed()
{
  setup();
}

class Particle {
  int x, y;        
  float vx, vy;    
  //float slowLevel;


  Particle() {
    x = (int)3;
    y = (int)2;
 //   slowLevel = random(100) + 1;
  }

  void move(float targetX, float targetY) {
    vx = (targetX - x) ;
    vy = (targetY - y) ;

    x = (int)(x + vx);
    y = (int)(y + vy);
  }
}

Is anything immediately obvious? Thank you.

kfrajer

Would this help? Check the section: Making your sketch "see" javascript in

processingjs.org/articles/PomaxGuide.html

Kf

matt136

Thank you.