Tilt painting - OpenProcessing

mySketch
tab2
xxxxxxxxxx
 
let particles = [];
let particlesNum;
let colors = [];
let colorPatarn;
let mx, my;
​
function setup() {
    createCanvas(windowWidth, windowHeight);
    createMetaTag();
    setupDevice();
    background(255);
    colors[0] = ['#152228', '#01737E', '#FEFFF2', '#F64203', '#013D45', '#1D435C', '#11A3B3', '#EFBF1F', '#E2641B', '#E43120'];
    
    colorPatarn = int(random(colors.length));
    //colorPatarn = 0;
    particlesNum = 400;
    for (let i = 0; i < particlesNum; i++) {
        const x = random(width);
        const y = random(height);
        //const wh = random(10, 50);
        const wh = map(dist(x, y, width/2, height/2), 0, width/2, 50, 10);      
        const c = colors[colorPatarn][int(random(colors[colorPatarn].length))];
        particles[i] = new Particle(x, y, wh, c);
    }
}
​
function draw() {
    if(rotationX === 0 && rotationY === 0){
        mx = (mouseX - width/2) / 100;
        my = (mouseY - height/2) / 100;
    } else {
        mx = map(rotationY, -90, 90, -displayHeight/2, displayHeight/2)/10;
        my = map(rotationX, -90, 90, -displayWidth/2, displayWidth/2)/10;
    }
    
    for (let i = 0; i < particlesNum; i++) {
        particles[i].update(mx, my);
        particles[i].display();
    }
}
​
function touchMoved() {
    // prevent the display from moving around when you touch it
    return false;
  }
  
  function createMetaTag() {
    let meta = createElement('meta');
    meta.attribute('name', 'viewport');
    meta.attribute('content', 'user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,width=device-width,height=device-height');
    
    let head = select('head');
    meta.parent(head);
  }
  
  //デバイスの設定を行う関数
  function setupDevice() {
    if (typeof(DeviceOrientationEvent) !== 'undefined' && typeof(DeviceOrientationEvent.requestPermission) === 'function') {
      // ios 13 の場合
      DeviceOrientationEvent.requestPermission()
        .catch(() => {
          // 最初だけボタンを表示する
          let button = createButton("click to allow access to sensors");
          button.style("font-size", "24px");
          button.center();
          button.mousePressed(requestAccess);
          throw error;
        })
        .then(() => {
          // 1回設定すればOKに
          permissionGranted = true;
        })
    } else {
      // ios 13以外    
      permissionGranted = true;
    }
  }
  
  //ios 13でデバイスの設定をリクエストする
  function requestAccess() {
    DeviceOrientationEvent.requestPermission()
      .then(response => {
        if (response == 'granted') {
          permissionGranted = true;
        } else {
          permissionGranted = false;
        }
      })
      .catch(console.error);
    this.remove();
  }