// index.html / now get the p5.js from internet

// DOM_code.js is required for operation / data grid show / input

// PTZ.js is required for 3D view / operation mouse keyboard

​

info = 'here we want make a interactive design of a\n';

info += 'QUBE and calculation for its volume\n';

info += 'as a 3D design template\n';

info += '\n';

info += 'using my PTZ 3D view:\n';

info += 'key UP DOWN RIGHT LEFT -> rotate // key PAGE UP DOWN -> zoom\n';

info += 'mouse LEFT press drag up down right left -> rotate \nmouse RIGHT press -> move\nmouse WHEEL turn -> zoom\n\n';

info += '\n';

info += 'key [space] toggle landview\n';

info += '\n';

info += 'in the data grid pls. change the green cells only\n';

info += '\n';

info += 'there (this) is a (HTML) text paragraph, dynamically added like with instructions and bill of materials\n';

info += '\n';

info += 'for documentation pls. print this page to PDF ( by your browser )\n';

info += '\n';

info += 'happy coding with processing p5.js and KLL engineering (CC BY SA) \n';

info += 'http://kll.engineering-news.org/kllfusion01/articles.php?article_id=154 \n';

info += '\n';

​

var ds="";

​

let diagc = false;//true;  //__________ print calc info to browser console...

let showland = true; //________ use keyboard [space] to disable

​

var inp00, but00, inp10, but10, inp20, but20, inp30, but30, docp; // see DOM_code.js

​

var wX = 10.0; //________ [m]

var wY = 50.0; //________ [m]

var wZ = 150.0; //_______ [m]

var volume = 0.0; //________ [m3] calculated

​

function draw_object() { //____ called by / from inside PTZ

  axis(); //_________________ test graph / disable later

  noFill();

  stroke('white');

  sphere(0.1); //___________________ info center point

  strokeWeight(1);

  box(wX,wY,wZ);  

  if (showland) land();

}

​

function land() {

  noStroke();

  push();

  fill(180,180,0,100); // yellow sand ground

  rect(-500,-500,1000,1000);

  pop();

}

​

function setup() {

  createCanvas(800, 500, WEBGL);

​

  create_DOM(); //____________ see file DOM_code.js

  calc_list(); //_____________ below function for data calc and documentation 

  noSmooth(); //______________ ugly but fast?

}

function draw() {

  background(0, 0, 80);

  PTZ();

}

​

function calc_list() { //______ recalc at setup and after change of settings

  volume = wX * wY * wZ;

  inp30.value(volume); // show it

 // create a data string as documentation

  ds=""; //___ clean

  ds +='\n';

  ds += info; // add the operational concept info from above

  ds +='\n';

  ds +='PROJECT 3D_design_template: DataSheet from calc_list function: ';

  ds +=year()+'_'+month()+'_'+day()+' '+hour()+':'+minute()+':'+second()+'\n';

  ds +='\n';

  ds +='a QUBE with 3 different length X '+nf(wX,0,1)+' m, Y '+nf(wY,0,1)+' m, Z '+nf(wZ,0,1)+' m\n';

  ds +='has a volume of ' + nf(volume,0,1) + ' m3\n';

  ds +='\n';

  ds +='BILL OF MATERIALS:\n';

  ds +='\n';

  let sX = 4 * wX;

  let sY = 4 * wY;

  let sZ = 4 * wZ;

  let sS = sX + sY + sZ;

  ds +='X: use 4 times '+nf(wX,0,1)+' m, total '+nf(sX,0,1)+' m\n';

  ds +='Y: use 4 times '+nf(wY,0,1)+' m, total '+nf(sY,0,1)+' m\n';

  ds +='Z: use 4 times '+nf(wZ,0,1)+' m, total '+nf(sZ,0,1)+' m\n';

  ds +='sum: '+nf(sS,0,1)+' m of ???\n';

  ds +='\n';

​

  if (diagc) console.log(ds); //___ can show at console

  let docs = ds.replace(/\n/g,'<br>'); // get html line feeds in <p>

  docp.html(docs); //___ show it

  // a 3rd way for the documentation text would be download:

  let list = split(ds, '\n');

  saveStrings(list, 'datasheet.txt');

}