Checkboxes

mrdoob

2010-06-20 02:30:41

License: MIT License

Fork: 6

Fav: 16

View: 2642

Play
Stop
Reload

Fullscreen

Smart Phone

Fork tree

Readme
JavaScript 104 lines
HTML 0 lines
CSS 7 lines

Checkboxes

var container, 
    element, 
    elements = [],
    
    elementWidth,
    elementHeight,
    canvasWidth,
    canvasHeight,

graphics,

PI2 = Math.PI * 2,

size = 10,
    sizeHalf = size / 2,
    direction = 1,
    speed = 0.2,
    positionX = size / 2,

i = 0;

init();
createGrid();
setInterval(loop, 1000/60);

function init()
{
  container = document.createElement('div');
  document.body.appendChild(container);

while( i < 2)
  {
    elements[i] = document.createElement('input');
    elements[i].type = 'checkbox';
    container.appendChild(elements[i]);
    i++;
  }

elementWidth = elements[1].offsetLeft - elements[0].offsetLeft;
  elements[1].style.display = 'block';

elementHeight = elements[1].offsetTop - elements[0].offsetTop;
  elements[1].style.display = 'inline';
}

function createGrid()
{
  canvasWidth = Math.floor( window.innerWidth / elementWidth );
  canvasHeight = Math.floor( window.innerHeight / elementHeight );

if (elements.length < canvasWidth * canvasHeight)
  {
    while( i < canvasWidth * canvasHeight)
    {
      element = elements[i] = document.createElement("input");
      element.type = "checkbox";
      container.appendChild(element);
      i++;
    }
  }

var buffer = document.createElement("canvas");
  buffer.width = canvasWidth;
  buffer.height = canvasHeight;
  buffer.style.position = "absolute";
  buffer.style.top = "0px";
  buffer.style.left = "0px";
  // container.appendChild(buffer);

graphics = buffer.getContext("2d");
}

function loop()
{
  // animation

graphics.fillStyle = "#000000";
  graphics.fillRect (0, 0, canvasWidth, canvasHeight);

graphics.fillStyle = "#ff0000";
  graphics.beginPath();
  graphics.arc(positionX, (canvasHeight - sizeHalf) - Math.abs( Math.cos(new Date() * 0.001) * (canvasHeight - size) ), sizeHalf, 0, PI2, true); 
  graphics.closePath();
  graphics.fill();

positionX += direction * speed;

if (positionX > canvasWidth - sizeHalf)
    direction = -1;
  else if (positionX < sizeHalf)
    direction = 1;

// rendering

var data = graphics.getImageData(0, 0, canvasWidth, canvasHeight).data;

for (var i = 0; i < canvasWidth * canvasHeight; i ++)
  {
    element = elements[i];
    element.checked = data[i * 4] > 0;
  }

}

Checkboxes

var container, element, elements = [], elementWidth, elementHeight, canvasWidth, canvasHeight, graphics, PI2 = Math.PI * 2, size = 10, sizeHalf = size / 2, direction = 1, speed = 0.2, positionX = size / 2, i = 0; init(); createGrid(); setInterval(loop, 1000/60); function init() { container = document.createElement('div'); document.body.appendChild(container); while( i < 2) { elements[i] = document.createElement('input'); elements[i].type = 'checkbox'; container.appendChild(elements[i]); i++; } elementWidth = elements[1].offsetLeft - elements[0].offsetLeft; elements[1].style.display = 'block'; elementHeight = elements[1].offsetTop - elements[0].offsetTop; elements[1].style.display = 'inline'; } function createGrid() { canvasWidth = Math.floor( window.innerWidth / elementWidth ); canvasHeight = Math.floor( window.innerHeight / elementHeight ); if (elements.length < canvasWidth * canvasHeight) { while( i < canvasWidth * canvasHeight) { element = elements[i] = document.createElement("input"); element.type = "checkbox"; container.appendChild(element); i++; } } var buffer = document.createElement("canvas"); buffer.width = canvasWidth; buffer.height = canvasHeight; buffer.style.position = "absolute"; buffer.style.top = "0px"; buffer.style.left = "0px"; // container.appendChild(buffer); graphics = buffer.getContext("2d"); } function loop() { // animation graphics.fillStyle = "#000000"; graphics.fillRect (0, 0, canvasWidth, canvasHeight); graphics.fillStyle = "#ff0000"; graphics.beginPath(); graphics.arc(positionX, (canvasHeight - sizeHalf) - Math.abs( Math.cos(new Date() * 0.001) * (canvasHeight - size) ), sizeHalf, 0, PI2, true); graphics.closePath(); graphics.fill(); positionX += direction * speed; if (positionX > canvasWidth - sizeHalf) direction = -1; else if (positionX < sizeHalf) direction = 1; // rendering var data = graphics.getImageData(0, 0, canvasWidth, canvasHeight).data; for (var i = 0; i < canvasWidth * canvasHeight; i ++) { element = elements[i]; element.checked = data[i * 4] > 0; } }body { background-color: #ffffff; margin: 0px; overflow: hidden; }

Tweet
QR code
Embed

Design view
Code view
<script type="text/javascript" src="http://jsdo.it/blogparts/w3VX/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/mrdoob/w3VX" title="Checkboxes">Checkboxes - jsdo.it - share JavaScript, HTML5 and CSS</a></p>
zip