munrocket

I made an HTML port of game of life made with a table of checkboxes based on Pluralsight's Play by Play: HTML, CSS, and JavaScript with Lea Verou (http://www.pluralsight.com/courses/play-by-play-lea-verou). I was able to create a cool mousedown interface that allowed the "player" to draw on the board by dragging the mouse while it was down, and wanted to do the same for touch devices.

Unfortunately, touch events only hold references to the DOM element where they began (i.e. where "touchstart" fired) and do not recognize the DOM elements that exist under them (a detailed explanation for this can be found here: http://stackoverflow.com/questions/4550427/prefered-alternative-to-onmouseover-for-touch).

Instead, touch events maintain several lists of Touch objects - which represent interactions with the touch screen. Among these objects' properties are clientX and clientY, which indicate the X and Y coordinates of the events relative to the viewport (go to http://www.javascriptkit.com/javatutors/touchevents.shtm

Please consider using http://lygia.xyz instead of copy/pasting this functions. It expand suport for voronoi, voronoise, fbm, noise, worley, noise, derivatives and much more, through simple file dependencies. Take a look to https://github.com/patriciogonzalezvivo/lygia/tree/main/generative

Generic 1,2,3 Noise

float rand(float n){return fract(sin(n) * 43758.5453123);}

float noise(float p){
	float fl = floor(p);
  float fc = fract(p);

	<!DOCTYPE HTML>
	<html lang="en">
	<head>
	<title>Record WebGL to WebM (Chrome only)</title>
	<meta charset="utf-8">
	<link rel="stylesheet" href="styles.css" charset="utf-8">
	</head>
	<body>

	<div class="buttons">

	// CAUTION / / / CAUTION / / / CAUTION / / / CAUTION / / / CAUTION / / / CAUTION / / / CAUTION / / /
	// Notice the for loops have a hardcoded values for how far they can go (32)
	// This is a result of WEBGL not allowing while loops. Change the value to what you find appropriate!
	// CAUTION / / / CAUTION / / / CAUTION / / / CAUTION / / / CAUTION / / / CAUTION / / / CAUTION / / /
	//
	// Hopefully this gives you the format for making your own operators such as XOR, NAND, etc.
	//
	// Adapted from this thread:
	// https://scratch.mit.edu/discuss/topic/97026/