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()。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。