CODEWITHSUNDEEP
javascriptp5.js
Samuelhp98
Samuelhp98

Reputation: 27

p5.js mouseclick move over Canvas

I am trying to solve a school assignment in p5 JavaScript. I want something to move over the canvas after one mouseclick. But it only moves a little bit and I have to click several times to get it all the way over. What have I done wrong? Shouldn't the loop make it move all the way? Can post the whole code if needed.

function CanvasPressed()

{
  
  if ( mouseX > 0 && mouseX < 638 && mouseY > 0 && mouseY < 100 )
  {
    
    Bird.stop();
    Bird.play();

    for ( let b = 640; b > 0; b--)
    {
     x = x - 0.05;
    }
          
  }

Upvotes: 0

Views: 246

Answers (1)

Ulti
Ulti

Reputation: 543

Alright, so you've got a couple misunderstood things, here:

// purely aesthetic but in javascript functions are usually written as (i think) camelCase
// so: canvasPressed() rather than CanvasPressed(), Class-es start with upper case
function CanvasPressed()
{
  // you can check for width & height if you want if ( mouseX > 0 && mouseX < width)
  if ( mouseX > 0 && mouseX < 638 && mouseY > 0 && mouseY < height )
  {

    for ( let b = 640; b > 0; b--) // this, in this case, does the same as for(let i = 0; i < width; i ++)
    {
     x += 0.05
     // 0.05 is very little, only a very small part of a pixel
    }
    // here it moves 0.05 * 640 (0.05 + 0.05 + 0.05 ... )
          
  }
}

javascript naming conventions thingy if you want

and this is how i would make it move through the canvas:

let mouseWasPressed = false;
let x = 20

function draw() {
  background(20);
  ellipse(x, height / 2, 40)
  
  if(mouseWasPressed) // don't need {} for 1 line after the if()
    x ++; // x = x + 1   shortening in javascript
  // }
}

function mousePressed(){
  mouseWasPressed = true
}

if you don't want the "animation" you could use your previous method, but change the 0.05 to 1:

for(let i = 0; i <= width; i ++) // you don't have to add parentheses for 1 line
   x ++;     // x = x + 1   just a shortening in javascript

OR just

 x = width // or x += width (x = x + width)

Upvotes: 1

Related Questions