kirbysayshi

I'm experimenting with the most efficient way (in terms of CPU / battery usage) to make a small equalizer animation that will appear multiple times on a page.

I've tried CSS animations, CSS transitions, canvas drawing, and a plain GIF (and more not listed here!). I'd expect the CSS animations and transitions to be completely GPU powered, but Chrome 39.0.2171.99 on my Macbook Air 10.10 uses large amounts of CPU (shown in both the Chrome Task Manager as well as Activity Monitor). I've set layout boundaries via overflow: hidden, checked paint rects, etc.

Here are the different tests:

• JS-triggered Transitions (40% CPU chrome): http://s.codepen.io/kirbysayshi/debug/YPZgbY (code)
• scale3d animation (20% CPU chrome): http://s.codepen.io/kirbysayshi/debug/myWQyW (code)
• translate3d animation (40% CPU chrome): http://s.codepen.io/kirbysayshi/debug/gbmBym (code)
• canvas (12%

kirbysayshi

/*********** Resets */
div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6,
pre, form, fieldset, input, textarea, p, blockquote, th, td { margin: 0; padding: 0; }
fieldset, img { border: 0; }
table { border-collapse: collapse; border-spacing: 0; }
ol, ul { list-style: none; }
address, caption, cite, code, dfn, em, strong, th, var { font-weight: normal; font-style: normal; }
caption, th { text-align: left; }
h1, h2, h3, h4, h5, h6 { font-weight: normal; font-size: 100%;}
q:before, q:after { content: ''; }

tobitailor

/*
 *    def.js: Simple Ruby-style inheritance for JavaScript
 *
 *    Copyright (c) 2010 Tobias Schneider
 *    This script is freely distributable under the terms of the MIT license.
 *
 *
 *    Example:
 *    
 *      def ("Person") ({

okor

# As of 10/07/2011, this bash script installs Node.js
# and npm (a node package manager) on Ubuntu 10.10 or 10.04 x64.
# This installs node in your home directory (~/.local/programs)
#
# by okor
#
# Copy, Paste and Run in a terminal:

echo "Install required packages" && \
  sudo apt-get update && \

kirbysayshi

require('tap-browser-color')();
var test = require('tape');

test('it flattens!', function(t) {
  var input = {
    users: [
      { name: 'name1', id: 1, image: { '64x64': 'http://1' } },
      { name: 'name2', id: 2, image: { '64x64': 'http://2' } }
    ],
    errors: [ new Error('err1') ],

chrisjacob

// Built with IMPACT - impactjs.org
(function (window) {
    "use strict";
    Number.prototype.map = function (istart, istop, ostart, ostop) {
        return ostart + (ostop - ostart) * ((this - istart) / (istop - istart));
    };
    Number.prototype.limit = function (min, max) {
        return Math.min(max, Math.max(min, this));
    };
    Number.prototype.round = function (precision) {

brianloveswords

gif-from-tweet

There are so many great GIFs out there and I want to have copies of them. Twitter makes that harder than it should be by converting them to MP4 and not providing access to the source material. To make it easier, I made a bash pipeline that takes a tweet URL and a filename, extracts the MP4 from that tweet and uses ffmpeg to convert back to GIF.

Dependencies

• ffmpeg
  • macOS: brew install ffmpeg
  • Ubuntu/Debian: apt install ffmpeg

clayton

# Installation
brew install ffmpeg --with-vpx --with-vorbis --with-libvorbis --with-vpx --with-vorbis --with-theora --with-libogg --with-libvorbis --with-gpl --with-version3 --with-nonfree --with-postproc --with-libaacplus --with-libass --with-libcelt --with-libfaac --with-libfdk-aac --with-libfreetype --with-libmp3lame --with-libopencore-amrnb --with-libopencore-amrwb --with-libopenjpeg --with-openssl --with-libopus --with-libschroedinger --with-libspeex --with-libtheora --with-libvo-aacenc --with-libvorbis --with-libvpx --with-libx264 --with-libxvid

# Easy Peasy
ffmpeg -i video.mp4 video.webm

xem

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;