Untitled

dabblet.css

* {
    margin: 0;
    padding: 0;
    position: relative;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;
    cursor: default;
    font-family: calibri, helvetica, arial;
    font-size: 15px;
}

#main-form {
    width: 400px;
    padding: 20px;
    position: fixed;
    top: 100px;
    left: 50%;
    margin: 0 0 0 -200px;
    background: white;
    border: 1px solid lightgray;
    border-radius: 2px;
    -webkit-border-radius: 2px;
}

label {
    display: block;
    margin: 0 0 5px;
}
label.inline {
    float: left;
}

#range-wrapper {
    width: 100%;
    height: 40px;
    background: rgba(0,0,0,0.1);
    border-radius: 2px;
    -webkit-border-radius: 2px;
    margin: 0 0 40px;
}

#range-bar {
    width: 250px;
    height: 4px;
    position: absolute;
    left: 20px;
    top: 18px;
    background: rgba(0,0,0,0.2);
    border-radius: 2px;
    -webkit-border-radius: 2px;
}

#range-button {
    width: 10px;
    height: 10px;
    position: absolute;
    top: 2px;
    left: 50px;
    margin: -5px 0 0 -5px;
    background: rgba(0,0,0,1);
    border-radius: 2px;
    -webkit-border-radius: 2px;
}

#range-value {
    width: 40px;
    height: 20px;
    position: absolute;
    top: 10px;
    right: 20px;
    text-align: center;
    line-height: 20px;
    font-size: 15px;
}

#colors-toggle-wrapper {
    float: right;
    width: 60px;
    height: 20px;
    margin: 10px 0;
    background: lightgray;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    overflow: hidden;
}

#colors-toggle {
    width: 18px;
    height: 18px;
    background: #fff;
    position: absolute;
    top: 1px;
    left: 1px;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    transition: all 0.25s ease-out 0;
    -webkit-transition: all 0.25s ease-out 0;
}
#colors-on-text, #colors-off-text {
    width: 40px;
    height: 20px;
    line-height: 20px;
    position: absolute;
    top: -1px;
    left: 20px;
    text-align: center;
}
#colors-off-text {
    left: -40px;
}

#colors-toggle-wrapper[data-status="off"] #colors-toggle{
    left: 41px;
}

.line {
    width: 100%;
    height: 1px;
    background: black;
    clear: both;
    margin: 10px 0;
}

#play-button, .or-text, .video-file-wrapper, .image-file-wrapper{
    width: 100%;
    height: 40px;
    margin: 0 0 20px;
    background: rgba(0,0,0,0.3);
    border-radius: 2px;
    -webkit-border-radius: 2px;
    padding: 10px 0;
    line-height: 20px;
    font-size: 15px;
    text-align: center;
    color: rgba(0,0,0,0.6);
}
.or-text {
    background: none;
    text-transform: uppercase;
}

#video-file, #image-file {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    -webkit-opacity: 0;
}

#display-canvas, #video-canvas {
    background: #f0f0f0;
    position: fixed;
    top: 0;
    left: 0;
}

dabblet.html

<title>Video Pointillism</title>
    <canvas id="display-canvas"></canvas>
    <canvas id="video-canvas" style="display: none; -webkit-opacity: 0.3;"></canvas>
    <video id="video" style="display: none;" volume="1"></video>
    <img id="image" style="display: none;"/>
    <div id="main-form">
      <label>Set Maximum Point Size</label>
      <div id="range-wrapper">
        <div id="range-bar">
          <div id="range-button"></div>
        </div>
        <div id="range-value">10</div>
      </div>

      <label class="inline">Colored Output</label>
      <div id="colors-toggle-wrapper" data-status="off">
        <div id="colors-toggle">
          <div id="colors-on-text">on</div>
          <div id="colors-off-text">off</div>
        </div>
      </div>

      <div class="line"></div>

      <label>Watch video</label>
      <div id="play-button">Start Web Cam</div>
      <div class="video-file-wrapper" style="display: none;">
        Select file from computer
        <input type="file" id="video-file" accept="video/*" onchange="playVideoFile();"/>
      </div>

      <label style="display: none;">Open images</label>
      <div class="image-file-wrapper" style="display: none;">
        Select image files
        <input type="file" id="image-file" accept="image/*" onchange="playImageFile();" multiple/>
      </div>

    </div>

dabblet.js

//-----Get-DOM-Elevemts-&-constants
var displayCanvas = document.getElementById ("display-canvas");
var ctx = displayCanvas.getContext ("2d");
var video = document.getElementById("video");
var image = document.getElementById("image");
var videoCanvas = document.getElementById("video-canvas");
var playButton = document.getElementById("play-button");
var mainForm = document.getElementById("main-form");
var videoFile = document.getElementById("video-file");
var imageFile = document.getElementById("image-file");
var rangeWrapper = document.getElementById("range-wrapper");
var rangeButton = document.getElementById("range-button");
var rangeValue = document.getElementById("range-value");
var colorsToggle = document.getElementById("colors-toggle-wrapper");

var mousedown = 0;
var screenWidth = window.innerWidth;
var screenHeight = window.innerHeight;


var playType = video;
var currentImage = 0;
var imageUrlList, imageUrl;
var colorOutput = "off";

var streaming = false;
var videoWth = 320;
var videoHt = 0;


//-----Set-variables
var cellsize = 10;
var transitionSpeed = 1; //0.25, 0.5, 1
var frameX, frameY, frameArray, currentFrame, nextFrame;

