amundo

function saveJSON(data, saveAs){
  var stringified = JSON.stringify(data, null, 2); 
  var blob = new Blob([stringified], {type: "application/json"});
  var url = URL.createObjectURL(blob);
  
  var a = document.createElement('a');
  a.download = saveAs + '.json';
  a.href = url;
  a.id = saveAs;
  document.body.appendChild(a);

amundo

<super-slider unit="em" target=".preview h1">
	<label for="title-size">Title font size</label>
	<input id="title-size" type="range" min="0.5" max="4" step="0.1" value="2" />
</super-slider>
<super-slider unit="em" target=".preview h2">
	<label>Subtitle font size</label>
	<input type="range" min="0.5" max="2.5" step="0.1" value="1.5" />
</super-slider>

<div class="preview">

amundo

function amplifyMedia(mediaElem, multiplier) {
  var context = new (window.AudioContext || window.webkitAudioContext),
      result = {
        context: context,
        source: context.createMediaElementSource(mediaElem),
        gain: context.createGain(),
        media: mediaElem,
        amplify: function(multiplier) { result.gain.gain.value = multiplier; },
        getAmpLevel: function() { return result.gain.gain.value; }
      };

amundo

Resources for learning Kaboom.js

https://kaboomjs.com/

Main site.

Here are the releases:

https://github.com/replit/kaboom/releases

amundo

  document.querySelectorAll('p')
  .forEach(p => p.style.border = '4px solid red')

amundo

// http://phrogz.net/SVG/convert_path_to_polygon.xhtml
function pathToPolygon(path,samples){
  if (!samples) samples = 0;
  var doc = path.ownerDocument;
  var poly = doc.createElementNS('http://www.w3.org/2000/svg','polygon');

  // Put all path segments in a queue
  for (var segs=[],s=path.pathSegList,i=s.numberOfItems-1;i>=0;--i) segs[i] = s.getItem(i);
  var segments = segs.concat();

amundo

/*

ANNOTATION_DOCUMENT - top level
  HEADER - unique top-level node containing references to media, and arbitrary name/value PROPERTY pairs
    MEDIA_DESCRIPTOR - links to media files

  PROPERTY - generic key-value element. wt actual f.

  TIME_ORDER - array of TIME_SLOTs
    TIME_SLOT - a single point in the timeline

amundo

<section class="intro">
  A long time ago, in a galaxy far,<br> far away....
</section>

<section class="logo">
      <svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  width="693.615px" height="419.375px" viewBox="0 0 693.615 419.375" enable-background="new 0 0 693.615 419.375"
  xml:space="preserve">
  <g id="Layer_2">
    <g>

amundo

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   version="1.1"
   id="svg28094"
   viewBox="0 0 744.09448819 1052.3622047"

amundo

pdfjsLib.getDocument('helloworld.pdf')
  .then(pdf => pdf.getPage(1)
    .then(page => {
      var scale = 1.5
      var viewport = page.getViewport(scale)

      var canvas = document.createElement('canvas')
      var context = canvas.getContext('2d')
      canvas.height = viewport.height
      canvas.width = viewport.width