Using velocity to move rectangle in javascript using processing.js

Question

I am working on a simple pong clone using javascript and processing.js . I have made classes for the paddles, which are then extended to make a class which will be controlled by the player(s). Currently, I am attempting to implement handling for keyboard input within the player controlled class. My intent is that when w or s is pressed, I update the position of the player's paddle through a velocity represented by a pVector variable within the player class.

However, when the corresponding keys are pressed, currently the paddle simply disappears.

The script can be seen on jsfiddle here, and My code is as follows:

  // For reference
  // standard rectangle constructor is: rect(x, y, width, height);

    class Paddle
    {
        //width of paddle
        float pWidth;
        //height of paddle
        float pHeight;
        //initial paddle x coordinate
        float x;
        //initial paddle y coordinate
        float y;

        Paddle(float w, float h, float startX, float startY)
        {
            //set width
            paddleWidth = w;
            //set height
            paddleHeight = h;
            //set start x
            x = startX;
            //set start y
            y = startY;
        }

        void update()
        {
        }

        void draw()
        {
            //draw and fill rectangle with white
            fill(255)
            rect(x,y,paddleWidth,paddleHeight)
        }
    }

    class Player extends Paddle
    {
        Player(float w, float h, float startX, float startY)
        {
            super(w,h,startX,startY);
        }
    }

    class PlayerOne extends Paddle
    {
        pVector playerVelocity = (0,0);

        PlayerOne(float w, float h, float startX, float startY)
        {
            super(w,h,startX,startY);
        }

        void update()
        {
            debugger;

            if(keyPressed)
            {
                if(key == 'w')
                {
                    y -= playerVelocity.y;
                }
                else if(key == 's')
                {
                    y += playerVelocity.y;
                }
            }    
        }
    }


    //array list to hold the player paddles
    ArrayList<Paddle> paddles = new ArrayList<Paddle>();
    //middle x and middle y
    float mx, my, pw, ph;

    void setup()
    {
        mx = width/2;
        my = height/2;
        pw = 10;
        ph = 50;

        player1 = new PlayerOne(pw,ph,10,10);
        player2 = new Player(pw,ph,385,10);

        paddles.add(player1);
        paddles.add(player2);

        size(400,400);
    }

    void draw()
    {
        background(0);
        fill(100,100,0);

        // update each paddle added to array list
        for(Paddle p: paddles)
        {
            p.update();
            p.draw();
        }
    }

What am I doing wrong?

UPDATE:

I put a breakpoint in with the line debugger after the condition on key press: if(keyPressed) . It seems that if the key is pressed once, it is detected repeatedly on every update for some reason.

Answer 1

In Procesing IDE it won't even compile... it should be PVector instead of pVector, but in jsfiddle it compiles... Also you need to use new with PVectors. So playerVelocity in not correctly initialized and when added to position goes nuts... Try:

PVector playerVelocity = new PVector(1,1);

note that if velocity is 0 there will be no move, so I used 1. hth