Category: Experiements

Stage 1: draw a ball and assign behaviors to it — in this case, bounce around the edges
https://editor.p5js.org/megagpxp/sketches/hwRM3G0aQ

let posx;
let posy;
let xSpeed;
let ySpeed;

function setup() {
  createCanvas(400, 400);
  posx = width/2;
  posy = height/2;
  xSpeed = random(-5, 5);
  ySpeed = random(-5, 5);
}

function draw() {
  background(220);
  posx += xSpeed;
  if (posx > width || posx < 0) {
    xSpeed *= -1;
  }
  posy += ySpeed;
  if (posy > height || posy < 0) {
    ySpeed *= -1;
  }
  ellipse(posx, posy, 10);
}

Stage 2: make the ball into a class
https://editor.p5js.org/megagpxp/sketches/FAVtr2ZsG

let oneBall;

function setup() {
  createCanvas(400, 400);
  oneBall = new ball(random(0, width), random(0, height), random(-3, 3), random(-3, 3));
}

function draw() {
  background(220);
  oneBall.update();
  oneBall.display();
}

class ball {
  constructor(px, py, sx, sy) {
    this.px = px;
    this.py = py;
    this.sx = sx;
    this.sy = sy;
  }

  update() {
    this.px += this.sx;
    if (this.px > width || this.px < 0) {
      this.sx *= -1;
    }
    this.py += this.sy;
    if (this.py > height || this.py < 0) {
      this.sy *= -1;
    }
  }

  display() {
    ellipse(this.px, this.py, 50);
  }
}

Stage 3: bounce 100 balls
https://editor.p5js.org/megagpxp/sketches/v3DmiOK-B

let manyBalls = [];
function setup() {
  createCanvas(400, 400);
  for (let i = 0; i < 100; i ++) {
    manyBalls[i] = new ball(
      random(0, width),
      random(0, height),
      random(-3, 3),
      random(-3, 3)
    );
  }
}

function draw() {
  background(220);
  for (let i = 0; i < 100; i ++) {
  manyBalls[i].update();
  manyBalls[i].display();
  }
}

class ball {
  constructor(px, py, sx, sy) {
    this.px = px;
    this.py = py;
    this.sx = sx;
    this.sy = sy;
  }

  update() {
    this.px += this.sx;
    if (this.px > width || this.px < 0) {
      this.sx *= -1;
    }
    this.py += this.sy;
    if (this.py > height || this.py < 0) {
      this.sy *= -1;
    }
  }

  display() {
    ellipse(this.px, this.py, 50);
  }
}

Stage 4: define the relationship between bouncing balls
https://editor.p5js.org/megagpxp/sketches/YYVsvsTkf

let manyBalls = [];
function setup() {
  createCanvas(400, 400);
  for (let i = 0; i < 100; i++) {
    manyBalls[i] = new ball(
      random(0, width),
      random(0, height),
      random(-3, 3),
      random(-3, 3)
    );
  }
}

function draw() {
  background(220);
  for (let i = 0; i < 100; i++) {
    manyBalls[i].update();
    //manyBalls[i].display();
    for (let n = 0; n < 100; n++) {
      let d = dist(manyBalls[i].px, manyBalls[i].py, manyBalls[n].px, manyBalls[n].py);
      if (d < 60) {
        let w = ((60-d)/60)*3;
        strokeWeight(w);
        line(manyBalls[i].px, manyBalls[i].py, manyBalls[n].px, manyBalls[n].py);
      }
    }
  }
}

class ball {
  constructor(px, py, sx, sy) {
    this.px = px;
    this.py = py;
    this.sx = sx;
    this.sy = sy;
  }

  update() {
    this.px += this.sx;
    if (this.px > width || this.px < 0) {
      this.sx *= -1;
    }
    this.py += this.sy;
    if (this.py > height || this.py < 0) {
      this.sy *= -1;
    }
  }

  display() {
    ellipse(this.px, this.py, 50);
  }
}

Casey Reas’s Process

When Dr. Peter Venkman visited Dana’s apartment in the first Ghostbusters movie, he used a device known as the “Ghost Sniffer”. 

This device is actually a Bacharach model 300 sniffer combustible gas detecting device, a real-world gadget used to detect specific gases and oxygen levels. Venkman used it to purportedly detect “Ectoplasmic vapor trails” and analyze the air for paranormal activity. It’s mentioned that Venkman himself wasn’t entirely certain if he was using the device correctly in the scene.

Hmmm… what play experience can be made for a ghost sniffer like controller? I personally really like the tiny pump action.

Found this:
https://github.com/m5stack/M5Unit-EXTIO2/blob/main/examples/Unit_EXTIO2_M5Core/SERVO_CTL/SERVO_CTL.ino

/*
  Servo control
  舵机控制
*/
#include <M5Stack.h>
#include <M5GFX.h>
#include "M5_EXTIO2.h"

M5GFX display;
M5Canvas canvas(&display);
M5_EXTIO2 extio;

void setup() {
    M5.begin();
    display.begin();
    canvas.setColorDepth(1);  // mono color
    canvas.setFont(&fonts::efontCN_14);
    canvas.createSprite(display.width(), display.height());
    canvas.setPaletteColor(1, GREEN);
    while (!extio.begin(&Wire, 21, 22, 0x45)) {
        Serial.println("extio Connect Error");
        M5.Lcd.print("extio Connect Error");
        delay(100);
    }
    // extio.setAllPinMode(DIGITAL_INPUT_MODE);
    // extio.setAllPinMode(DIGITAL_OUTPUT_MODE);
    // extio.setAllPinMode(ADC_INPUT_MODE);
    extio.setAllPinMode(SERVO_CTL_MODE);
    // extio.setAllPinMode(RGB_LED_MODE);
}

char info[50];

void loop() {
    canvas.fillSprite(0);
    canvas.setTextSize(2);
    canvas.drawString("SERVO CTL MODE", 10, 10);
    canvas.drawString("FW VERSION: " + String(extio.getVersion()), 10, 40);
    for (uint8_t deg = 0; deg <= 180; deg += 45) {
        for (uint8_t i = 0; i < 8; i++) {
            extio.setServoAngle(i, deg);
            Serial.printf("CH:%d DEG: %d", i, deg);
            canvas.drawRect(0, i * 20 + 75, 200, 15, 1);
            canvas.fillRect(0, i * 20 + 75, map(deg, 0, 180, 0, 200), 15, 1);
            canvas.setCursor(220, i * 28 + 10);
            canvas.setTextSize(1);
            canvas.printf("CH:%d DEG: %d", i, deg);
        }
        canvas.pushSprite(0, 0);
        vTaskDelay(500);
    }
    canvas.setTextSize(2);
    canvas.drawString("SERVO CTL MODE", 10, 10);
    canvas.drawString("FW VERSION: " + String(extio.getVersion()), 10, 40);
    for (int pulse = 500; pulse <= 2500; pulse += 100) {
        for (uint8_t i = 0; i < 8; i++) {
            extio.setServoPulse(i, pulse);
            Serial.printf("CH:%d P: %d", i, pulse);
            canvas.drawRect(0, i * 20 + 75, 200, 15, 1);
            canvas.fillRect(0, i * 20 + 75, map(pulse, 500, 2500, 0, 200), 15,
                            1);
            canvas.setCursor(220, i * 28 + 10);
            canvas.setTextSize(1);
            canvas.printf("CH:%d P: %d", i, pulse);
        }
        canvas.pushSprite(0, 0);
    }
    delay(100);
    canvas.pushSprite(0, 0);
}

My next book game idea is of course a miniature battle royal style game. I had a quick prototype setup and didn’t expect the most difficult part is getting M5Stack’s PaHub to work with multiple I2C devices at the same time. It seems there is not enough documentation and code samples available on the internet.

The two major challenges that I ran into were:

• RFID 2 I2C unit requires initiation when creates the instance (MFRC522 mfrc522(0x28);), how do I work this into the channel selection while using PaHub?
• I used the PaHub example from M5Stack, somehow 0x28 (RFID 2 default address) shows up in CH0 when RFID 2 unit was plugged into CH1.

It looks like other folks also ran into the same problem.
https://community.m5stack.com/topic/6995/rfid-2-unit-and-i2c-hub-1-to-6-expansion-unit/9

Interestingly, I used the I2C Scanner Example Code from Adafruit. It actually sort the 0x28 under the right channel which is 1 in this case.
…
PCA Port #1
Found I2C 0x10
Found I2C 0x28
Found I2C 0x68
Found I2C 0x75
…

#include "Wire.h"
#define PCAADDR 0x70

void pcaselect(uint8_t i) {
  if (i > 7) return; 
  Wire.beginTransmission(PCAADDR);
  Wire.write(1 << i);
  Wire.endTransmission();  
}

// standard Arduino setup()
void setup()
{
    while (!Serial);
    delay(1000);

    Wire.begin();
    
    Serial.begin(115200);
    Serial.println("\nPCAScanner ready!");
    
    for (uint8_t t=0; t<8; t++) {
      pcaselect(t);
      Serial.print("PCA Port #"); Serial.println(t);

      for (uint8_t addr = 0; addr<=127; addr++) {
        if (addr == PCAADDR) continue;

        Wire.beginTransmission(addr);
        if (!Wire.endTransmission()) {
          Serial.print("Found I2C 0x");  Serial.println(addr,HEX);
        }
      }
    }
    Serial.println("\ndone");
}

