JavaScript moving objects from starting location to ending locations

Question

I am taking a course online and I can't find help if am stuck..... I am using brackets and p5.js these are the instructions i have:

• Edit the spotlight object by creating x and y properties initialised to your location. Also endX and endY properties initialised to one of the Minsky's location.

• Assign the other 2 spotlights and create the required properties.

• Make the spotlight move perfectly from you towards the Minskys by adjusting the increments of x and y properties. If you get everything correct then it will stop over the target.

• Adjust x and y properties using

• "+=" or "+"
• "-=" or "-"

*/

(the minsky brothers are the targets i need the spotlight to be on, the "your location" is the start location)

i will copy and paste my code and the message i get when i submit :

 // other variables, you don't need to change these
var img, spotlight_image;

var spotlight1;
var spotlight2;
var spotlight3;


function preload()
{
   img = loadImage('scene.png');


   spotlight_image = loadImage('spotlight.png')

}

function setup()
{
   createCanvas(img.width, img.height);

   //complete the initialisation of the first spotlight
 //with properties x, y, endX and endY

   spotlight1 = {
       image: spotlight_image
   
   x: 164,
   y: 810,
   endX: 780,
   endY: 640,
       }
   //Initialize the second and third spotlights
spotlight2 = {
       image: spotlight_image           
  x: 164,
  y: 810,
   endX: 480,
   endY: 474,
    
        }
       spotlight3 = { 
           image: spotlight_image
   x: 164,
   y: 810,
   endX:766,
   endY: 290,
            }
}

function draw()
{
   image(img, 0, 0);

   // alter the properties x and y of the objects below to animate the spotlights
       
          spotlight.x += 1; 
           spotlight.y += 1;


   ////////// DO NOT CHANGE ANYTHING BELOW /////////////

   var spotlights = [spotlight1, spotlight2, spotlight3];
   var spotlightSize = 300;

   blendMode(BLEND);
   background(30);

   for (var i = 0; i < spotlights.length; i++)
   {
       var spotlight = spotlights[i];
       //stop the spotlight if it's near enough to endx and endy
       if(spotlight)
       {
              //stop the spotlight if it goes off of the screen
           spotlight.x = min(spotlight.x, 960);
           spotlight.y = min(spotlight.y, 945);
           spotlight.x = max(spotlight.x, 0);
           spotlight.y = max(spotlight.y, 0);

           if (abs(spotlight.endX - spotlight.x) < 50
               && abs(spotlight.endY - spotlight.y) < 50)
           {
               spotlight.x = spotlight.endX;
               spotlight.y = spotlight.endY;
           }


           image(spotlight.image, spotlight.x-spotlightSize/2,
                   spotlight.y-spotlightSize/2, spotlightSize, spotlightSize);
       }
   }

   blendMode(DARKEST);
   image(img, 0, 0);
   ////////// DONOT CHANGE ANYTHING ABOVE /////////////
}

the message i get when submitting:

Error in compile SyntaxError: Unexpected identifier

Blockquote

Answer 1

This is fairly easy to do. If I understand correctly, you want to move an object towards a point over a certain amount of time. All you have to do is get the range between the two X coordinates and the two Y coordinates, divide them by how many frames you want it to be moving for, and update its position by that amount every frame until it reaches its destination.