//-----Set-cellsize-and-related-variables
var setCellsize = function (n) {
  cellsize = n;
  frameX = parseInt (screenWidth/cellsize);
  frameY = parseInt (screenHeight/cellsize);
  frameArray = new Array (frameY);
  for (var i=0; i<frameY; i++) {
    frameArray [i] = new Array (frameX);
    for (var j=0; j<frameX; j++) {
      frameArray [i][j] = 0;
    }
  }
  currentFrame = frameArray.map(function(arr) {return arr.slice()});
  nextFrame = frameArray.map(function(arr) {return arr.slice()});
  videoCanvas.width = frameX;
  videoCanvas.height = frameY;
}
setCellsize (cellsize);



//-----Draw-frame-function
var drawFrame = function () {
  ctx.clearRect (0, 0, screenWidth, screenHeight);
  if (playType == video) {
    videoCanvas.getContext('2d').drawImage(video, 0, 0, frameX, frameY);
  }
  if (playType == image) {
    videoCanvas.getContext('2d').clearRect (0, 0, frameX, frameY);
    videoCanvas.getContext('2d').drawImage(image, 0, 0, frameX, frameY);
  }

  var imageData = videoCanvas.getContext ("2d").getImageData(0, 0, frameX, frameY);
  var pixel = imageData.data;

  for (var i=0; i<frameY; i++) {
    for (var j=0; j<frameX; j++) {
      var x = cellsize*j;
      var y = cellsize*i;
      var px = (i*frameX + j)*4;
      nextFrame[i][j] = cellsize - parseInt(((pixel[px]+pixel[px+1]+pixel[px+2])/765)*cellsize) +1;
      if (nextFrame[i][j] > currentFrame[i][j]) {currentFrame[i][j] += transitionSpeed}
      if (nextFrame[i][j] < currentFrame[i][j]) {currentFrame[i][j] -= transitionSpeed}
      var s = currentFrame[i][j];
      var opacity = (100 - parseInt(((pixel[px]+pixel[px+1]+pixel[px+2])/765)*100 - 50))/50 + 0.5;
      ctx.beginPath();
      // ctx.rect (x+((cellsize-s)/2), y+((cellsize-s)/2), s, s);
      ctx.arc(x+(cellsize)/2, y+(cellsize)/2, s/2, 0, 2*Math.PI, false);
      ctx.closePath();
      ctx.fillStyle = "rgba("+pixel[px]+","+pixel[px+1]+","+pixel[px+2]+","+ 1 +")";
      if (colorOutput == "off") {
        ctx.fillStyle = "rgba(0, 0, 0,"+ opacity +")";
      }
      ctx.fill ();
    }
  }
  window.requestAnimationFrame (drawFrame);
}

//-----PLay-Camera-video
var playCamVideo = function () {
  navigator.getUserMedia(
    {video:true},
    function(stream) {
      video.src = window.URL.createObjectURL(stream);
      video.play();
    },
    function(err) {console.log("An error occured! " + err)}
  );
}

//-----PLay-file-video
var playVideoFile = function () {
  playType = video;
  var videoUrl = window.URL.createObjectURL (videoFile.files [0]);
  video.src = videoUrl;
  video.play ();
}

//-----PLay-file-images
var playImageFile = function () {
  playType = image;
  transitionSpeed = 0.25;
  imageUrlList = imageFile.files;
  imageUrl = window.URL.createObjectURL (imageFile.files [currentImage]);
  image.src= imageUrl;
  setCellsize (cellsize);
  mainForm.style.display = "none";
  drawFrame ();
}

var playNextImageFile = function () {
  console.log ("playnext");
  currentImage += 1;
  currentImage = (currentImage< imageFile.files.length)? currentImage : 0;
  imageUrl = window.URL.createObjectURL (imageFile.files [currentImage]);
  image.src= imageUrl;
}


//----Start-video
var startVideo = function () {
  setCellsize (cellsize);
  mainForm.style.display = "none";
  drawFrame ();
  if (!streaming) {
    videoHt = video.videoHeight / (video.videoWidth/videoWth);
    video.width = videoWth;
    video.height = videoHt;
    streaming = true;
  }
}



window.URL = window.URL || window.webkitURL;
navigator.getUserMedia = (navigator.getUserMedia ||
                          navigator.webkitGetUserMedia ||
                          navigator.mozGetUserMedia ||
                          navigator.msGetUserMedia);


displayCanvas.width = screenWidth;
displayCanvas.height = screenHeight;
displayCanvas.style.width = screenWidth + "px";
displayCanvas.style.height = screenHeight + "px";
video.volume = 1;

playButton.addEventListener ("click", function () {playCamVideo()}, false);
video.addEventListener('canplay', function () {startVideo ()}, false);
window.addEventListener ("mousedown", function () {mousedown=1}, false);
window.addEventListener ("mouseup", function () {mousedown=0}, false);
rangeWrapper.addEventListener ("mousemove", function (e) {
  if (mousedown ==1) {
    var x = Math.round ((e.pageX- rangeWrapper.getBoundingClientRect().left - 20)/10) *10;
    x = (x>0)? x : 0;
    x = (x<250)? x : 250;
    rangeButton.style.left = x + "px";
    rangeValue.innerHTML = parseInt (x/10) + 5;
    cellsize = parseInt (x/10) + 5;
  }
}, false);
displayCanvas.addEventListener ("click", function () {playNextImageFile ()}, false);
colorsToggle.addEventListener ("click", function () {
  colorsToggle.dataset.status = (colorsToggle.dataset.status == "off")? "on": "off";
  colorOutput = colorsToggle.dataset.status;
}, false);

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"javascript"}