Water Type

mrdoob

2010-06-20 14:45:26

License: MIT License

Fork: 7

Fav: 36

View: 5352

Play
Stop
Reload

Fullscreen

Smart Phone

Fork tree

Readme
JavaScript 290 lines
HTML 0 lines
CSS 7 lines

Water Type

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

function init() {
  
  var container, canvas;
  
  container = document.createElement('div');
  document.body.appendChild(container);
  
  // input box
  
  input = document.createElement("input");
  input.type = "text";
  input.value = "type";
  input.style.position = "absolute";
  input.style.top = "10px";
  input.style.left = "10px";
  input.style.opacity = "0";
  container.appendChild(input);
  input.focus();
  
  // Height Map (Water)
  
  canvasHeightMap = document.createElement("canvas");
  canvasHeightMap.width = WIDTH;
  canvasHeightMap.height = HEIGHT;
  
  contextHeightMap = canvasHeightMap.getContext("2d");
  imageHeightMap = contextHeightMap.getImageData(0, 0, WIDTH, HEIGHT);
  dataHeightMap = imageHeightMap.data;
    
  buffer1 = [];
  buffer2 = [];
  
  for (var i = 0; i < SIZE; i ++) {
    
    buffer1[i] = 128;
    buffer2[i] = 128;
  }
  
  // Text
  
  canvasText = document.createElement("canvas");
  canvasText.width = WIDTH;
  canvasText.height = 128;
  
  contextText = canvasText.getContext("2d");
  contextText.font = "80px Helvetica";
  contextText.fillStyle = "rgb(255, 0, 0)";
  contextText.textAlign = "center";
  
  // Output (Parallax)
  
  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;
  
  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('keypress', onDocumentKeyPress, false);
  
}

// Event Handlers

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

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

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_X, event.touches[i].pageY / QUALITY_Y]);
    
  }
  
}

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

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

function onDocumentKeyPress(event) {
  
  switch(event.keyCode) {
      
    case 13:
      input.value = "";
      break;
      
    default:
      break;
  }
  
}

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

function writeText(string) {
  
  text = string;
  
  contextText.clearRect(0, 0, WIDTH, 128);
  contextText.fillText(string, WIDTH / 2, 96);
  
  imageText = contextText.getImageData(0, 0, WIDTH, 128);
  dataText = imageText.data;
  
}

Water Type

Tweet
QR code
Embed

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