KLON is a web-based tool with an interactive grid system for creating "mashup" compositions and collage-like graphics by drawing with image slices as brushes, based on source images that users can import from a device or fetch from Unsplash service.

Using a mouse or touchpad, users can select an area on the image to utilize the image data as a brush for drawing on the canvas.

With a mouse:
For changing the selection area size, please hold the right mouse button and move the mouse, while the cursor is over the canvas. To draw, please click (and hold) the left mouse button to draw on the canvas.

With a touchpad: 
For changing the selection area size, scrolling with two fingers on touchpad, while the cursor is over the canvas. To draw, please click (and hold) with one finger on touchpad to draw on the canvas.

For ease of use, all the major actions in the program are tied to hotkeys and I highly recommend using them.  

C       Clear the canvas area
M      Toggle between Draw modes
S       Toggle Select Data modes
A       Clear Buffer for Select Data
E        Switch to Erase mode
I         Hide / show original image
D       Download result in PNG format
T        Switch between shape types
R       Rotate slected shape
G       Snap selection to the grid 
H       Hide / show grid on canvas

↑↓    UP / DOWN Cursor keys for changing vertical grid space
←→   LEFT / RIGHT Cursor keys for changing horizontal grid space

The program is available for use and experimentation for free under the Creative Commons license. However, please note that if you decide to generate graphics based on Unsplash's photos through this program, you are also bound by Unsplash's license agreement.

If you intend to use the program for commercial purposes, kindly inform me.

The tool accepts raster images in JPG, PNG, WEBP formats as source material, and it also support transparency.

Please keep in mind that this tool has been designed to work best with the Chrome browser.  The usability and performance of the program heavily depends on the power of your processor.

The code is hosted on Openprocessing.org, which means that the program’s loading speed might occasionally be slow, and there could be times when it is inaccessible due to maintenance.

If you encounter any difficulties while using the program, or if you’ve discovered a bug, please let me know.

This program utilizes a number of third-party tools, and I would like to extend my gratitude to the creators for allowing their use in this project:

  • The p5.js Creative Coding Library, a product of the collective efforts of an incredible team;
  • The Tweakpane interface library, ingeniously developed by Hiroki Kokubun;