git @ Cat's Eye Technologies Colourring / master demo / colourring-launcher.js
master

Tree @master (Download .tar.gz)

colourring-launcher.js @masterraw · history · blame

// SPDX-FileCopyrightText: Chris Pressey, the original author of this work, has dedicated it to the public domain.
// For more information, please refer to <https://unlicense.org/>
// SPDX-License-Identifier: Unlicense

// dam-plus-widgets-0.2.js and colourring.js should be loaded before this.
// After this is loaded, call launch() to start the gewgaw.

function launch(config) {
  var div=DAM.maker('div'), button=DAM.maker('button'), canvas=DAM.maker('canvas');

  var gewgaw = new Colourring();

  var can = canvas({ width: 800, height: 800 });
  config.container.appendChild(can);

  modeOptions = [];
  gewgaw.initModes();
  var modes = gewgaw.getModes();
  for (var i = 0; i < modes.length; i++) {
    modeOptions.push({
      text: modes[i],
      value: modes[i]
    });
  }

  function disableSlider(n) {
      var div = document.getElementById("slider" + n);
      if (div) {
          div.style.pointerEvents = 'none';
          div.style.opacity = '0.5';
      }
  }

  function enableSlider(n) {
      var div = document.getElementById("slider" + n);
      if (div) {
          div.style.pointerEvents = 'auto';
          div.style.opacity = '1';
      }
  }

  var controlPanel = div(
    div(
      DAM.makeDownloadImageButton({
        canvas: can,
        basename: "colourring"
      })
    ),
    div(
      DAM.makeSelect({
        title: "MODE",
        options: modeOptions,
        onchange: function(d) {
            gewgaw.setMode(d.value);
            var i;
            for (i = 0; i <= 5; i++) {
                enableSlider(i);
            }
            if (d.value === "Complementary Rings") {
                disableSlider(4);
            } else if (d.value === "Spurious Spokes") {
                disableSlider(1);
                disableSlider(2);
                disableSlider(3);
            } else if (d.value === "Random ArcAreas") {
                disableSlider(1);
                disableSlider(2);
                disableSlider(3);
            } else if (d.value === "Complementary Randompatch Rings") {
                disableSlider(1);
                disableSlider(2);
                disableSlider(3);
            } else if (d.value === "Complementary Spokes") {
                disableSlider(1);
                disableSlider(2);
                disableSlider(3);
                disableSlider(4);
            } else {
                console.log("Unknown setting: " + d.value);
            }
        }
      })
    ),
    div(
        div(
            { id: "slider0" },
            DAM.makeRange({
                title: "# of radial segments",
                min: 1,
                max: 500,
                value: 100,
                onchange: function(v) {
                    gewgaw.setNumRadialSegments(v);
                }
            })
        ),
        div(
            { id: "slider1" },
            DAM.makeRange({
                title: "# of levels",
                min: 1,
                max: 100,
                value: 3,
                onchange: function(v) {
                    gewgaw.setNumLevels(v);
                }
            })
        ),
        div(
            { id: "slider2" },
            DAM.makeRange({
                title: "Randomness on even levels",
                min: 0,
                max: 100,
                value: 0,
                onchange: function(v) {
                    gewgaw.setRandomnessOn(0, v / 100);
                }
            })
        ),
        div(
            { id: "slider3" },
            DAM.makeRange({
                title: "Randomness on odd levels",
                min: 0,
                max: 100,
                value: 100,
                onchange: function(v) {
                    gewgaw.setRandomnessOn(1, v / 100);
                }
            })
        ),
        div(
            { id: "slider4" },
            DAM.makeRange({
                title: "Segment width",
                min: 0,
                max: 1000,
                value: 10,
                onchange: function(v) {
                    gewgaw.setSegmentWidth(v / 1000);
                }
            })
        ),
        div(
            { id: "slider5" },
            DAM.makeRange({
                title: "Luminance variability",
                min: 0,
                max: 100,
                value: 0,
                onchange: function(v) {
                    gewgaw.setLuminanceVariability(v / 100);
                }
            })
        )
    ),
    div(
      button("Restart", {
        onclick: function() {
          gewgaw.reset();
        }
      })
    )
  );

  controlPanel.style.display = 'inline-block';
  controlPanel.style.textAlign = 'right';
  controlPanel.style.verticalAlign = 'top';

  config.container.appendChild(controlPanel);

  gewgaw.init({
    'canvas': can
  });

  disableSlider(4);
}