Unexpected identifier at new Function

matt136

Hello.

I am receiving the following error after moving my PDE file to an external server:

I don't know which part of my code it's referencing though.

The thing I can see broken with the interaction is that when the mouse leaves the canvas, the drawing should reset. Everything else looks to be working as it was.

Please see my code 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;

void setup() {
   background(0);
   size(1840, 400);
   noCursor();
   baseRed = 0;
   baseRedAdd = RED_ADD;

   baseGreen = 0;
   baseGreenAdd = GREEN_ADD;

   baseBlue = 0;
   baseBlueAdd = BLUE_ADD;

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

void draw() {
   baseRed += baseRedAdd;
   baseGreen += baseGreenAdd;
   baseBlue += baseBlueAdd;

   colorOutCheck();

   p.move(coordX, coordY);

   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();
}


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;
   }
}

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

   Particle() {
      x = (int)3;
      y = (int)2;
   }

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

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

I'm completely stumped. Can anybody offer any insight? Thanks so much.

TfGuy44

One thing I see that immediately worries me is that your mousePressed() function calls setup(). Don't do this. Instead, move the lines of code that you want to happen again to a different function (perhaps call it reset()), and then call that function from inside mousePressed() and also from inside setup().

kfrajer

This is P.js right? Do you have your html?

When you say it was working in development, you mean it was working under Processing Java?

Before you deployed to your server, did you run it using a local host?

Kf

matt136

Hi TfGuy44 - I'll do that, thanks for your input there :)

GoToLoop

Your posted code doesn't compile under Processing's Java Mode:
Line #49: p.move(coordX, coordY);
coordX cannot be solved to a variable.

kfrajer

This is related to your previous post, right?

https://forum.processing.org/two/discussion/26402/unable-to-get-background-image-working-online#latest

Kf

matt136

@kfrajer - Sorry I should be clearer, it was working on a hosted platform before we added a domain to the platform. We then received CORS errors and had to host the PDE file elsewhere. Somehow it's become broken in the transfer. The thing I can see broken with the interaction is that when the mouse leaves the canvas, the drawing should reset.

Sorry guys, there is HTML and JS around this which allows for the mouse position to be correct, my bad. It does get slightly complicated though as the code below may also be referencing the second PDE we have for touchscreen devices. Here it is:

<script>
    jQuery(document).ready(function() {
        // If the browser is on a device, use the device canvas.
        if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
            jQuery('#canvas-animation').css('display', 'none');
        } else {
            jQuery('#canvas-animation-device').css('display', 'none');
        }
    });

    var coordX = 0;
    var coordY = 0;

    window.onmousemove = coordHandler;
    window.ontouchstart = coordHandler;
    window.ontouchmove = coordHandler;

    var width = window.innerWidth;

    // Desktop
    if (width > '768') {
        jQuery('#canvas-animation-device').css('min-height', '400px');
        jQuery('#canvas-animation-device').css('max-height', '400px');
        var leftPosition = 30;
    }
    // Tablet top position.
    if (width > '580' && width < '769') {
        var leftPosition = 40;
    }
    // Mobile top position.
    if (width < '581') {
        var leftPosition = 0;
    }

    function coordHandler(event) {
        topPosition = jQuery('#global-wrapper-cp-878fa344d768280196d58da0ded0fff9').offset().top
        switch (event.type) {
            case 'mousemove':
                coordX = event.clientX - leftPosition;
                coordY = event.clientY - (topPosition - window.scrollY);;
                break;
            case 'touchstart':
            case 'touchmove':
                var firstTouch = event.touches[0];
                coordX = firstTouch.clientX - leftPosition;
                coordY = firstTouch.clientY - (topPosition - window.scrollY);
                break;
        }
    }

    window.blockMenuHeaderScroll = false;
    jQuery(window).on('touchstart', function(e)
    {
        if (jQuery(e.target).closest('#canvas-animation-device').length == 1)
        {
            blockMenuHeaderScroll = true;
        }
    });
    jQuery(window).on('touchend', function()
    {
        blockMenuHeaderScroll = false;
    });
    jQuery(window).on('touchmove', function(e)
    {
        if (blockMenuHeaderScroll)
        {
            e.preventDefault();
        }
    });
</script>

matt136

Deleted

matt136

@kfrajer - It's unrelated. We removed the background and gave up on that part.