Image Blend modes and HTML Canvas

Image Blend modes are the methods used to determine how 2 image layers are blended (mixed) to each other. As the digital images are stored in pixel, which are represented by numerical values, there are a large number of possible ways for blending based on the mathematical functions. With the help of Canvas API, now we can easily retrieve the images, export all the pixels on the image, apply blending effect, calculate to get the new blended pixels, export and display the new image on the web or save to server.

In this post, I will demonstrate some basic steps for applying Image Blend modes using HTML canvas API.

The Logic

Wikipedia already listed some popular blending methods here Blend Modes.

Assume that we have two image layers, top layer and bottom layer. For each loop, a is the value of a color channel in the underlying layer and b is that of the corresponding channel of the upper layer, we got the function for calculating the new pixel ƒ(a, b).

The steps for generating the new blended image from the two images are

• First, retrieve those two images
• Create two separate canvases with the same size and draw those two images into the corresponding canvas.
• Get all the pixel data from the two canvases.
• Loop through each pixel, apply the blending function to create a new pixel and store it inside an array
• Create a new canvas with the same size, use the blended pixel data to draw the blended image on that new canvas
• Export the canvas to image, file to save to server or to local computer.

Note: I mentioned that we need to create two canvases with the same size. However, that is just to make it easy for the demonstration purpose. You can still generate two canvases with different size, but you will need to change the calculation function a bit.

If you have not known what Conkeror is, you probably miss one of the greatest web browser in your life. Read this post for an introduction of how impressive Conkeror is Conkeror and How it changed the way I surf the web.

Overview

One of the most interesting feature that Conkeror brings from Emacs is the Browser Object. If you are coming from an Emacs background, you are not unfamiliar with universal-arguments, which can modify the function’s behaviour once it is called before activating the function. Browser Objects in Conkeror brings that idea from Emacs to the web environment but with better approach. Browser Objects in Conkeror can represent practically any type of data (e.g image, hyperlinks, frame,…).

Quote from Conkeror Wiki page

In the web environment, there are many data types which one wants to manipulate. Text, hyperlinks, images, form fields, to name just a few. Without some kind of abstraction layer to unify the interface to all these types of objects, it would be necessary to have a combinatorially large number of commands. For instance, you would need separate commands for follow-link, follow-image, and follow-frame. With browser objects, you have just one command, follow, which can operate on many types of data.

On my Mac, I always have 2 different partitions, one for installing the system and the other one for my home directory. Today, I’ve just re-installed the whole system and of course I have to specify the home path after the installation. However, after changing the home directory, many of my applications cannot work properly. I have checked and recognize that the $HOME variable in the shell now has a trailing slash (/Volumes/tmtxt/ instead of /Volumes/tmtxt).

That was so annoying and took me hours to investigate. Finally I found the problem. It comes from one of my carelessness when I change the home directory location.

Yes, I typed the path manually… How stupid I was. Why not just use the Choose button right next there :LOL:

Just change it to another folder, restart the computer and change back to the right home folder. Everything will be fixed automatically.

Most of us split Emacs horizontally by 2 windows so that we can easily edit and compare multi documents at the same time. However, the problem is that the two windows usually have the same size and sometimes difficult for you to work with files with long lines. Golden Ratio Mode is a small but useful package for Emacs that will automatically resize the focused window by golden ratio.

The window that has the main focus will have the perfect size for editing, while the ones that are not being actively edited will be re-sized to a smaller size that doesn’t get in the way, but at the same time will be readable enough to know it’s content.

You can install it using package.el. After finishing installation, just add this to your init.el file

(require 'golden-ratio)
(golden-ratio-mode 1)

Introduction

Emacs’s SQLi mode can be a better replacement for the default terminal database client (psql, sqlite3,…). I prefer SQLi mode because it supports syntax highlighting (and also Postgres keyword) and allows me to flexibly choose which region in the buffer to send to the shell to execute.

SQLi is integrated by default in Emacs. The following interpreters are supported

• psql by PostgreSQL
• mysql by MySQL
• sqlite or sqlite3 for SQLite
• solsql by Solid
• SQL*Plus by Oracle
• dbaccess by Informix
• isql by SyBase
• sql by Ingres
• osql by MS SQL Server
• isql by Interbase
• db2 by DB2 (IBM)
• inl by RELEX

Make sure that the client you need to use can be located inside the Emacs’s PATH. You can install exec-path-from-shell package using package.el for Emacs to auto import the PATH from your default shell.

If you are using Mac OS, I have written a post about PostgreSQL installation and configuration steps on Mac here: Install and Config PostgreSQL on Mac.

The Web Audio API provides a powerful and versatile system for controlling audio on the Web, allowing developers to choose audio sources, add effects to audio, create audio visualizations, apply spatial effects (such as panning) and much more.

Web Audio API - MDN

Record Audio and Export to WAV files with Recorder.js

Recorder.js is a library for recording and exporting the output of Web Audio API. It can be installed using Bower using the package name recorderjs (not recorder.js, it’s another library). After installation, load the bower_components/Recorderjs/recorder.js file to your html file to use.

Note: inside the Recorderjs, there is another file named recorderWorker.js. You will need to specify the path to that file later in Javascript code. You should run this under an http web server, not through file:///.

In the HTML page, I have 2 buttons for start and stop Recording

<button onclick="record()">Record</button>
<button onclick="stop()">Stop</button>

Next, in the Javascript code, you need to add this to the beginning of your script file to fix the browser compatibility.

Update: I made a new better solution for this. You can read it here Using Gulp with Browserify and Watchify - Updated

Using Watchify instead of gulp.watch

If you are using Browserify with Gulp, perhaps gulp.watch is not the best solution when you want to watch for file changes and rebuild them as changes happen. gulp.watch cannot recognize the dependencies of each Browserify bundle so every time you save your file, Gulp have to re-compile all your Browserify bundles. watchify is a solution for this. Watchify will only re-compile the bundle if its dependencies change.

Using Watchify is very similar to normal Browserify. Watchify object is very similar to a Browserify bundle so you can take the code from Browserify to Watchify with very little change in code.

To use Watchify, take the Browserify code (you can read more in this post Browserify - Bring Nodejs modules to browsers), wrap it inside a Watchify object, add an on update event handler for it and you are done.

var browserify = require('browserify');
var source = require("vinyl-source-stream");
var watchify = require('watchify');

gulp.task('browserify', function(){
  browserifyShare();
});

function browserifyShare(){
  // you need to pass these three config option to browserify
  var b = browserify({
    cache: {},
    packageCache: {},
    fullPaths: true
  });
  b = watchify(b);
  b.on('update', function(){
    bundleShare(b);
  });
  
  b.add('./main.js');
  bundleShare(b);
}

function bundleShare(b) {
  b.bundle()
    .pipe(source('main.js'))
    .pipe(gulp.dest('./dist'));
}

web-mode for PHP coding

PHP code are usually mixed inside HTML markup code. It’s very hard for us to use only php-mode to indent both php code and markup code. However, with the help of web-mode, an autonomous emacs major-mode for editing web templates, you can achieve it easily. Here is the comparison pictures between 2 modes.

• php-mode

ReactJS uses a special syntax called JSX, not the normal JS one. Usually, when you want to work with ReactJS JSX files, you need to transform it to a normal JS file and then operate on that file. However, with the help of Reactify, a transform for Browserify, you won’t need to compile jsx to js files anymore, just use it directly from your code.

For example, I have two files: view.jsx and main.js. view.jsx contains the definition for React view and main.js is the website’s main script that loads the view through require().

• view.jsx

var React = require('react');

var MyView = React.createClass({
  render: function(){
    return (
      <div>
        Example
      </div>
    );
  }
});
module.exports = MyView;

1. Bower

Bower is the most popular front-end package manager. You can install most of the front-end libraries from Bower. However, the biggest weakness of bower is that its functionality is just like a downloader. Each Bower package has a different structure and it is not a very good solution for us when we have to manually include the script files for each new library that we install. In this post, I will demonstrate the solution for that problem. This is not a fully automated method, only for the js part, but that still saves you a lot of time. Also, all the solutions presented in this post are defined in Gulp.

2. Install Bower packages with Gulp

Before processing to this part, make sure that you have Bower and Gulp command line installed already. You may need a .bowerrc file in your project root directory (or the directory that you want bower to run from), but this is optional. If the .bowerrc file is not presented, the default setting will be loaded. You can read more information about Bower configuration here.

Now we will create a Gulp task for installing the libraries describes in bower.json using the configuration in .bowerrc automatically.

var gulp = require('gulp');
var bower = require('bower');

gulp.task('bower', function(cb){
  bower.commands.install([], {save: true}, {})
    .on('end', function(installed){
      cb(); // notify gulp that this task is finished
    });
});