Download
User Rating: 0/5 ( 0 votes)
Geometryangle is a jQuery plugin that lets you create beautiful and responsive backgrounds to your site.
FEATURES
-
MESH TRANSPARENCY
By adding support for rgba color values, Geometryangle is now able to handle transparent colors.
-
VERTEX LINES
With help from the option parameter object, you are able to specify the thickness, color, stroke, etc. of the line between vertices.
-
VERTICES
Set the point attributes for the vertex. Scroll down for an example.
-
UPDATE METHOD
Update the mesh, light, line and vertex properties on the go, without creating a completely new mesh.
-
EVENT HANDLERS
Intervene on render to add your own elements to the canvas. For example, scroll down and see the coordinates printed to the canvas in the onRender property of the mesh.
Source: geometryangle.tritoncode.com
1. INCLUDE JS FILES
<script src="jquery.min.js"></script>
<script src="Geometryangle/geometryangle.js"></script>
2. HTML
<body>
<div style="position: fixed; left: 0; right: 0; top: 0; bottom: 0;"></div>
<div>
Content...
</div>
</body>
3. JAVASCRIPT
$(document).ready(function(){
$('body').Geometryangle(mesh:{}, lights: [{}], line: {}, vertex: {});
});
4. OPTIONS
MESH
|
PROPERTY |
TYPE |
DEFAULT |
DESCRIPTION |
|
width |
Float
|
1.2
|
|
|
height |
Float
|
1.2
|
|
|
depth |
Float
|
10
|
How far should the mesh vary into z-space. |
|
columns |
Integer
|
8
|
Number of columns for the mesh. |
|
rows |
Integer
|
4
|
Number of rows for the mesh. |
|
xRange |
Float
|
0.8
|
|
|
yRange |
Float
|
0.1
|
|
|
zRange |
Float
|
1.0
|
|
|
ambient |
String
|
"rgba(85, 85, 85, 1)"
|
|
|
diffuse |
String
|
"rgba(255, 255, 255, 1)"
|
Color of the mesh. |
|
background |
String
|
"rgba(255, 255, 255, 1)"
|
Background color of the canvas. |
|
speed |
Float
|
0.0002
|
|
|
fluctuationSpeed |
Float
|
0.5
|
|
|
fluctuationIntensity |
Float
|
0
|
|
|
onRender |
Function
|
function() {}
|
|
|
floorPosition |
Boolean
|
false
|
Should vertice positions be rounded to integers? Affects canvas rendering speed. |
VERTEX
|
radius |
Float
|
0
|
Radius of vertice circle. |
|
fill |
String
|
"rgba(0,0,0,0)"
|
|
|
fluctuationSpeed |
Float
|
0.5
|
Fluctuates opacity of vertex. |
|
fluctuationIntensity |
Float
|
0
|
|
|
strokeWidth |
Float
|
0
|
|
|
strokeColor |
String
|
"rgba(0,0,0,0)"
|
|
|
draw |
Boolean
|
false
|
Instead of setting alpha channel to zero, set draw to false to avoid computing. |
LINE
|
fill |
String
|
"rgba(0,0,0,0)"
|
|
|
thickness |
Float
|
1
|
Pixel width of line. |
|
fluctuationSpeed |
Float
|
0.5
|
|
|
fluctuationIntensity |
Float
|
0
|
|
|
draw |
Boolean
|
false
|
Instead of setting alpha channel to zero, set draw to false to avoid computing. |
LIGHT
|
count |
Integer
|
1
|
How many light sources belong to this light. |
|
xyScalar |
Integer
|
1
|
|
|
zOffset |
Float
|
100
|
Position of light source. |
|
ambient |
String
|
'rgba(255,0,102, 1)'
|
|
|
diffuse |
String
|
'rgba(255,136,0, 1)'
|
|
|
position |
Array
|
[-1500, -1500]
|
If set to false or undefined, the light source will follow the users mouse or autopilot. |
|
speed |
Float
|
0.01
|
|
|
gravity |
Integer
|
1200
|
|
|
dampening |
Float
|
0.95
|
Dampening of light's movements. |
|
diffuse |
String
|
'rgba(255,136,0, 1)'
|
|
|
autopilot |
Boolean
|
False
|
|
|
draw |
Boolean
|
False
|
Draw a circle for the xy coordinates of light. |
|
autopilot |
Boolean
|
False
|
|
|
autopilot |
Boolean
|
False
|
5. METHODS
|
FUNCTION |
RETURNS |
DESCRIPTION |
Geometryangle.animateValues([r,g,b], [r,g,b])
|
Resultant Array or Vector |
At the moment this function finds the midpoint between two vector arrays, or rgb/rgba array, by percentage scrolled. |
Geometryangle.formatRGBA([r,g,b,a])
|
Resultant rgba string. |
Takes array of rgba values and returns the string. E.g. "rgba(255, 255, 255, 1)" |
JS Tutorial
