Water

mrdoob

2010-06-20 02:27:05

License: MIT License

Fork: 1

Fav: 1

View: 764

Play
Stop
Reload

Fullscreen

Smart Phone

Fork tree

Readme
JavaScript 168 lines
HTML 0 lines
CSS 7 lines

Water

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

function init() {
  
  var container, canvas;
  
  container = document.createElement('div');
  document.body.appendChild(container);
  
  canvas = document.createElement("canvas");
  canvas.width = WIDTH;
  canvas.height = HEIGHT;
  canvas.style.width = window.innerWidth + "px";
  canvas.style.height = window.innerHeight + "px";
  container.appendChild(canvas);
  
  context = canvas.getContext("2d");
  context.fillStyle = "rgb(0, 0, 0)";
  context.fillRect (0, 0, WIDTH, HEIGHT);
  image = context.getImageData(0, 0, WIDTH, HEIGHT);
  data = image.data;
  
  buffer1 = [];
  buffer2 = [];
  
  for (var i = 0; i < SIZE; i ++) {
    
    buffer1[i] = 0;
    buffer2[i] = i > WIDTH && i < SIZE - WIDTH && Math.random() > 0.995 ? 255 : 0;
  }
  
  document.addEventListener('mousedown', onDocumentMouseDown, false);
  document.addEventListener('mousemove', onDocumentMouseMove, false);
  document.addEventListener('mouseup', onDocumentMouseUp, false);
  document.addEventListener('mouseout', onDocumentMouseOut, false);        
  
  document.addEventListener('touchstart', onDocumentTouchStart, false);
  document.addEventListener('touchmove', onDocumentTouchMove, false);
  document.addEventListener('touchend', onDocumentTouchEnd, false);    
  
  document.addEventListener('keyup', onDocumentKeyUp, false);
}

// Event Handlers

function onDocumentMouseDown(event) {
  
  event.preventDefault();
  
  isUserInteracting = true;
  
  pointers = [[event.clientX / QUALITY, event.clientY / QUALITY]];
}

function onDocumentMouseMove(event) {
  
  pointers = [[event.clientX / QUALITY, event.clientY / QUALITY]];
}

function onDocumentMouseUp(event) {
  
  isUserInteracting = false;
  
}

function onDocumentMouseOut(event) {
  
  isUserInteracting = false;
  
}

function onDocumentTouchStart(event) {
  
  isUserInteracting = true;
  
  event.preventDefault();
  
  pointers = [];
  
  for (var i = 0; i < event.touches.length; i++) {
    
    pointers.push([event.touches[i].pageX / QUALITY, event.touches[i].pageY / QUALITY]);
    
  }
  
}

function onDocumentTouchMove(event) {
  
  event.preventDefault();
  
  pointers = [];
  
  for (var i = 0; i < event.touches.length; i++) {
    
    pointers.push([event.touches[i].pageX / QUALITY, event.touches[i].pageY / QUALITY]);
    
  }
  
}

function onDocumentTouchEnd(event) {
  
  event.preventDefault();
  
  isUserInteracting = false;
  
}

function onDocumentKeyUp(e) {
  
  emit( Math.random() * WIDTH, Math.random() * HEIGHT);
  
}

function emit(x, y) {
  
  buffer1[ Math.floor(x) + (Math.floor(y) * WIDTH)] = 255;
  
}

Water

Tweet
QR code
Embed

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

Favorite by

fingaholic

Forked

sort

Water Remix

mrdoob

0
5
752views

173/0/7
- visual

Water

tags

Tweet

twitter

Favorite by

Forked