IoT-p5js/sketch-test2D.js

/*
 *  rootApostolos
 *  P5js example 
 *  IMU  2D
 *  
 * 
 * 
 */
var data = {}; 		// Global object to hold results from the loadJSON call
var data1  				// Global object to hold results from the loadJSON call
var bubbles = []; // Global array to hold all bubble objects

									// accelarator data from json file
let aX = 0;				// "accelarator","X":
let aY = 0;				// "accelarator","Y":
let aZ = 0;				// "accelarator","Z":

var rot = 0;			//
var anglesX =0;		// rotation X
var anglesY =0;		// rotation Y
var anglesZ =0;		// rotation Z
var x1 = 500 			// 
var y1 = 500			//
var x2 = 800 			//
var y2 = 800			//

var G = 9.82 			// g in greece https://en.wikipedia.org/wiki/Gravitational_acceleration

var dt = 0.1 			// miliseconds -> second read in sketch Arduino

var AX, AY, BX, BY, CX, CY; // accelarator data after calculation

AX = 120;					// start position X 
AY = 900;					// start position Y

var i = 0

// Put any asynchronous data loading in preload to complete before "setup" is run
function preload() {
  data = loadJSON('./data/b.json');
	 let file = "./data/test2.txt"
		   data1 = loadJSON(file);

}

function loadData() {
  var bubbleData = data['bubbles'];
  for (var i = 0; i < bubbleData.length; i++) {
    // Get each object in the array
    var bubble = bubbleData[i];
    // Get a position object
    var position = bubble['position'];
    // Get x,y from position
    var x = position['x'];
    var y = position['y'];

    // Get diameter and label
    var diameter = bubble['diameter'];
    var label = bubble['label'];

    // Put object in array
    bubbles.push(new Bubble(x, y, diameter, label));
  }
}

// Create a new Bubble each time the mouse is clicked.
function mousePressed() {
	keyPressed()
}
function keyPressed() {
  // Add diameter and label to bubble
  var diameter = random(10, 20);
  var label = 'New Label';
	console.log(" i " + i)
	
	// load data from json
	// {"sensor":"accelarator","X":0.342388,"Y":0.153237,"Z":10.02743},
	aX = data1[i].X * G;
	aY = data1[i].Y * G;
	aZ = data1[i].Z * G;
	sensor = data1[i].sensor;
	console.log(" X " + aX);

	AX=AX+aX*dt; 			// new position X
	AY=AY+aY*dt;			// new position Y

	// {"sensor":"gyroscope","X":-0.000647,"Y":-0.000583,"Z":0.000652},
	var ii=i+1
	gX = data1[ii].X;
	gX = gX * dt;

	gY = data1[ii].Y;
	//gY = gY/8.999;
	gY = gY * dt;

	gZ = data1[ii].Z;
	gZ = gZ * dt;
	sensor = data1[ii].sensor;
	console.log(" ii " + ii)
	console.log(sensor);
	console.log(gX);
	console.log(gY);
	console.log(gZ);

	// {"sensor":"magnometer","X":-0.000647,"Y":-0.000583,"Z":0.000652}
	var iii=i+2
	mX = data1[iii].X;
	mY = data1[iii].Y;
	mZ = data1[iii].Z;
	console.log(" ii1 " + iii)
	sensor = data1[iii].sensor;
	console.log(sensor);
	console.log(mX);
	console.log(mY);
	console.log(mZ);

	anglesZ  = Math.acos((-gY)/(Math.pow(1-Math.pow(gZ,2),0.5)));
	console.log("anglesZ:"+anglesZ);

	//peristrofi ston x axona mikos
	anglesX=acos(gZ);
	var anglesXX = anglesX * 180 / Math.PI;
	console.log("anglesXX:"+anglesXX);
	console.log("anglesX:"+anglesX);

	//peristrofi ston y axona
	anglesY=acos(gX/(Math.pow(1-pow(gZ,2),0.5)));
	console.log("anglesY:"+anglesY);

	BX=BX+aX*3;
	BY=BY+aY*3;

	CX=CX+aX*3;
	CY=CY+aY*3;

	label =  " AX " + AX + " AY " + AY + " anglesX " + anglesX + " anglesY " + anglesY;
  bubbles.push(new Bubble(AX, AY, diameter, label));
  console.log( " X " + AX + " Y " + AY + " D " + diameter + " L " + label);
			

  // Prune Bubble Count if there are too many
  if (bubbles.length > 5) {
    bubbles.shift(); // remove first item from array
  }
  i=i+3
}

function setup() {
  //createCanvas(y, x);
  createCanvas(1850, 1750);
	//createCanvas(windowWidth, windowHeight);
  loadData();
}

function draw() {
  //background(255);
	background(100, 100, 100);

  // Display all bubbles
  for (var i = 0; i < bubbles.length; i++) {
    bubbles[i].display();
    bubbles[i].rollover(mouseX, mouseY);
  }

  // Label directions at bottom
  textAlign(LEFT);
  fill(0);
  text('Click to add bubbles.', 10, height - 10);
}

// Bubble class
function Bubble(x, y, diameter, name) {
  this.x = x;
  this.y = y;
  this.diameter = diameter;
  this.radius = diameter / 2;
  this.name = name;

  this.over = false;

  // Check if mouse is over the bubble
  this.rollover = function(px, py) {
    var d = dist(px, py, this.x, this.y);
    if (d < this.radius) {
      this.over = true;
    } else {
      this.over = false;
    }
  };

  // Display the Bubble
  this.display = function() {
    stroke(0);
    strokeWeight(0.8);
		var v = createVector(0, 1);
		v.setMag(300);
		var xx1 = 500;
		var yy1 = 800;
		var xx2 = xx1 + v.x;
		var yy2 = yy1 + v.y;
		line(xx1, yy1, xx2, yy2);
		xx1 = xx2;
		yy1 = yy2;

		//https://el.wikipedia.org/wiki/%CE%91%CE%BA%CF%84%CE%AF%CE%BD%CE%B9%CE%BF_(%CE%BC%CE%BF%CE%BD%CE%AC%CE%B4%CE%B1_%CE%BC%CE%AD%CF%84%CF%81%CE%B7%CF%83%CE%B7%CF%82)
		// https://stackoverflow.com/questions/12959237/get-point-coordinates-based-on-direction-and-distance-vector
		// ihttps://en.wikipedia.org/wiki/Euler_angles#Geometrical_definition
		//angleMode(DEGREES);
		angleMode(RADIANS);
		v.rotate( Math.PI -  anglesX); 
		//v.rotate(XXX); 
		stroke(255, 0, 0);
		line(xx1, yy1, xx1 + v.x, yy1 + v.y);
    
    ellipse(this.x, this.y, this.diameter, this.diameter);
    if (this.over) {
      fill(0);
      textAlign(CENTER);
      text(this.name, this.x, this.y + this.radius + 20);
    }
  };
}