Unexpected identifier at new Function

edited April 2018 in JavaScript Mode

Hello.

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

Screenshot at Apr 18 14-22-04

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.

Answers

  • edited April 2018

    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().

  • 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

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

  • edited April 2018

    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 - 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>
    
  • edited April 2018

    Deleted

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

Sign In or Register to comment.