-
-
Save simianarmy/6787392 to your computer and use it in GitHub Desktop.
Cool exploding tile css custom filter from Adobe CSS FilterLab
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"hasVertex": true, | |
"hasFragment": true, | |
"mix": { | |
"blendMode": "normal", | |
"compositeOperator": "source-atop" | |
}, | |
"mesh": { | |
"columns": 100, | |
"rows": 100 | |
}, | |
"meshBox": "border-box detached", | |
"params": { | |
"transform": { | |
"rotationX": 0, | |
"rotationY": 0, | |
"rotationZ": 0, | |
"perspective": 1000, | |
"scale": 1 | |
}, | |
"tileTransform": { | |
"rotationX": 0, | |
"rotationY": 0, | |
"rotationZ": 0, | |
"perspective": 1000, | |
"scale": 1 | |
}, | |
"explosiveness": 1.5, | |
"tileRotation": [ | |
0, | |
0, | |
0 | |
], | |
"center": [ | |
0.5, | |
0.5 | |
], | |
"t": 0.2, | |
"fade": 0.8 | |
}, | |
"config": { | |
"transform": { | |
"type": "transform", | |
"generator": "transform", | |
"mixer": { | |
"fn": "mixHash", | |
"params": [ | |
"mixNumber" | |
] | |
} | |
}, | |
"tileTransform": { | |
"type": "transform", | |
"generator": "transform", | |
"mixer": { | |
"fn": "mixHash", | |
"params": [ | |
"mixNumber" | |
] | |
} | |
}, | |
"explosiveness": { | |
"type": "range", | |
"min": 0, | |
"max": 5, | |
"step": 0.1 | |
}, | |
"tileRotation": { | |
"type": "vec3", | |
"generator": "vector", | |
"mixer": "mixVector", | |
"min": -180, | |
"max": 180, | |
"step": 1 | |
}, | |
"center": { | |
"type": "vec2", | |
"generator": "vector", | |
"mixer": "mixVector", | |
"min": -1, | |
"max": 1, | |
"step": 0.01 | |
}, | |
"t": { | |
"type": "range", | |
"min": 0, | |
"max": 1, | |
"step": 0.01 | |
}, | |
"fade": { | |
"type": "range", | |
"min": 0, | |
"max": 1, | |
"step": 0.01 | |
} | |
}, | |
"label": "tile-explosion3", | |
"createdWith": "CSS FilterLab" | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* Copyright (c) 2012 Adobe Systems Incorporated. All rights reserved. | |
* | |
* Licensed under the Apache License, Version 2.0 (the "License"); | |
* you may not use this file except in compliance with the License. | |
* You may obtain a copy of the License at | |
* | |
* http://www.apache.org/licenses/LICENSE-2.0 | |
* | |
* Unless required by applicable law or agreed to in writing, software | |
* distributed under the License is distributed on an "AS IS" BASIS, | |
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | |
* See the License for the specific language governing permissions and | |
* limitations under the License. | |
*/ | |
precision mediump float; | |
// Uniforms passed in in from CSS | |
uniform float t; | |
uniform float fade; | |
// Main | |
void main() | |
{ | |
// As t increases from [0 -> 0.5 -> 1], | |
// fadeFactor increases and then decreases from [0 -> 1 -> 0]. | |
float fadeFactor = 2.0 * t; | |
if (fadeFactor > 1.0) | |
fadeFactor = 2.0 - fadeFactor; | |
float currentFade = 1.0 - fadeFactor * fade; | |
css_ColorMatrix = mat4(1.0); | |
css_ColorMatrix[3][3] = currentFade; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* Copyright (c) 2012 Adobe Systems Incorporated. All rights reserved. | |
* | |
* Licensed under the Apache License, Version 2.0 (the "License"); | |
* you may not use this file except in compliance with the License. | |
* You may obtain a copy of the License at | |
* | |
* http://www.apache.org/licenses/LICENSE-2.0 | |
* | |
* Unless required by applicable law or agreed to in writing, software | |
* distributed under the License is distributed on an "AS IS" BASIS, | |
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | |
* See the License for the specific language governing permissions and | |
* limitations under the License. | |
*/ | |
precision mediump float; | |
// Built-in attributes | |
attribute vec4 a_position; | |
attribute vec2 a_texCoord; | |
attribute vec2 a_meshCoord; | |
attribute vec3 a_triangleCoord; | |
// Built-in uniforms | |
uniform vec4 u_meshBox; | |
uniform vec2 u_tileSize; | |
uniform vec2 u_meshSize; | |
uniform mat4 u_projectionMatrix; | |
uniform vec2 u_textureSize; | |
// Uniforms passed in from CSS | |
uniform mat4 transform; | |
uniform float t; | |
uniform float explosiveness; | |
uniform vec3 tileRotation; | |
uniform vec2 center; | |
// Constants | |
// Noise used to have the tiles move a little bit when they are out of the explosion sphere. | |
const float noise = 200.0; | |
// Helper functions | |
mat4 translate(vec3 t) { | |
return mat4( | |
1.0, 0.0, 0.0, 0.0, | |
0.0, 1.0, 0.0, 0.0, | |
0.0, 0.0, 1.0, 0.0, | |
t.x, t.y, t.z, 1.0); | |
} | |
mat4 rotateX(float f) { | |
return mat4( | |
1.0, 0.0, 0.0, 0.0, | |
0.0, cos(f), sin(f), 0.0, | |
0.0, -sin(f), cos(f), 0.0, | |
0.0, 0.0, 0.0, 1.0); | |
} | |
mat4 rotateY(float f) { | |
return mat4( | |
cos(f), 0.0, -sin(f), 0.0, | |
0.0, 1.0, 0.0, 0.0, | |
sin(f), 0, cos(f), 0.0, | |
0.0, 0.0, 0.0, 1.0); | |
} | |
mat4 rotateZ(float f) { | |
return mat4( | |
cos(f), sin(f), 0.0, 0.0, | |
-sin(f), cos(f), 0.0, 0.0, | |
0.0, 0.0, 1.0, 0.0, | |
0.0, 0.0, 0.0, 1.0); | |
} | |
mat4 scale(vec3 f) { | |
return mat4( | |
f.x, 0.0, 0.0, 0.0, | |
0.0, f.y, 0.0, 0.0, | |
0.0, 0.0, f.z, 0.0, | |
0.0, 0.0, 0.0, 1.0); | |
} | |
mat4 rotate(vec3 a) { | |
return rotateX(a.x) * rotateY(a.y) * rotateZ(a.z); | |
} | |
// Random function based on the tile coordinate. This will return the same value | |
// for all the vertices in the same tile (i.e., two triangles). | |
float random(vec2 scale) | |
{ | |
// Use the fragment position for a different seed per-pixel. | |
return fract(sin(dot(vec2(a_triangleCoord.x, a_triangleCoord.y), scale)) * 4000.0); | |
} | |
// Main | |
// This effect is using a center point for an 'explosion' effect. The further a point is from the | |
// center, the more it moves along the x and y axis, radially. The closer to the explosion, the move | |
// the point moves along the z axis. | |
void main() | |
{ | |
// r is dependent on the tile coordinates. | |
float r = random(vec2(10.0, 80.0)); | |
// Complete tile transform | |
mat4 ttfx = mat4(1.0); | |
// R is the explosion sphere radius | |
float p = 2.0 * t; | |
if (p > 1.0) | |
p = 2.0 - p; | |
float R2 = p * max(u_textureSize.x, u_textureSize.y); | |
R2 *= R2; | |
float dx = abs(center.x - a_meshCoord.x) * u_textureSize.x; | |
float dy = abs(center.y - a_meshCoord.y) * u_textureSize.y; | |
float d2 = dx * dx + dy * dy; | |
// Find the tile center. | |
vec3 trc = vec3(u_meshBox.x + u_tileSize.x * (a_triangleCoord.x + 0.5), | |
u_meshBox.y + u_tileSize.y * (a_triangleCoord.y + 0.5), | |
0.0); | |
// Rotate about the tile center along the z-axis | |
ttfx = translate(trc) * | |
rotate(radians(vec3(tileRotation.x * r * p, 2.0 * tileRotation.y * r * p, 0.5 * r * p * tileRotation.z))) * | |
translate(-trc); | |
ttfx = translate(vec3(0.0, 0.0, p * explosiveness * sqrt(abs(R2 - d2)) * (0.8 + 0.4 * r))) * ttfx; | |
ttfx = translate(vec3(0.0, 0.0, (-0.5 + r) * noise * p)) * ttfx; | |
gl_Position = u_projectionMatrix * transform * ttfx * a_position; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Saving this css custom filter I created using Adobe CSS FilterLab