Created
April 20, 2015 17:26
-
-
Save atomictom/590f30c1086e1a75b0e8 to your computer and use it in GitHub Desktop.
This file contains hidden or 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
| /** Instructions: | |
| * | |
| * This script is meant to make it easy to test out various transparent | |
| * textures from transparenttextures.com. I used Python + Requests + | |
| * BeautifulSoup to generate the list of textures. A similar method could be | |
| * used to try out backgrounds from a site such as subtlepatterns.com (in | |
| * fact, these names probably work with that site, if you change the source | |
| * variable). | |
| * | |
| * In order to see the currect texture's name, include this snippet directly | |
| * below your <body> tag: | |
| * | |
| * <span id="texture-name" style="position: absolute; left: 0; top: 0; | |
| * background-color: black; color: white"></span> | |
| * | |
| * Press the Left and Right arrow keys to cycle through backgrounds. Q and W | |
| * changes the hue, A and S change the saturation, and Z and X change the | |
| * luminance (so you can test different colors with the backgrounds). | |
| * | |
| * By default all backgrounds are available, I also have a list of the ones I | |
| * preferred after looking through them all if you wish to narrow your | |
| * selection. If you move the backgrounds around in the list, you can change | |
| * the order they appear in. If you comment them out, you can remove them | |
| * from the rotation. | |
| * | |
| * You can also change the default hue, saturation, and luminance by altering | |
| * the appropriate variables (they use the default css hsl format, so stick to | |
| * that range). | |
| * | |
| * Remember to download the texture and host it locally when you're done. | |
| * | |
| * Enjoy! | |
| */ | |
| window.addEventListener("load", function(){ | |
| var source = "http://www.transparenttextures.com/patterns/" | |
| var index = 0 | |
| var hue = 190 | |
| var saturation = 25 | |
| var luminance = 20 | |
| /** | |
| * My Preferred Backgrounds | |
| */ | |
| // var backgrounds = [ | |
| // // Good with light colors | |
| // 'white-diamond-dark.png', | |
| // 'dark-mosaic.png', | |
| // 'white-carbon.png', | |
| // 'subtle-dots.png', | |
| // 'gplay.png', | |
| // 'fake-brick.png', | |
| // 'bright-squares.png', | |
| // '60-lines.png', | |
| // // Good with dark colors | |
| // 'twinkle-twinkle.png', | |
| // 'asfalt-light.png', | |
| // '3px-tile.png', | |
| // 'triangles.png', | |
| // 'hexabump.png', | |
| // // Other? | |
| // 'use-your-illusion.png', | |
| // 'otis-redding.png', | |
| // 'diagmonds.png', | |
| // 'classy-fabric.png', | |
| // 'black-orchid.png', | |
| // 'black-mamba.png', | |
| // ] | |
| /** | |
| * All Backgrounds | |
| */ | |
| var backgrounds = [ | |
| '3px-tile.png', | |
| '45-degree-fabric-dark.png', | |
| '45-degree-fabric-light.png', | |
| '60-lines.png', | |
| 'absurdity.png', | |
| 'ag-square.png', | |
| 'always-grey.png', | |
| 'arabesque.png', | |
| 'arches.png', | |
| 'argyle.png', | |
| 'asfalt-dark.png', | |
| 'asfalt-light.png', | |
| 'assault.png', | |
| 'axiom-pattern.png', | |
| 'az-subtle.png', | |
| 'back-pattern.png', | |
| 'basketball.png', | |
| 'batthern.png', | |
| 'bedge-grunge.png', | |
| 'beige-paper.png', | |
| 'billie-holiday.png', | |
| 'binding-dark.png', | |
| 'binding-light.png', | |
| 'black-felt.png', | |
| 'black-linen.png', | |
| 'black-linen-2.png', | |
| 'black-mamba.png', | |
| 'black-orchid.png', | |
| 'black-paper.png', | |
| 'black-scales.png', | |
| 'black-thread.png', | |
| 'black-thread-light.png', | |
| 'black-twill.png', | |
| 'blizzard.png', | |
| 'blu-stripes.png', | |
| 'bo-play.png', | |
| 'brick-wall.png', | |
| 'brick-wall-dark.png', | |
| 'bright-squares.png', | |
| 'brilliant.png', | |
| 'broken-noise.png', | |
| 'brushed-alum.png', | |
| 'brushed-alum-dark.png', | |
| 'buried.png', | |
| 'candyhole.png', | |
| 'carbon-fibre.png', | |
| 'carbon-fibre-big.png', | |
| 'carbon-fibre-v2.png', | |
| 'cardboard.png', | |
| 'cardboard-flat.png', | |
| 'cartographer.png', | |
| 'checkered-light-emboss.png', | |
| 'checkered-pattern.png', | |
| 'church.png', | |
| 'circles.png', | |
| 'classy-fabric.png', | |
| 'clean-gray-paper.png', | |
| 'clean-textile.png', | |
| 'climpek.png', | |
| 'cloth-alike.png', | |
| 'concrete-wall.png', | |
| 'concrete-wall-2.png', | |
| 'concrete-wall-3.png', | |
| 'connected.png', | |
| 'corrugation.png', | |
| 'cream-dust.png', | |
| 'cream-paper.png', | |
| 'cream-pixels.png', | |
| 'crisp-paper-ruffles.png', | |
| 'crissxcross.png', | |
| 'cross-scratches.png', | |
| 'cross-stripes.png', | |
| 'crossword.png', | |
| 'cubes.png', | |
| 'cutcube.png', | |
| 'dark-brick-wall.png', | |
| 'dark-circles.png', | |
| 'dark-denim.png', | |
| 'dark-denim-3.png', | |
| 'dark-dot.png', | |
| 'dark-dotted-2.png', | |
| 'dark-exa.png', | |
| 'dark-fish-skin.png', | |
| 'dark-geometric.png', | |
| 'dark-leather.png', | |
| 'dark-matter.png', | |
| 'dark-mosaic.png', | |
| 'dark-stripes.png', | |
| 'dark-stripes-light.png', | |
| 'dark-tire.png', | |
| 'dark-wall.png', | |
| 'dark-wood.png', | |
| 'darth-stripe.png', | |
| 'debut-dark.png', | |
| 'debut-light.png', | |
| 'diagmonds.png', | |
| 'diagmonds-light.png', | |
| 'diagonal-noise.png', | |
| 'diagonal-striped-brick.png', | |
| 'diagonal-waves.png', | |
| 'diagonales-decalees.png', | |
| 'diamond-eyes.png', | |
| 'diamond-upholstery.png', | |
| 'diamonds-are-forever.png', | |
| 'dimension.png', | |
| 'dirty-old-black-shirt.png', | |
| 'dotnoise-light-grey.png', | |
| 'double-lined.png', | |
| 'dust.png', | |
| 'ecailles.png', | |
| 'egg-shell.png', | |
| 'elastoplast.png', | |
| 'elegant-grid.png', | |
| 'embossed-paper.png', | |
| 'escheresque.png', | |
| 'escheresque-dark.png', | |
| 'exclusive-paper.png', | |
| 'fabric-plaid.png', | |
| 'fabric-1-dark.png', | |
| 'fabric-1-light.png', | |
| 'fabric-of-squares.png', | |
| 'fake-brick.png', | |
| 'fake-luxury.png', | |
| 'fancy-deboss.png', | |
| 'farmer.png', | |
| 'felt.png', | |
| 'first-aid-kit.png', | |
| 'flower-trail.png', | |
| 'flowers.png', | |
| 'foggy-birds.png', | |
| 'food.png', | |
| 'football-no-lines.png', | |
| 'french-stucco.png', | |
| 'fresh-snow.png', | |
| 'gold-scale.png', | |
| 'gplay.png', | |
| 'gradient-squares.png', | |
| 'graphcoders-lil-fiber.png', | |
| 'graphy-dark.png', | |
| 'graphy.png', | |
| 'gravel.png', | |
| 'gray-floral.png', | |
| 'gray-lines.png', | |
| 'gray-sand.png', | |
| 'green-cup.png', | |
| 'green-dust-and-scratches.png', | |
| 'green-fibers.png', | |
| 'green-gobbler.png', | |
| 'grey-jean.png', | |
| 'grey-sandbag.png', | |
| 'grey-washed-wall.png', | |
| 'greyzz.png', | |
| 'grid.png', | |
| 'grid-me.png', | |
| 'grid-noise.png', | |
| 'grilled-noise.png', | |
| 'groovepaper.png', | |
| 'grunge-wall.png', | |
| 'gun-metal.png', | |
| 'handmade-paper.png', | |
| 'hexabump.png', | |
| 'hexellence.png', | |
| 'hixs-evolution.png', | |
| 'hoffman.png', | |
| 'honey-im-subtle.png', | |
| 'ice-age.png', | |
| 'inflicted.png', | |
| 'inspiration-geometry.png', | |
| 'iron-grip.png', | |
| 'kinda-jean.png', | |
| 'knitted-netting.png', | |
| 'knitted-sweater.png', | |
| 'kuji.png', | |
| 'large-leather.png', | |
| 'leather.png', | |
| 'light-aluminum.png', | |
| 'light-gray.png', | |
| 'light-grey-floral-motif.png', | |
| 'light-honeycomb.png', | |
| 'light-honeycomb-dark.png', | |
| 'light-mesh.png', | |
| 'light-paper-fibers.png', | |
| 'light-sketch.png', | |
| 'light-toast.png', | |
| 'light-wool.png', | |
| 'lined-paper.png', | |
| 'lined-paper-2.png', | |
| 'little-knobs.png', | |
| 'little-pluses.png', | |
| 'little-triangles.png', | |
| 'low-contrast-linen.png', | |
| 'lyonnette.png', | |
| 'maze-black.png', | |
| 'maze-white.png', | |
| 'mbossed.png', | |
| 'medic-packaging-foil.png', | |
| 'merely-cubed.png', | |
| 'micro-carbon.png', | |
| 'mirrored-squares.png', | |
| 'mocha-grunge.png', | |
| 'mooning.png', | |
| 'moulin.png', | |
| 'my-little-plaid-dark.png', | |
| 'my-little-plaid.png', | |
| 'nami.png', | |
| 'nasty-fabric.png', | |
| 'natural-paper.png', | |
| 'navy.png', | |
| 'nice-snow.png', | |
| 'nistri.png', | |
| 'noise-lines.png', | |
| 'noise-pattern-with-subtle-cross-lines.png', | |
| 'noisy.png', | |
| 'noisy-grid.png', | |
| 'noisy-net.png', | |
| 'norwegian-rose.png', | |
| 'notebook.png', | |
| 'notebook-dark.png', | |
| 'office.png', | |
| 'old-husks.png', | |
| 'old-map.png', | |
| 'old-mathematics.png', | |
| 'old-moon.png', | |
| 'old-wall.png', | |
| 'otis-redding.png', | |
| 'outlets.png', | |
| 'p1.png', | |
| 'p2.png', | |
| 'p4.png', | |
| 'p5.png', | |
| 'p6.png', | |
| 'padded.png', | |
| 'padded-light.png', | |
| 'paper.png', | |
| 'paper-1.png', | |
| 'paper-2.png', | |
| 'paper-3.png', | |
| 'paper-fibers.png', | |
| 'paven.png', | |
| 'perforated-white-leather.png', | |
| 'pineapple-cut.png', | |
| 'pinstripe-dark.png', | |
| 'pinstripe-light.png', | |
| 'pinstriped-suit.png', | |
| 'pixel-weave.png', | |
| 'polaroid.png', | |
| 'polonez-pattern.png', | |
| 'polyester-lite.png', | |
| 'pool-table.png', | |
| 'project-paper.png', | |
| 'ps-neutral.png', | |
| 'psychedelic.png', | |
| 'purty-wood.png', | |
| 'pw-pattern.png', | |
| 'pyramid.png', | |
| 'quilt.png', | |
| 'random-grey-variations.png', | |
| 'ravenna.png', | |
| 'real-carbon-fibre.png', | |
| 'rebel.png', | |
| 'redox-01.png', | |
| 'redox-02.png', | |
| 'reticular-tissue.png', | |
| 'retina-dust.png', | |
| 'retina-wood.png', | |
| 'retro-intro.png', | |
| 'rice-paper.png', | |
| 'rice-paper-2.png', | |
| 'rice-paper-3.png', | |
| 'robots.png', | |
| 'rocky-wall.png', | |
| 'rough-cloth.png', | |
| 'rough-cloth-light.png', | |
| 'rough-diagonal.png', | |
| 'rubber-grip.png', | |
| 'sandpaper.png', | |
| 'satin-weave.png', | |
| 'scribble-light.png', | |
| 'shattered.png', | |
| 'shattered-dark.png', | |
| 'shine-caro.png', | |
| 'shine-dotted.png', | |
| 'shley-tree-1.png', | |
| 'shley-tree-2.png', | |
| 'silver-scales.png', | |
| 'simple-dashed.png', | |
| 'simple-horizontal-light.png', | |
| 'skeletal-weave.png', | |
| 'skewed-print.png', | |
| 'skin-side-up.png', | |
| 'skulls.png', | |
| 'slash-it.png', | |
| 'small-crackle-bright.png', | |
| 'small-crosses.png', | |
| 'smooth-wall-dark.png', | |
| 'smooth-wall-light.png', | |
| 'sneaker-mesh-fabric.png', | |
| 'snow.png', | |
| 'soft-circle-scales.png', | |
| 'soft-kill.png', | |
| 'soft-pad.png', | |
| 'soft-wallpaper.png', | |
| 'solid.png', | |
| 'sos.png', | |
| 'sprinkles.png', | |
| 'squairy.png', | |
| 'squared-metal.png', | |
| 'squares.png', | |
| 'stacked-circles.png', | |
| 'stardust.png', | |
| 'starring.png', | |
| 'stitched-wool.png', | |
| 'strange-bullseyes.png', | |
| 'straws.png', | |
| 'stressed-linen.png', | |
| 'stucco.png', | |
| 'subtle-carbon.png', | |
| 'subtle-dark-vertical.png', | |
| 'subtle-dots.png', | |
| 'subtle-freckles.png', | |
| 'subtle-grey.png', | |
| 'subtle-grunge.png', | |
| 'subtle-stripes.png', | |
| 'subtle-surface.png', | |
| 'subtle-white-feathers.png', | |
| 'subtle-zebra-3d.png', | |
| 'subtlenet.png', | |
| 'swirl.png', | |
| 'tactile-noise-dark.png', | |
| 'tactile-noise-light.png', | |
| 'tapestry.png', | |
| 'tasky.png', | |
| 'tex2res1.png', | |
| 'tex2res2.png', | |
| 'tex2res3.png', | |
| 'tex2res4.png', | |
| 'tex2res5.png', | |
| 'textured-paper.png', | |
| 'textured-stripes.png', | |
| 'texturetastic-gray.png', | |
| 'ticks.png', | |
| 'tileable-wood.png', | |
| 'tileable-wood-colored.png', | |
| 'tiny-grid.png', | |
| 'translucent-fibres.png', | |
| 'transparent-square-tiles.png', | |
| 'tree-bark.png', | |
| 'triangles.png', | |
| 'triangles-2.png', | |
| 'triangular.png', | |
| 'tweed.png', | |
| 'twinkle-twinkle.png', | |
| 'txture.png', | |
| 'type.png', | |
| 'use-your-illusion.png', | |
| 'vaio.png', | |
| 'vertical-cloth.png', | |
| 'vichy.png', | |
| 'vintage-speckles.png', | |
| 'wall-4-light.png', | |
| 'washi.png', | |
| 'wave-grid.png', | |
| 'wavecut.png', | |
| 'weave.png', | |
| 'wet-snow.png', | |
| 'white-bed-sheet.png', | |
| 'white-brick-wall.png', | |
| 'white-brushed.png', | |
| 'white-carbon.png', | |
| 'white-carbonfiber.png', | |
| 'white-diamond.png', | |
| 'white-diamond-dark.png', | |
| 'white-leather.png', | |
| 'white-linen.png', | |
| 'white-paperboard.png', | |
| 'white-plaster.png', | |
| 'white-sand.png', | |
| 'white-texture.png', | |
| 'white-tiles.png', | |
| 'white-wall.png', | |
| 'white-wall-2.png', | |
| 'white-wall-3.png', | |
| 'white-wall-3-2.png', | |
| 'white-wave.png', | |
| 'whitey.png', | |
| 'wide-rectangles.png', | |
| 'wild-flowers.png', | |
| 'wild-oliva.png', | |
| 'wine-cork.png', | |
| 'wood.png', | |
| 'wood-pattern.png', | |
| 'worn-dots.png', | |
| 'woven.png', | |
| 'woven-light.png', | |
| 'xv.png', | |
| 'zig-zag.png', | |
| 'black-lozenge.png', | |
| ] | |
| function stepBy(value, step, mod, backwards){ | |
| var direction = (backwards) ? -1 : 1 | |
| return value = (value + (direction * step) + mod) % mod | |
| } | |
| function changeBackground(backwards){ | |
| var step = 1, mod = backgrounds.length | |
| index = stepBy(index, step, mod, backwards) | |
| document.body.style.backgroundImage = "url(" + source + backgrounds[index] + ")" | |
| document.getElementById("texture-name").innerHTML = backgrounds[index] | |
| } | |
| function changeHue(backwards){ | |
| var step = 10, mod = 360 | |
| hue = stepBy(hue, step, mod, backwards) | |
| updateHSL() | |
| } | |
| function changeSaturation(backwards){ | |
| var step = 2, mod = 100 | |
| saturation = stepBy(saturation, step, mod, backwards) | |
| updateHSL() | |
| } | |
| function changeLuminance(backwards){ | |
| var step = 2, mod = 100 | |
| luminance = stepBy(luminance, step, mod, backwards) | |
| updateHSL() | |
| } | |
| function updateHSL(){ | |
| var hsl = "hsl(" + hue + ", " + saturation + "%, " + luminance + "%)" | |
| document.body.style.backgroundColor = hsl | |
| console.log(hsl) | |
| } | |
| changeBackground(true) | |
| changeBackground() | |
| // updateHSL() | |
| window.addEventListener("keydown", function(e){ | |
| switch(e.keyCode){ | |
| // Backgrounds | |
| case 37: // Left | |
| changeBackground(true) | |
| break | |
| case 39: // Right | |
| changeBackground() | |
| break | |
| // Hue | |
| case 81: // q | |
| changeHue(true) | |
| break | |
| case 87: // w | |
| changeHue() | |
| break | |
| // Saturation | |
| case 65: // a | |
| changeSaturation(true) | |
| break | |
| case 83: // s | |
| changeSaturation() | |
| break | |
| // Luminance | |
| case 90: // z | |
| changeLuminance(true) | |
| break | |
| case 88: // x | |
| changeLuminance() | |
| break | |
| } | |
| }) | |
| }) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment