Arduino code:

#include <Tlv493d.h>#include <Wire.h>

int magnet;int pot;
Tlv493d Tlv493dMagnetic3DSensor = Tlv493d();
void setup() {  // put your setup code here, to run once:  pinMode(A0,INPUT);  Serial.begin(115200);    while(!Serial);  Tlv493dMagnetic3DSensor.begin();
}
void loop() {  // put your main code here, to run repeatedly:  // magnet = sensor.read();  Tlv493dMagnetic3DSensor.updateData();
  delay(10);
  magnet = Tlv493dMagnetic3DSensor.getZ();  pot = analogRead(A0);  Serial.print(magnet);  Serial.print(‘,’);  Serial.println(pot);  delay(20);
}

p5.js code:

let port;
let cells=[];
let fr = 7;
let s;
let magnet, pot;
let off;

function preload(){
img = loadImage(“cell longer.png”);
back = loadImage(“backBlur.png”);
hole = loadImage(“hole.png”);
}

function setup() {
createCanvas(400, 400);
port = createSerial();

for (let i = 0; i < 30; i++) {
let x = random(width);
let y = random(height);
s = random(10,30);
cells[i] = new Cell(x, y, s);
}
}

function draw() {
if(port.available()>0){
let str = port.readUntil(“\n”);
let splitData = split(str, ‘,’);
magnet = splitData[0];
pot = splitData[1];
port.clear();
off = map(magnet,0,100,20,70);
console.log(magnet);

}

background(0);
image(back,0,0,600,400);

for (let i = 0; i < cells.length; i++){ 
push();
r = map(pot,0,1023,0,360);

cells[i].move();
cells[i].show(r);
pop();

}
imageMode(CORNER);
image(hole,0,0);
}

class Cell {
constructor(RightLeft, TopBottom, size) {
this.x = RightLeft;
this.y = TopBottom;
this.z = size;
}
move() {
this.x = this.x + random(-3, 3);
this.y = this.y + random(-3, 3);
}
show(r) {
push();
translate(this.x, this.y);
angleMode(DEGREES);
rotate(r);
imageMode(CENTER);
image(img,0,0,s+off,s+off);
pop();
}
}

function mousePressed(){
if(!port.opened()){
port.open(115200);
}
}