Joan León nucliweb

Chromatic aberration effect - a simple implementation in JavaScript

A chromatic aberration is an optical effect caused by one or more color channels being displaced. Although it is an optical failure and should be avoided for displaying or image capturing devices, chromatic aberration can be used to make graphics be more realistic in some other applications like 3D games.

The following codes is an example of implementing the effect using ImageData API of HTML5 canvas. By fetching and manipulating pixel data of the image, the chromatic aberration effect is easy to achieve.

<html>
<body>
<canvas id="canvas"></canvas>

	#!/bin/bash
	# file: ttfb.sh
	# curl command to check the time to first byte
	# usage
	# 1. ./ttfb.sh "https://google.com"
	# 2. seq 10 \| xargs -Iz ./ttfb.sh "https://google.com"

	curl -o /dev/null \
	-H 'Cache-Control: no-cache' \
	-s \

	const webpack = require('webpack')
	const getConfig = require('hjs-webpack')
	const isDev = (process.env.NODE_ENV \|\| 'development') === 'development'
	const isProd = !isDev && process.env.NODE_ENV === 'production'

	const PRO_PUBLIC_PATH = ''
	const DEV_PUBLIC_PATH = ''

	const PUBLIC_PATH = isProd ? PRO_PUBLIC_PATH : DEV_PUBLIC_PATH
	const GA_ID = 'UA-XXXXX-Y'

	/**
	* List unique CSS properties for all DOM elements
	* Initially created to list unique font stacks on a page
	* @see {@link http://stackoverflow.com/a/35022690/ Inspired by this StackOverflow answer}
	*
	* @see {@link https://gist.github.com/macbookandrew/f33dbbc0aa582d0515919dc5fb95c00a/ URL for this file}
	*
	* @author AndrewRMinion Design (https://andrewrminion.com)
	* @version 1.1
	*

	// see for screenshot:
	// https://twitter.com/paul_irish/status/829090506084749312

	const http = require('http');

	function requestHandler(request, response) {
	const headers = {
	'Server-Timing': `
	sql-1;desc="MySQL lookup Server";dur=100,
	sql-2;dur=900;desc="MySQL shard Server #1",

	const fs = require('fs');
	const path = require('path');
	const spawn = require('child_process').spawn;
	const FPS = 60;
	const MICROSEC_PER_FRAME = Math.round(1000000 / FPS);
	if (process.argv.length < 3) {
	console.log(`node ${path.relative('.', process.argv[1])} [DevToolsProfile]`);
	process.exit(1);
	}
	let traceFile = path.resolve(process.argv[2]);

	int[][] result;
	float t, c;

	float ease(float p) {
	return 3pp - 2pp*p;
	}

	float ease(float p, float g) {
	if (p < 0.5)
	return 0.5 * pow(2*p, g);

	// by david whyte :)

	int[][] result;
	float t, c;

	float ease(float p) {
	return 3pp - 2pp*p;
	}

	float ease(float p, float g) {