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

每次注冊觸摸後，都會調用一次p5.js中的touchStarted()函數。如果未定義touchStarted()函數，則如果定義了mousePressed()函數，則將調用它。

用法:

touchStarted([Event])

以下示例程序旨在說明p5.js中的touchStarted()函數：
示例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('Touch to change color', 30, 30); 
    
    // fill color according to touchStarted()  
    fill(valueX, 255 - valueY, 255 - valueX); 
    
    // draw ellipse   
    ellipse(mouseX, mouseY, 115, 115); 
  
} 
  
function touchStarted() { 
    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 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 touchStarted() { 
    valueX = mouseX % 255; 
    valueY = mouseY % 255; 
}

輸出：

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

相關用法

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