Beautiful Lines

by jywglady

HTML

<!doctype html>
<html>

<head>
<meta name="description" content="Beautiful Lines">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>Webduino Blockly App</title>
  <script src="https://blocklypro.webduino.io/components/jquery/dist/jquery.min.js?rev=4a356126b9573eb7bd1e9a7494737410"></script>
  <script src="https://blocklypro.webduino.io/dist/lib/webduino-all-0.4.20.min.js?rev=4426739c00d85325cb2d3d701fa50666"></script>
  <script src="https://blocklypro.webduino.io/dist/webduino-blockly.min.js?rev=736fa9a2fba9fa461db7c329f6651493"></script>
  <script src="https://blocklypro.webduino.io/dist/lib/firebase.min.js?rev=c0bfd493efd477d098a4ae9e92b13880"></script>
  <script src="https://blocklypro.webduino.io/dist/lib/runtime.min.js?rev=683a69503433786202911b4d9f766100"></script>
  <script src="https://fustyles.github.io/webduino/GameElements_20190131/gameelements.js"></script>
  <script src="https://fustyles.github.io/webduino/Instruction_20181213/instruction.js"></script>
</head>

<body>
  <div></div>
</body>

JavaScript

var photocell;
var size;
var cx;
var deg;
var cy;
var rad;
var len;
var degree;
var nx;
var ny;
var color = 0x000000;
var colorstep = 0x011020;
var colorstr = '#00cccc';
var Did = window.prompt('設備號碼');

(async function () {

boardReady({board: 'Smart', device: Did, transport: 'mqtt', multi: true}, function (board) {
  board.samplingInterval = 50;
  photocell = getPhotocell(board, 0);
  console.log("Start...");
  StartDrawing();
  photocell.measure(function (val) {
    photocell.detectedVal = val;
    degree = 80+val * 100;
    console.log(degree);
  });
});

async function StartDrawing() {
  while (true) {
    if ((cx<0 || cx>size) && (cy<0 || cy>size)) {
      cx = size/2;
      cy = size/2;
      len = 5;
      deg = 0;
      console.log("Outbound!");
      canvas_clear('canvas');
    }
    UpdateParameters();
    canvas_line('canvas',1,cx,cy,nx,ny,colorstr,0,0.8);
    cx = nx;
    cy = ny;
    await delay(0.1);
  }
}

function UpdateParameters() {
  console.log("Updat degree = "+degree);
  deg = deg + degree;
  color = color + colorstep;
  color = color & 0xFFFFFF;
  colorstr = "#"+color.toString(16);
  rad = (deg * Math.PI) / 180;
  nx = cx + len * (Math.cos(rad));
  ny = cy - len * (Math.sin(rad));
  len = len + 2;
}


size = 500;
cx = size / 2;
cy = size / 2;
len = 5;
deg = 0;
degree = 104;
canvas_create('canvas',size,size,0,0,0);
//StartDrawing();

}());