p5.js Touch | touchMoved()

0 0 1 minute read

The touchMoved() function in p5.js is called when a touch move is registered. If no touchMoved() function is defined, the mouseDragged() function will be called instead if it is defined.

Syntax:

touchMoved([Event])

Below program illustrates the touchMoved() function in p5.js:
Example-1:

let valueX; 
let valueY; 
  
function setup() { 
    
    // Create Canvas of size 500*500 
    createCanvas(500, 500); 
} 
  
function draw() { 
    
    // set background color 
    background(200); 
    
    fill('green'); 
    // set text and text size 
    textSize(25); 
    
    text('Hold and Move to change color', 30, 30); 
    // fill color according to touchStarted()  
    fill(valueX, 255 - valueY, 255 - valueX); 
    
    // draw ellipse   
    ellipse(mouseX, mouseY, 115, 115); 
  
} 
  
function touchMoved() { 
    valueX = mouseX % 255; 
    valueY = mouseY % 255; 
} 

Output:

Example-2:

let valueX; 
let valueY; 
  
function setup() { 
    
    // Create Canvas of size 500*500 
    createCanvas(500, 500); 
} 
  
function draw() { 
    // set background color 
    background(200); 
    
    fill('green'); 
    // set text and text size 
    textSize(25); 
    
    text('Touch and Move to change color', 30, 30); 
    // fill color according to mouseMoved()  
    fill(valueX, 255 - valueY, 255 - valueX); 
    
    // draw rectangle  
    rect(mouseX, mouseY, 115, 115); 
    fill(valueY, 255 - valueX, 255 - valueX); 
  
    rect(mouseX, mouseY + 115, 115, 115); 
    fill(255 - valueY, 255 - valueX, 255 - valueY); 
  
    rect(mouseX - 115, mouseY, 115, 115); 
    fill(255 - valueY, 255 - valueY, 255 - valueY); 
  
    rect(mouseX - 115, mouseY + 115, 115, 115); 
} 
  
function touchMoved() { 
    valueX = mouseX % 255; 
    valueY = mouseY % 255; 
} 

Output:

Reference: https://p5js.org/reference/#/p5/touchMoved

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!