p5.js Touch touchMoved()用法及代碼示例

注冊觸摸移動後，將調用p5.js中的touchMoved()函數。如果未定義touchMoved()函數，則將調用mouseDragged()函數(如果已定義)。

用法:

touchMoved([Event])

以下示例程序旨在說明p5.js中的touchMoved()函數：
示例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; 
}

輸出：

示例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; 
}

輸出：

參考： https://p5js.org/reference/#/p5/touchMoved

相關用法

注：本文由純淨天空篩選整理自sarthak_ishu11大神的英文原創作品 p5.js Touch | touchMoved()。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。