Записывайте, сохраняйте и воспроизводите 4D-анимацию в Canvas.js - PullRequest
Новая
       36

Записывайте, сохраняйте и воспроизводите 4D-анимацию в Canvas.js

0 голосов
/ 27 февраля 2019

Я работаю над 4-мерным графиком с использованием canvas.js, который может постепенно вводить и обновлять информацию.Я уже настроил свои поля ввода так, чтобы данные измерений могли быть введены в этот шаблон и преобразованы в визуальные данные, и все работает до определенного момента.Размерные данные всплывают в Canvas.js в соответствии с введенными данными, и функция записи кажется работоспособной, но только до той степени, что она сигнализирует о записи, но не сохраняет и не сохраняет данные (где эти шаги фактически работают вгораздо более упрощенная форма canvas.js).Поэтому я почти уверен, что большая часть скрипта функции находится там, где он должен быть, но может быть несколько несоответствий с точки зрения идентификаторов и несколько потенциально несовместимых соглашений о маркировке.Сценарий, в котором я почти уверен, соответствует сценарию кодирования и системе.Однако я хотел бы остановиться на этом.Вот что я получил (см. https://jsfiddle.net/2rgv7pgj/ для оригинальной функции записи и воспроизведения canvas.js в «2D»): 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://code.jquery.com/jquery-2.1.3.min.js" integrity="sha256-ivk71nXhz9nsyFDoYoGf2sbjrR9ddh+XDkCcfZxjvcM=" crossorigin="anonymous"></script>




<body><body background="" id="example2">




<canvas id="canvas1" width="500" height="200"></canvas>
<button id="rec" disabled>record</button>




        <input type="button" name="DivCube" onclick="

                document.getElementById('Math').value = document.getElementById('data-CUBED').value.replace();

        document.getElementById('data-CUBED').value = document.getElementById('data-CUBED').value.replace(/.+([<][=][>])/gm,'').replace(/(CUBIC).*/gm,'').replace(/(D[$][$]\s\d+)/gm,'');






    DivCube(); 

    populateSecondTextBox();

    getElementById('Math').value=document.getElementById('Math').value.replace(/((([*][*]t[*][*])\s\w+\s\s\s.+\s+(D[$][$]\s\d+[,]\s)))/gm,'');


    " value="Divide Cube" > <input type="button" name="CleanBeforeLoop" onclick="getElementById('Math').value=document.getElementById('Math').value.replace(/((([*][*]t[*][*])\s\w+\s\s\s.+\s+(D[$][$]\s\d+[,]\s)))/gm,'');" value="CLEAN"> 

        <script>
      function DivCube() {
      var value = document.getElementById("data-CUBED").value;
      document.getElementById("data-CUBED").value = Math.cbrt(value);
      }
    </script>



       <script>
function populateSecondTextBox() {


    document.getElementById('width').value = document.getElementById('data-CUBED').value;
       document.getElementById('length').value = document.getElementById('data-CUBED').value;
          document.getElementById('height').value = document.getElementById('data-CUBED').value;
}
</script>   






  <input id="width" type="text"  min="0" max="500">
  <input id="length" type="text "min="0" max="500">
  <input id="height" type="text"  min="0" max="500">
    <input id="lambda" type="text"  min="0" max="500" placeholder="lambda">
  <input id="color" type="color" value="#32CD32">




                    <script>$("#width ,#length ,#height").on('change keyup keydown', function () {

                var width = $("#width").val();
                var length = $("#length").val();
                var height = $("#height").val();
                var result = width * length * height;
                $("#DivCube_Results").text(result).append(" cm<sup>3</sup>");;

            });</script>



<script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
    </head>
<body>






    <canvas id="2d" width="10px" height="10px;float:left" style="border:medium;border-color:#00F;border-style:solid;"></canvas>


<script>


var cStream,
  aStream,
  vid,
  recorder,
  analyser,
  dataArray,
  bufferLength,
  chunks = [];

function clickHandler() {

  this.textContent = 'stop recording';
  cStream = canvas1.captureStream(30);
  cStream.addTrack(aStream.getAudioTracks()[0]);

  var mixedStream = 'MediaStream' in window ? new MediaStream([cStream.getVideoTracks()[0], aStream.getAudioTracks()[0]]) : cStream;
  recorder = new MediaRecorder(mixedStream);
  recorder.start();

  recorder.ondataavailable = saveChunks;

  recorder.onstop = exportStream;

  this.onclick = stopRecording;

};

function exportStream(e) {

  if (chunks.length) {

    var blob = new Blob(chunks)
    var vidURL = URL.createObjectURL(blob);
    var vid = document.createElement('video');
    vid.controls = true;
    vid.src = vidURL;
    vid.onend = function() {
      URL.revokeObjectURL(vidURL);
    }
    document.body.insertBefore(vid, canvas1);

  } else {

    document.body.insertBefore(document.createTextNode('no data saved'), canvas1);

  }
}

function saveChunks(e) {

  e.data.size && chunks.push(e.data);

}

function stopRecording() {

  vid.pause();
    this.disabled = true;
  recorder.stop();

}

function initAudioStream(evt) {

  var audioCtx = new AudioContext();
  // create a stream from our AudioContext
  var dest = audioCtx.createMediaStreamDestination();
  aStream = dest.stream;
  // connect our video element's output to the stream
  var sourceNode = audioCtx.createMediaElementSource(this);
  sourceNode.connect(dest)
    // start the video
  this.play();

  // just for the fancy canvas drawings
  analyser = audioCtx.createAnalyser();
  sourceNode.connect(analyser);

  analyser.fftSize = 2048;
  bufferLength = analyser.frequencyBinCount;
  dataArray = new Uint8Array(bufferLength);
  analyser.getByteTimeDomainData(dataArray);

  // output to our headphones
  sourceNode.connect(audioCtx.destination)

  startCanvasAnim();

  rec.onclick = clickHandler;
  rec.disabled = false;
};

var loadVideo = function() {

  vid = document.createElement('video');
  vid.crossOrigin = 'anonymous';
  vid.oncanplay = initAudioStream;
  vid.src = 'https://dl.dropboxusercontent.com/s/bch2j17v6ny4ako/movie720p.mp4';


}

function startCanvasAnim() {
  // from MDN https://developer.mozilla.org/en/docs/Web/API/AnalyserNode#Examples


// Set up our canvas
var canvas1 = document.getElementById("2d");
var ctx = canvas1.getContext("2d");
canvas1.width = window.innerWidth;
canvas1.height = window.innerHeight;


// Pick out the form elements for easy access later
var x1 = document.querySelector('#width');
var x2 = document.querySelector('#length');
var y = document.querySelector('#height');
var z = document.querySelector('#lambda');
var color = document.querySelector('#color');




// Animation function
function draw(){
  // clear the canvas
  ctx.clearRect(0, 0,  canvas1.width, canvas1.height);



  // draw the cube
  drawCube(
    window.innerWidth/3,
    window.innerHeight/3 +  + y.value/3,
    Number(x1.value),
    Number(x2.value),
    Number(y.value),
        Number(z.value),
    color.value
  );

  requestAnimationFrame(draw);
}
draw();


// Colour adjustment function
// Nicked from http://stackoverflow.com/questions/5560248
function shadeColor(color, percent) {
  color = color.substr(1);
  var num = parseInt(color, 16),
    amt = Math.round(2.55 * percent),
    R = (num >> 16) + amt,
    G = (num >> 8 & 0x00FF) + amt,
    B = (num & 0x0000FF) + amt;
  return '#' + (0x1000000 + (R < 255 ? R < 1 ? 0 : R : 255) * 0x10000 + (G < 255 ? G < 1 ? 0 : G : 255) * 0x100 + (B < 255 ? B < 1 ? 0 : B : 255)).toString(16).slice(1);
}

// Draw a cube to the specified specs
function drawCube(x, y, wx, wy, h, z, color) {
    ctx.beginPath();
    ctx.moveTo(x, y);
    ctx.lineTo(x - wx, y - wx * 0.5);
    ctx.lineTo(x - wx, y - h - wx * 0.5);
    ctx.lineTo(x, y - h * 1);
    ctx.closePath();
    ctx.fillStyle = shadeColor(color, -10);
    ctx.strokeStyle = color;
    ctx.stroke();
    ctx.fill();






    ctx.beginPath();
    ctx.moveTo(x, y);
    ctx.lineTo(x + wy, y - wy * 0.5);
    ctx.lineTo(x + wy, y - h - wy * 0.5);
    ctx.lineTo(x, y - h * 1);
    ctx.closePath();
    ctx.fillStyle = shadeColor(color, 10);
    ctx.strokeStyle = shadeColor(color, 50);
    ctx.stroke();
    ctx.fill();



    ctx.beginPath();
    ctx.moveTo(x, y - h);
    ctx.lineTo(x - wx, y - h - wx * 0.5);
    ctx.lineTo(x - wx + wy, y - h - (wx * 0.5 + wy * 0.5));
    ctx.lineTo(x + wy, y - h - wy * 0.5);
    ctx.closePath();
    ctx.fillStyle = shadeColor(color, 20);
    ctx.strokeStyle = shadeColor(color, 60);
    ctx.stroke();
    ctx.fill();





    ctx.rotate((Math.PI / 45)*-8/-4)
       ctx.translate(100, -80);

  }


}

loadVideo();



</script>
...