-
Notifications
You must be signed in to change notification settings - Fork 667
/
color-function-example.html
124 lines (111 loc) · 3.87 KB
/
color-function-example.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Trianglify Basic Example</title>
<style>
html, body {
margin: 0 0;
padding: 0 0;
text-align: center;
background: #000;
font-family: system-ui;
}
h1 {
font-size: 18px;
}
.demo {
background: #FFF;
display: inline-block;
padding: 20px;
margin: 20px;
}
</style>
</head>
<body>
<!-- This is the standalone build of Trianglify. It's easy to drop in to a
project without any need for bundlers or dependency management, but in most
modern web projects you will probably want to use the NPM module instead -->
<script src="../dist/trianglify.bundle.debug.js"></script>
<script>
const JITTER_FACTOR = 0.2
// utility for building up HTML trees
const h = (tagName, attrs = {}, children = []) => {
const elem = document.createElement(tagName)
attrs && Object.keys(attrs).forEach(
k => attrs[k] !== undefined && elem.setAttribute(k, attrs[k])
)
children && children.forEach(c => elem.appendChild(c))
return elem
}
const addToPage = (pattern, description) => {
document.body.appendChild(h('div', {'class': 'demo'}, [
pattern.toCanvas(),
h('h1', null, [document.createTextNode(description)])
]
))
}
// use the same seed for everything, to allow for easier comparisons
const seed = 'pears'
// Example 1: you can use the built-in color functions to customize the
// color rendering of Trianglify. Here, we use the 'sparkle' color
// function to apply a 10% jitter to the normal color gradients, which
// will yield a glitter-like effect.
const sparkle = trianglify({
seed,
width: 400,
height: 300,
cellSize: 15,
colorFunction: trianglify.colorFunctions.sparkle(0.2)
})
addToPage(sparkle, 'trianglify.colorFunctions.sparkle(0.2)')
// Example 2: you can use the interpolateLinear color function to
// customize how much the x or y gradient dominates the image.
// Higher values for the bias will result in a more pronounced x-gradient,
// while lower values will results in a more pronounced y-gradient
const interpolate = trianglify({
seed,
width: 400,
height: 300,
cellSize: 15,
colorFunction: trianglify.colorFunctions.interpolateLinear(0.1)
})
addToPage(interpolate, 'trianglify.colorFunctions.interpolateLinear(0.1)')
// Example 2: the shadows color function applies a faux-3d effect to the
// pattern. This works best with subtle gradients and solid colors.
const shadows = trianglify({
seed,
width: 400,
height: 300,
cellSize: 15,
colorFunction: trianglify.colorFunctions.shadows()
})
addToPage(shadows, 'trianglify.colorFunctions.shadows()')
// Example 4: you can write your own custom color function to have
// total control over how the polygons are given color values.
//
// Here, we apply the xScale colors as a radial gradient:
// define a custom color function that applies a radial gradient:
const radialGradient = (radius) => ({centroid, xScale}) => {
const distanceFromCenter = Math.sqrt(
Math.pow(200 - centroid.x, 2) + Math.pow(150 - centroid.y, 2)
)
return(xScale(distanceFromCenter / radius))
}
// figure out the gradient radius required to cover the image dimensions:
const gradientRadius = Math.sqrt(
Math.pow(400 / 2, 2) + Math.pow(300 / 2, 2)
)
const radial = trianglify({
seed,
width: 400,
height: 300,
cellSize: 15,
colorFunction: radialGradient(gradientRadius)
})
addToPage(radial, 'custom radial gradient')
</script>
</body>
</html>