├── COPYING ├── readme.md ├── generate.js └── index.html /COPYING: -------------------------------------------------------------------------------- 1 | DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE 2 | Version 2, December 2004 3 | 4 | Copyright (C) 2004 Sam Hocevar 5 | 6 | Everyone is permitted to copy and distribute verbatim or modified 7 | copies of this license document, and changing it is allowed as long 8 | as the name is changed. 9 | 10 | DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE 11 | TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION 12 | 13 | 0. You just DO WHAT THE FUCK YOU WANT TO. 14 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # Background Generator 2 | 3 | ## Post 4 | 5 | - [https://f90.co.uk/labs/background-generator/](https://f90.co.uk/labs/background-generator/) 6 | 7 | ## Example 8 | 9 | - [http://orangespaceman.github.io/background-generator](http://orangespaceman.github.io/background-generator) 10 | 11 | Copyright © 2018 Me 12 | This work is free. You can redistribute it and/or modify it under the 13 | terms of the Do What The Fuck You Want To Public License, Version 2, 14 | as published by Sam Hocevar. See the COPYING file for more details. 15 | -------------------------------------------------------------------------------- /generate.js: -------------------------------------------------------------------------------- 1 | function generate(width, height, objects, type) { 2 | 3 | var canvas; 4 | var ctx; 5 | 6 | // create canvas 7 | canvas = document.createElement('canvas'); 8 | canvas.width = width; 9 | canvas.height = height; 10 | ctx = canvas.getContext('2d'); 11 | 12 | // create objects 13 | for (var i = 0; i < objects; i++) { 14 | var x = getRandomInt(0, width); 15 | var y = getRandomInt(0, height); 16 | var object = { 17 | position: { 18 | x: x, 19 | y: y, 20 | }, 21 | hue: getRandomInt(0, 360), 22 | size: (Math.random() * 3), 23 | length: getRandomInt(50, height - y - 5), 24 | opacity: type === 'stars' ? getRandomInt(50, 100) : getRandomInt(10, 50), 25 | saturation: getRandomInt(0, 50) + '%', 26 | }; 27 | 28 | ctx.beginPath(); 29 | ctx.shadowBlur = Math.floor(Math.random() * 5 + 2); 30 | ctx.shadowColor = 'white'; 31 | ctx.fillStyle = 32 | 'hsla(' + 33 | object.hue + 34 | ', ' + 35 | object.saturation + 36 | ', 80%, .' + 37 | object.opacity + 38 | ')'; 39 | 40 | ctx.fillRect( 41 | object.position.x, 42 | object.position.y, 43 | object.size, 44 | type === 'stars' ? object.size : object.length 45 | ); 46 | } 47 | 48 | // return image data 49 | return canvas.toDataURL("image/png"); 50 | 51 | // http://stackoverflow.com/questions/1527803/generating-random-numbers-in-javascript-in-a-specific-range 52 | function getRandomInt(min, max) { 53 | return Math.floor(Math.random() * (max - min + 1)) + min; 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Background generator 7 | 8 | 9 | 36 | 37 | 38 | 39 | 40 | 41 |

Background generator

42 |