Demos & Documentation. Using patternizer.com [video coming soon] In the meantime, here are a few tips: Unique URLs are generated for each pattern, and each save creates a new numbered version for that URL.
Sign up if you want to keep your patterns organized.I find the best results come from play, not attempting exact precisionUse the up/down arrow keys for minor 1px shifts, and if your cursor is in a text input, shift-up/down moves 10pxDrag n drop to reorder stripes. Stripes are drawn in the same stacking order that you see in the panelIf offset isn’t doing what you want, try flipping the angle 180 degrees. Using patternizer.js in a webpage Patternizer uses the canvas element, which is supported natively in all modern browsers and mobile devices.
You’ll find the latest code and demos at GitHub. Patternizer.js works like any script. Then you’ll need a canvas element that will get the pattern. patternizer.js creates the patternizer() method, which accepts an options object to define the stripes. Demos Old IE support. SeuratJS - A Raphaël plugin for creating beautiful pointillized animations. Glfx.js. Overview This library provides realtime image effects using WebGL.
There are three parts to glfx.js: texture: a raw source of image data (created from an <img> tag) filter: an image effect (represents one or more WebGL shaders) canvas: an image buffer that stores the results (a WebGL <canvas> tag) There are two caveats to glfx.js. First, WebGL is a new technology that is only available in the latest browsers and it will be quite a while before the majority of users have it. Quick Start This HTML fragment is all you need to use the API. Core API Canvas Constructor var canvas = fx.canvas(); Before you can apply any filters you will need a canvas, which stores the result of the filters you apply. Draw Image canvas.draw(texture); This replaces the internal contents of the canvas with the image stored in texture. Update Screen canvas.update(); This replaces the visible contents of the canvas with the internal image result. Texture Constructor var texture = canvas.texture(element); Update Texture Filters.
CanvaScript. Paper.js – Vector Graphics Scripting Framework. Paper.js is an open source and "JavaScript + HTML5 canvas-powered" vector graphics scripting framework.
Besides being a wrapper for the "canvas", it has much more to offer like working with nested layers, groups, paths, compound paths, rasters, symbols, etc. These items are handled and drawn automatically by Paper.js so you can focus on styling and/or modifying them. It tries to use the code smartly for faster execution and less CPU usage. The framework has methods for mouse and keyboard interaction. And, it has the well-known blend modes from Illustrator and Photoshop with JS emulation like: multiply, screen, overlay, soft-light, hard-light, color-burn, darken, lighten, hue, saturation, luminosity, color and more. oCanvas - Object-based canvas drawing.