processing

Processing & P5js & P5.play

This is where we will keep all our sketches from the tutorials

Some p5js sketches 'in action'(click the images to see it work)

P5js is Processing for Web : P5js helper codes

Tutorial transition from Processing to P5js https://github.com/processing/p5.js/wiki/Processing-transition

Mouse Events

Working with mouse events using p5js is easy. We can create sketches that do various things based on the mouse's position on the screen or when the mouse button is pressed, etc. Here is a list of the mouse related functions in p5js:

• mouseX
• mouseY
• pmouseX
• pmouseY
• winMouseX
• winMouseY
• pwinMouseX
• pwinMouseY
• mouseButton
• mouseIsPressed
• mouseMoved()
• mouseDragged()
• mousePressed()
• mouseReleased()
• mouseClicked()
• mouseWheel()

Touch events

• touchX
• touchY
• touches[]
• touchStarted()
• touchMoved()
• touchEnded()

Example of Keyboard functions

function keyPressed()
{
  // UP key
  if(keyCode == UP_ARROW)
  {
    ypos = ypos - numPixels; 
  }
 
  // DOWN key
  if(keyCode == DOWN_ARROW)
  { 
    ypos = ypos + numPixels; 
  }
 
  // RIGHT key
  if(keyCode == RIGHT_ARROW)
  {
    xpos = xpos + numPixels; 
  }
 
  // LEFT key
  if(keyCode == LEFT_ARROW)
  {
    xpos = xpos - numPixels; 
  }
}

P5.play : a library for p5.js for animation, gaming and using sprites

Paolo Pedercini's p5.play Library: http://molleindustria.github.io/p5.play/ Allison Parrish explains it all : https://creative-coding.decontextualize.com/making-games-with-p5-play/