Joan León nucliweb

Image Decoding in Blink / Chrome (true as of M62)

Blink decodes off the main thread for image elements and for CSS styles (an image as an element's background style, for example). Moving the decode to the compositor thread (or the compositor worker thread pool?) does free-up the main thread to work on other tasks. We call this deferred decoding. With deferred decoding, the decode work remains on the critical path for presenting a frame to the display, so it can still cause animation jank.

The HTMLImageElement.decode() API should help with the jank problem. Also deferred decoding does not work with SVG image resources. There are still cases where decoding images happens synchronously on the main thread: 2D canvas drawImage() and createPattern(), and WebGL texture uploads.

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>

	ArrayList<Rect> rects;
	float mx, my, mm, time;

	void setup() {
	size(720, 720, P2D);
	generate();
	}


	void draw() {

	WEBGL // p5 WEBGL rendering mode.
	createCanvas(w, h, renderer) // Creates a 3D canvas (if renderer is WEBGL).

	// Primitives
	plane(width, height) // Creates a plane in 3D space. Equivalent to rect() in the default rendering mode.
	plane(width, height, detailX, detailY) // Creates a plane in 3D space with the number of triangle subdivisions specified.
	box(width) // Creates a cube in 3D space.
	box(width, height, depth) // Creates a cuboid in 3D space.
	box(width, height, depth, detailX, detailY) // Creates a cuboid in 3D space with triangle subdivisions.
	sphere(radius) // Creates a sphere in 3D space.

	var talksByLikes = [].slice.call(document.querySelectorAll('.ka-td-contents')).map((talk) => ({ title : talk.querySelector('.ka-talk-title').textContent , author: talk.querySelector('.ka-username').textContent, favs : +talk.querySelector('span.ka-button-indicator').textContent, rating : +talk.querySelector('a.ka-like-link + a.ka-social-link').textContent , ratio : talk.querySelector('a.ka-like-link + a.ka-social-link').title }));

	var currentDay = /5693168230072320/.test(window.location.href)
	? "5649626120060928"
	: "5693168230072320";
	document.querySelector(`a[data-day-id="${currentDay}"]`).click();

	setTimeout(function(){
	talksByLikes = talksByLikes.concat([].slice.call(document.querySelectorAll('.ka-td-contents')).map((talk) => ({ title : talk.querySelector('.ka-talk-title').textContent , author: talk.querySelector('.ka-username').textContent, favs : +talk.querySelector('span.ka-button-indicator').textContent, rating : +talk.querySelector('a.ka-like-link + a.ka-social-link').textContent, ratio: ta

	// gif by dave aka @beesandbombs :)

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

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

	float ease(float p, float g) {

	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) {