All Projects → benjamminf → Warpjs

benjamminf / Warpjs

Licence: mit
Warp, distort, bend, twist and smudge your SVG’s directly in the browser

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Warpjs

Threejs Sandbox
Set of experiments and extensions to THREE.js.
Stars: ✭ 163 (-50%)
Mutual labels:  shaders, effects
Jtop
SVG virtual desktop library that lets you build beautiful desktop like user interfaces.
Stars: ✭ 108 (-66.87%)
Mutual labels:  svg, effects
unity-reaction-diffusion
(WIP) ✏️ Test of a Reaction-Diffusion simulated with a compute shader in Unity.
Stars: ✭ 25 (-92.33%)
Mutual labels:  shaders, effects
Learnunityshader
学习Unity Shader过程中的一些记录,特效,动画Demo。
Stars: ✭ 141 (-56.75%)
Mutual labels:  shaders, effects
Messier87
A realtime raytracing blackhole renderer
Stars: ✭ 53 (-83.74%)
Mutual labels:  shaders, effects
Rumble Charts
React components for building composable and flexible charts
Stars: ✭ 293 (-10.12%)
Mutual labels:  svg
Remixicon
Open source neutral style icon system
Stars: ✭ 3,956 (+1113.5%)
Mutual labels:  svg
Unity Script Collection
A maintained collection of useful & free unity scripts / library's / plugins and extensions
Stars: ✭ 3,640 (+1016.56%)
Mutual labels:  shaders
Audiostreamer
A Swift 4 framework for streaming remote audio with real-time effects using AVAudioEngine
Stars: ✭ 287 (-11.96%)
Mutual labels:  effects
Softwarerenderer
Software rendering engine with PBR. Built from scratch on C++.
Stars: ✭ 323 (-0.92%)
Mutual labels:  shaders
Sharpvectors
SharpVectors - SVG# Reloaded: SVG DOM and Rendering in C# for the .Net.
Stars: ✭ 315 (-3.37%)
Mutual labels:  svg
Generate Avatar
Generate your 100% fingerprinted example avatar from id, email, username etc.
Stars: ✭ 307 (-5.83%)
Mutual labels:  svg
Svgmap
svg地图组件,完整版包含城市及区县数据及更多扩展功能。。。
Stars: ✭ 298 (-8.59%)
Mutual labels:  svg
Spheredissolve
Customizable procedural spherical dissolve shader for Unity3D, for all your customizable procedural spherical dissolve needs!
Stars: ✭ 311 (-4.6%)
Mutual labels:  shaders
Vpype
The Swiss-Army-knife command-line tool for plotter vector graphics.
Stars: ✭ 292 (-10.43%)
Mutual labels:  svg
Devicon
Set of icons representing programming languages, designing & development tools
Stars: ✭ 4,536 (+1291.41%)
Mutual labels:  svg
Sqip
"SQIP" (pronounced \skwɪb\ like the non-magical folk of magical descent) is a SVG-based LQIP technique.
Stars: ✭ 3,074 (+842.94%)
Mutual labels:  svg
Standardgeometryshader
An example of a geometry shader with Unity's standard lighting model support.
Stars: ✭ 303 (-7.06%)
Mutual labels:  effects
Nin
nin is ninjatool
Stars: ✭ 313 (-3.99%)
Mutual labels:  shaders
Grayshift
A lightweight front-end component library for developing fast and powerful web interfaces.
Stars: ✭ 304 (-6.75%)
Mutual labels:  svg

Build Status Coverage Status

warp.js

Distort, bend, twist and smudge your scalable vector graphics in the browser. warp.js allows you to feed in any SVG file and apply any kind of complex transformation.

Installation

Either download dist/warp.js from this repository and include it on your page:

<script src="warp.js"></script>

Or install through npm:

npm install warpjs --save-dev

Basic example

const svg = document.getElementById('svg-element')
const warp = new Warp(svg)

warp.interpolate(4)
warp.transform(([ x, y ]) => [ x, y + 4 * Math.sin(x / 16) ])

Run on CodePen →

This example creates a wave effect. Try playing with the values to see how it works.

Animation example

warp.interpolate(4)
warp.transform(([ x, y ]) => [ x, y, y ])

let offset = 0
function animate()
{
    warp.transform(([ x, y, oy ]) => [ x, oy + 4 * Math.sin(x / 16 + offset), oy ])
    offset += 0.1
    requestAnimationFrame(animate)
}

animate()

Run on CodePen →

This example extends the previous by animating the wave. It takes advantage of the fact that points can be extended with additional values/dimensions. The first call to transform() doesn't actually perform any transformation – instead it extends the coordinate with a second y value. This second value won't actually affect how the SVG's path is rendered, but it can be used in subsequent transformations. When it comes to transforming the path to make the wave effect, the second y value is used as an "original position" value when calculating the new y position.

Using this concept of extending coordinates, you could use it to store velocity, acceleration, or just about anything.

API

transform(transformer | [transformer...])

Applies a transformation (or array of transformers) to all points on the SVG. This method accepts a function for transforming the points in the SVG. The function will be passed a single argument – a coordinate array, with the first two indices containing the x and y values of that point. The function must return a coordinate array with at least two values, but it may also return more. If more values are returned than what was supplied, then that vector will be extended with those new values, and subsequent calls to transform() will supply these new values.

Parameters

  • transformer Function that returns an array of numbers representing the new coordinate

interpolate(threshold)

Intepolates the paths in the SVG with additional points for higher fidelity transformations. It divides each path segment into smaller segments until the size of those segments exceeds the threshold. Extended coordinates (see transform()) will have all values interpolated – not just the x and y pairs.

Parameters

  • threshold The length in which segments will stop interpolation

Returns

boolean Whether the method interpolated at least one segment

extrapolate(threshold)

Joins path segments together if combining them results in their size being less than or equal to the threshold. Used for improving performance by reducing the number of points in the SVG. It's a lossy algorithm, so expect some quality loss when using.

Parameters

  • threshold The length in which segments will stop extrapolation

Returns

boolean Whether the method extrapolated at least one segment pair

preInterpolate(transformer, threshold)

Performs interpolation on the current SVG, but uses a transformed version of that SVG to determine how the paths are interpolated. This method is used to ensure that before transformation there will be enough points to work with. It helps prevent cases where quality is lost by the transformer dramatically altering the coordinates.

Parameters

  • transformer The transformation function to be used as a reference for interpolation
  • threshold The length in which segments will stop interpolation

Returns

boolean Whether the method interpolated at least one segment

preExtrapolate(transformer, threshold)

Performs extrapolation on the current SVG, but uses a transformed version of that SVG to determine how the paths are extrapolated. This method is used to ensure that before transformation the right segments are joined to minimize quality loss after transformation.

Parameters

  • transformer The transformation function to be used as a reference for extrapolation
  • threshold The length in which segments will stop extrapolation

Returns

boolean Whether the method extrapolated at least one segment pair

update()

Updates the SVG elements with the new paths. Usually not necessary to call, as it is done automatically in the transform() method.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].