Florian Morel ayamflow

Conventions

A = [xA, yA] is a point on the 2D plane. Same for B, C, ...
lengths are in any unit (ex: pixels)
code snippets are in JavaScript

Degrees to radians

angleRad = angleDeg * Math.PI / 180;

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

tiny modules

A common question: why would anyone publish a single-function module?

It might seem odd to have a module with just a single function (examples: clamp, is-dom, is-url, object-assign, point-in-polygon). Sometimes your tests and documentation are longer than the function itself. Let's examine some of the benefits to this approach...

a terse and frozen API does not end up with the scope creep or code rot that larger frameworks and "standard libraries" tend to carry.
it encourages diversity rather than "this is the one true way" (e.g. robust-point-in-polygon handles edge cases at so

	vec2 rotate(vec2 v, float a) {
	float s = sin(a);
	float c = cos(a);
	mat2 m = mat2(c, s, -s, c);
	return m * v;
	}

	const {
	dot,
	length,
	add,
	scale,
	normalize,
	divide,
	subtract,
	cross,
	distance,

	uniform vec3 diffuse;
	uniform vec3 emissive;
	uniform float opacity;

	varying vec3 vLightFront;

	#ifdef DOUBLE_SIDED

	varying vec3 vLightBack;

	var buffer = null,
	bufferContext = null;

	//null => not yet checked
	var multiplyDetected = null;

	function isMultiplySupported() {
	if (multiplyDetected === null) { //we haven't checked yet
	if (!buffer) { //shared buffer...
	buffer = document.createElement("canvas");

	var cushion = .5;
	var length = 50;

	var dx = point.x - mouse.x;
	var dy = point.y - mouse.y;
	var da = Math.sqrt(dx * dx + dy * dy);

	// Tend à ramener la distance entre les segments à length
	var ox = dx / da * length - dx;
	var oy = dy / da * length - dy;

	<!doctype html>
	<html>
	<head>
	<title>Scroll Test</title>
	<style>

	html, body {
	overflow: hidden;
	width: 100%;
	height: 100%;

	/*
	** Copyright (c) 2012, Romain Dura [email protected]
	**
	** Permission to use, copy, modify, and/or distribute this software for any
	** purpose with or without fee is hereby granted, provided that the above
	** copyright notice and this permission notice appear in all copies.
	**
	** THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
	** WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
	** MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY