let gIsOn = false;

let gIsClockwise = true;

​

const gConnectedCubeArray = [];

const gCurrentRotateSpeedArray = [];

​

const EASE = 0.02;

const ON_COLOR = '#bfd200';

const OFF_COLOR = 220;

​

const showText = () => {

  const t = ' 1. Click to connect Cube. \n' 

            + ' 1. クリックしてキューブと接続 \n\n' 

            + ' 2. Space Key: Start/Stop rotation. \n' 

            + ' 2. スペースキー: 回転の開始/停止 \n\n' 

            + ' Max Speed | 最大スピード(↑/↓): ' + abs( gMaxSpeed ) + ' \n'

            + ' Direction | 回転方向(←/→): ' + ( gIsClockwise ? '🔁' : '🔄' );

  text( t, 70, 240 );

}

​

function setup() {

  createCanvas( 720, 720 );

  background( 220 );

  textStyle( BOLD );

  textSize( 30 );

  fill( 'black' );

}

​

​

function draw() {

​

  gConnectedCubeArray.forEach( ( cube, index ) => {

    gMaxSpeed = gIsClockwise ? abs(gMaxSpeed) : -1 * abs(gMaxSpeed) ;

    const targetSpeed = gIsOn ? gMaxSpeed : 0;

    const spdAry = gCurrentRotateSpeedArray;

    // Ease proc

    spdAry[ index ] += ( targetSpeed - spdAry[ index ] ) * EASE;

    // round speed value

    const speed = round( spdAry[index] );

​

    if( gIsOn || ( abs( speed ) > 0 ) ){

      cube?.rotate( speed, 0 );

    }else{

      cube?.stop();

    } 

​

  });

​

  // Update background & text.

  if ( gIsOn ) {

    background( ON_COLOR );

  } else {

    background( OFF_COLOR );

  }

  showText();

​

}

​

function mouseClicked() {

  P5tCube.connectNewP5tCube().then( cube => {

    gConnectedCubeArray.push( cube );

    gCurrentRotateSpeedArray.push( 0 );

    cube.turnLightOn('white');

  });

}

​

​

function keyPressed() {

  switch ( keyCode ) {

    case 32:

      /* Space key */

      switchOnOff();

      break;

    case 37:

      /* Left key */

      gIsClockwise = false;

      break;

    case 38:

      /* Up key */

      if( abs( gMaxSpeed ) < 100 ){ 

        gIsClockwise ? ( gMaxSpeed++ ) : ( gMaxSpeed-- ) ;

      }

      break;

    case 39:

      /* Right key */

      gIsClockwise = true;

      break;

    case 40:

      /* Down key */

      if( abs( gMaxSpeed ) ){

        gIsClockwise ? ( gMaxSpeed-- ) : ( gMaxSpeed++ ) ;

      }

      break;

  }

}

​

const switchOnOff = () => {

  gIsOn = !gIsOn;

}

​