void loop() 
{
}

I continued to follow the Adafruit tutorial, with some modifications, I got it to work! Now on to the 2nd I2C device. Original code can be found here: Multi-Sensor Example Code

#include <M5Stack.h>

#include "MFRC522_I2C.h"
#include "ClosedCube_TCA9548A.h"

#define FRONT 2

#define X_LOCAL 100
#define Y_LOCAL 35
#define X_OFFSET 160
#define Y_OFFSET 34

#define PaHub_I2C_ADDRESS 0x70
//#define DEV_I2C Wire

ClosedCube::Wired::TCA9548A tca9548a;
MFRC522 mfrc522(0x28);

void pcaselect(uint8_t i) {
  if (i > 6) return;
  Wire.beginTransmission(PaHub_I2C_ADDRESS);
  Wire.write(1 << i);
  Wire.endTransmission();
}

void setup() {
  M5.begin();
  M5.Power.begin();
  Wire.begin();
  tca9548a.address(PaHub_I2C_ADDRESS);  // Set the I2C address.
  M5.Lcd.setTextFont(4);
  M5.Lcd.setCursor(70, 0, 4);
  M5.Lcd.setTextColor(YELLOW, TFT_BLACK);
  M5.Lcd.println(("PaHUB Sensors"));
  M5.Lcd.setTextColor(TFT_WHITE, TFT_BLACK);

  Serial.println("CH1 MFRC522");
  // define the port on the PCA9548A for the first sensor
  pcaselect(1);
  mfrc522.PCD_Init();  // Init MFRC522
}

void loop() {
  // define port on the PCA9548A
  pcaselect(1);
  M5.Lcd.setCursor(40, 47);
  if (!mfrc522.PICC_IsNewCardPresent() || !mfrc522.PICC_ReadCardSerial()) {
    delay(200);
    return;
  }
  M5.Lcd.fillRect(42, 47, 320, 20, BLACK);
  for (byte i = 0; i < mfrc522.uid.size; i++) {  // Output the stored UID data
    M5.Lcd.print(mfrc522.uid.uidByte[i] < 0x10 ? " 0" : " ");
    M5.Lcd.print(mfrc522.uid.uidByte[i], HEX);
  }
  M5.Lcd.println("");
}

• Unity Hub: 3.11.1
• Unity Version: 6000.0.43f1
• Project Setup Tool checked, including both Passthrough over Meta Quest Link and Spatial Data over Meta Quest Link are enabled in the Meta Quest Link settings.
• NuGetForUnity installed through NuGetForUnity.4.3.0.unitypackage
• ZXing.Net 0.16.10 by Michael Jahn installed
• ZXING_ENABLE checked
• Imported TMP Essential Resources
• Opened up the QRCodeTracking scene for the first time and got 3 of the same warnings:
  “Your project uses a scriptable render pipeline. You can use Camera.stereoTargetEye only with the built-in renderer.”
• Opened up Build Profiles
• Switched Platform to Android
• Build And Run

This is the 3rd try and it worked. The first two tries, I didn’t know there were dependencies needed to make it work. This is very fun, but still not what I wanted exactly. I wanted an AR Marker tracker.

M5 Red only comes with 1 Port B and I would to use 2 Port B units without the hub which added to the overall formfactor. The two units I need are the Limit Switch unit (U145) and the Vibrator unit (U059) and, fortunately, they are hooked up to a different GPIO pin on Port B. The Limit Switch unit is on GPIO 36 (Input, Whit) while the Vibrator unit is on GPIO 26 (In/Out, Yellow).

Theoretically speaking, if I split a grove cable into 2, I should be able to connect both units to Port B at the same time. I have done this a couple times for other projects to save space, but I do worry the vibrator might draw too much power from the same cable and eventually cause the switch to stop working properly.

It works beautifully.

Programing the vibrator is super fun. I had in my mind the “pew pew pew” sound, and this is what I ended up with. I have not played with the frequency and resolution yet.

[Note to myself] The ESP32 can generate a PWM signal with a frequency of up to 40 MHz. It is currently set to 10000. If the PWM resolution is “n” bits, the timer counts from 0 to 2ⁿ-1 before it resets. For example, if we configure the timer with a frequency of 1 Hz and a resolution of 8 bits, the timer will take 1 second to count from 0 to 255 (2⁸-1). In the case of a frequency of 1 Hz and a resolution of 16 bits, the timer will still take 1 second, but it will count from 0 to 65,535 (2¹⁶-1). The resolution is currently set to 10.

//Vibration
        for (int ii = 0; ii < 6; ii++) {
          ledcWrite(ledChannel, 512 - ii*40);
          delay(40 + ii*10);
        }
        ledcWrite(ledChannel, 0);  // set buzz off