I wanted to experiment with CSS Variables and wanted to make this super cool triangle thing, so I combined them with awesome gradients
Created
August 2, 2017 19:08
-
-
Save anonymous/21cf66cef2ff0144795b1eed1706d3a4 to your computer and use it in GitHub Desktop.
Delaunay's Triangulation
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
<canvas></canvas> | |
<div id="details"> | |
<p>This is a generator using Delaunay's Triangulation concept in the form of <a href="https://github.com/ironwallaby/delaunay.git" target="_blank">IronWallaby's library</a></p> | |
<p>The gradients were taken from <a href="https://uigradients.com" target="_blank">UIGradients</a> and <a href="http://gradients.io/" target="_blank">Gradients.io</a></p> | |
<p>You can save these images as backgrounds for your computer too. All you have to do is right click and choose "Save Image"</p> | |
</div> | |
<div id="modified"> | |
<label for="triangle_count">Max Number of Triangles: </label><input type="number" min="20" max="1000" value="100" id="triangle_count"/> | |
<div id="color-schemes"> | |
<p><strong>Color Schemes</strong></p> | |
<p> | |
<input type="radio" id="sea" name="color-scheme"/> | |
<label for="sea">Sea</label> | |
</p> | |
<p> | |
<input type="radio" id="great-good" name="color-scheme"/> | |
<label for="great-good">GreatGoodFineOk</label> | |
</p> | |
<p> | |
<input type="radio" id="metal" name="color-scheme"/> | |
<label for="metal">Metal</label> | |
</p> | |
<p> | |
<input type="radio" id="mimosa" name="color-scheme"/> | |
<label for="mimosa">Mimosa</label> | |
</p> | |
<p> | |
<input type="radio" id="warm-military" name="color-scheme"/> | |
<label for="warm-military">Warm Military</label> | |
</p> | |
<p> | |
<input type="radio" id="random" name="color-scheme" checked/> | |
<label for="random">Random</label> | |
</p> | |
</div> | |
</div> |
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
// Thanks to the following: | |
// https://github.com/ironwallaby/delaunay.git | |
// http://gradients.io/ | |
// https://uigradients.com | |
let color_group = [], fill_color = [], number_of_triangles = 100; | |
const gradients = [ | |
{ | |
name: 'mimosa', | |
colors: [ | |
['#D74177', '#FFE98A'], | |
['#3A1C71', '#D76D77'], | |
['#e96443', '#904e95'], | |
['#ff7e5f', '#feb47b'] | |
]}, | |
{ | |
name: 'sea', | |
colors: [ | |
['#00A8C5', '#FFFF7E'], | |
['#0cebeb', '#20e3b2'], | |
['#007991', '#78ffd6'], | |
['#1CD8D2', '#93EDC7'] | |
]}, | |
{ | |
name: 'great-good', | |
colors: [ | |
['#D4145A', '#FBB03B'], | |
['#C04848', '#480048'], | |
['#cc2b5e','#753a88'], | |
['#C33764', '#1D2671'] | |
]}, | |
{ | |
name: 'metal', | |
colors: [ | |
['#E8CBC0', '#636FA4'], | |
['#DBE6F6', '#C5796D'], | |
['#F3904F', '#3B4371'], | |
['#DAE2F8', '#D6A4A4'] | |
]}, | |
{ | |
name: 'warm-military', | |
colors: [ | |
['#FFA17F', '#00223E'], | |
['#556270', '#FF6B6B'], | |
['#F0C27B', '#1F1C2C'], | |
['#ff7e5f', '#00223E'] | |
]} | |
]; | |
function randNum(min, max){ | |
return Math.floor(Math.random() * (max-min + 1)) + min; | |
} | |
const resizeCanvas = function(){ | |
const canvas = document.querySelector('canvas'); | |
canvas.width = window.screen.availWidth; | |
canvas.height = window.screen.availHeight; | |
} | |
function pointsArray(){ | |
let points = []; | |
while(points.length < number_of_triangles){ | |
points.push([randNum(-50, window.screen.availWidth), randNum(-50, window.screen.availHeight)]) | |
} | |
points.push([0,0], [window.screen.availWidth, 0], [0, window.screen.availHeight], [window.screen.availWidth, window.screen.availHeight]) | |
return points | |
} | |
const chooseColor = function(value){ | |
var color_choice = gradients.find(function(obj){ | |
return obj.name === value | |
}) | |
var colors; | |
if (color_choice) { | |
colors = color_choice.colors | |
} else { | |
colors = gradients[randNum(0, gradients.length-1)].colors; | |
} | |
return colors; | |
} | |
const convertToTriangles = function(value){ | |
color_group = chooseColor(value); | |
const ctx = document.querySelector('canvas').getContext('2d'); | |
ctx.fillStyle = color_group[randNum(0, color_group.length-1)][randNum(0,1)]; | |
ctx.fillRect(0, 0, window.screen.availWidth, window.screen.availHeight); | |
var vertices = pointsArray(); | |
var triangles = Delaunay.triangulate(vertices); | |
for(i = triangles.length; i; ) { | |
var x_arr = [], y_arr = []; | |
ctx.beginPath(); | |
--i; | |
x_arr.push(vertices[triangles[i]][0]); | |
y_arr.push(vertices[triangles[i]][1]); | |
ctx.moveTo(vertices[triangles[i]][0], vertices[triangles[i]][1]); | |
--i; | |
x_arr.push(vertices[triangles[i]][0]); | |
y_arr.push(vertices[triangles[i]][1]); | |
ctx.lineTo(vertices[triangles[i]][0], vertices[triangles[i]][1]); | |
--i; | |
x_arr.push(vertices[triangles[i]][0]); | |
y_arr.push(vertices[triangles[i]][1]); | |
ctx.lineTo(vertices[triangles[i]][0], vertices[triangles[i]][1]); | |
ctx.closePath(); | |
var start_x_point = x_arr[randNum(0, x_arr.length - 1)]; | |
x_arr.splice(x_arr.indexOf(start_x_point), 1); | |
var end_x_point = x_arr[randNum(0, x_arr.length - 1)]; | |
var start_y_point = y_arr[randNum(0, y_arr.length - 1)]; | |
y_arr.splice(y_arr.indexOf(start_y_point), 1); | |
var end_y_point = y_arr[randNum(0, y_arr.length - 1)]; | |
var start_point = [start_x_point, start_y_point]; | |
var end_point = [end_x_point, end_y_point]; | |
var points = [start_point, end_point]; | |
fill_color = color_group[randNum(0, color_group.length-1)]; | |
ctx.fillStyle = gradient(ctx, points, fill_color); | |
ctx.fill(); | |
ctx.strokeStyle = gradient(ctx, points, fill_color); | |
ctx.stroke(); | |
} | |
} | |
function changeLinkColors(index, color1, color2){ | |
document.documentElement.style.setProperty(('--start-color-'+index), color1); | |
document.documentElement.style.setProperty(('--end-color-'+index), color2); | |
} | |
var gradient = function (ctx, points, color){ | |
let grd = ctx.createLinearGradient(points[0][0],points[0][1],points[1][0],points[1][1]); | |
grd.addColorStop(0, color[0]); | |
grd.addColorStop(1, color[1]); | |
return grd; | |
} | |
function drawBackground(value){ | |
convertToTriangles(value); | |
const links = document.querySelectorAll('a'); | |
for (var i = 0; i<links.length; i++){ | |
changeLinkColors(i+1, fill_color[0], fill_color[1]); links[i].addEventListener('mouseenter', function(e){ | |
var index = 0; | |
while( e.target !== links[index] ) | |
index++; | |
let hover_color = color_group[randNum(0, color_group.length-1)]; | |
while(hover_color[0] === fill_color[0]){ | |
hover_color = color_group[randNum(0, color_group.length-1)]; | |
} | |
changeLinkColors(index+1, hover_color[0], hover_color[1]); | |
}); | |
links[i].addEventListener('mouseleave', function(e){ | |
var index = 0; | |
while( e.target !== links[index] ) | |
index++; | |
changeLinkColors(index+1, fill_color[0], fill_color[1]) | |
}) | |
} | |
} | |
window.onload = function(){ | |
resizeCanvas(); | |
drawBackground(document.querySelector('#color-schemes :checked')); | |
var inputs = document.querySelectorAll('input'); | |
for(var i = 0; i < inputs.length; i++){ | |
inputs[i].addEventListener('change', function(e){ | |
number_of_triangles = document.getElementById('triangle_count').value; | |
drawBackground(document.querySelector('#color-schemes :checked').id); | |
}); | |
} | |
} |
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
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/172299/delaunay.js"></script> |
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
@import url('https://fonts.googleapis.com/css?family=Arimo:400,700'); | |
:root { | |
--start-color-1: black; | |
--start-color-2: black; | |
--start-color-3: black; | |
--end-color-1: black; | |
--end-color-2: black; | |
--end-color-3: black; | |
} | |
* { | |
outline: none; | |
} | |
html, body { | |
margin: 0; | |
overflow: hidden; | |
} | |
#details { | |
position: absolute; | |
bottom: 0; | |
left: 0; | |
width: 30vw; | |
background: rgba(black, 0.8); | |
color: white; | |
padding: 1rem; | |
font-family: 'Arimo', sans-serif; | |
letter-spacing: 0.5px; | |
font-size: 0.9rem; | |
line-height: 1.3rem; | |
a { | |
display: inline-block; | |
-webkit-background-clip: text; | |
text-decoration: none; | |
color: transparent; | |
transition: all 0.4s; | |
font-weight: 700; | |
&:hover { | |
cursor: pointer; | |
transition: all 0.4s; | |
} | |
} | |
p { | |
&:first-child { | |
margin-top: 0; | |
a { | |
background-image: linear-gradient(var(--start-color-1), var(--end-color-1)); | |
} | |
} | |
&:nth-child(2) { | |
a:first-child { | |
background-image: linear-gradient(var(--start-color-2), var(--end-color-2)); | |
} | |
a:last-child { | |
background-image: linear-gradient(var(--start-color-3), var(--end-color-3)); | |
} | |
} | |
&:last-child { | |
margin-bottom: 0; | |
} | |
} | |
} | |
#modified { | |
position: absolute; | |
top: 0; | |
right: 0; | |
background: rgba(black, 0.8); | |
color: white; | |
font-family: 'Arimo', sans-serif; | |
padding: 1rem; | |
letter-spacing: 0.5px; | |
font-size: 0.9rem; | |
line-height: 1.3rem; | |
input { | |
border: 2px solid transparent; | |
font-family: 'Arimo', sans-serif; | |
letter-spacing: 0.5px; | |
font-size: 0.9rem; | |
padding: 0.3rem; | |
background: lighten(black, 5%); | |
color: var(--start-color-2); | |
caret-color: var(--start-color-3); | |
&:focus { | |
border: var(--start-color-1) 2px solid; | |
} | |
} | |
p { | |
margin: 4px 0; | |
input:checked + label { | |
display: inline-block; | |
background: linear-gradient(var(--start-color-1), var(--end-color-1)); | |
-webkit-background-clip: text; | |
color: transparent; | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment