screensavers/horizontal_sparkle/index.htm - Issue 5558004: Move screensavers over from assets to chromiumos-assets as they are ChromiumOS specific atm.

Side by Side Diff: screensavers/horizontal_sparkle/index.htm

Issue 5558004: Move screensavers over from assets to chromiumos-assets as they are ChromiumOS specific atm. (Closed) Base URL: http://git.chromium.org/git/chromiumos-assets.git@master

Patch Set: Created 10 years ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View unified diff | Download patch | Annotate | Revision Log

OLD	NEW
(Empty)
	1 <html>

	2 <head>

	3 <script type="text/javascript">

	4 var canvas;

	5 var g;

	6 var rate = 5;

	7 var mouseX = 0;

	8 var mouseY = 0;

	9 var pmouseX = 0;

	10 var pmouseY = 0;

	11 var width, height;

	12 var mousePressed = false;

	13

	14 var hexes = [];

	15

	16 function setup() {

	17 canvas = document.createElement("canvas");

	18 document.body.appendChild(canvas);

	19 g = canvas.getContext("2d");

	20 setInterval(draw, rate);

	21 document.addEventListener('mousemove', onDocumentMouseMove, false);

	22 document.addEventListener('mousedown', onDocumentMouseDown, false);

	23 document.addEventListener('mouseup', onDocumentMouseUp, false);

	24 window.addEventListener('resize', onWindowResize, false);

	25 onWindowResize();

	26 //////////////////////////////////////////

	27 while (hexes.length < 200) {

	28 hexes.push(new Hex());

	29 }

	30 }

	31 function onWindowResize(e) {

	32 width = canvas.width = window.innerWidth;

	33 height = canvas.height = window.innerHeight;

	34 }

	35 function onDocumentMouseMove(e) {

	36 pmouseX = mouseX;

	37 pmouseY = mouseY;

	38 mouseX = e.pageX;

	39 mouseY = e.pageY;

	40 }

	41 function onDocumentMouseDown(e) {

	42 mousePressed = true;

	43 }

	44 function onDocumentMouseUp(e) {

	45 mousePressed = false;

	46 }

	47

	48 function dist(x, y, xx, yy) {

	49 return Math.sqrt((xx-x)(xx-x)+(yy-y)(yy-y));

	50 }

	51

	52 function constrain(v, min, max){

	53 if(v<min) v = min;

	54 if(v>max) v = max;

	55 return v;

	56 }

	57

	58 function map(v, i1, i2, o1, o2) {

	59 return o1 + (o2 - o1) * ((v - i1) / (i2 - i1));

	60 }

	61

	62 function random(a, b) {

	63 var r = Math.random();

	64 if (a instanceof Array) {

	65 var i = Math.floor(r*a.length);

	66 return a[i];

	67 } else if (b == undefined) {

	68 return r*a;

	69 } else {

	70 return r*(a+b)-a;

	71 }

	72 }

	73 var cx = -200;

	74 function draw() {

	75 g.globalCompositeOperation = "source-over";

	76 g.fillStyle= "#000";

	77 g.fillRect(0, 0, width, height);

	78 g.globalCompositeOperation = "lighter";

	79 for (var h in hexes) {

	80 hexes[h].update();

	81 hexes[h].draw();

	82 }

	83 cx += 8;

	84 if (cx > width+200) {

	85 cx = -200;

	86 }

	87 }

	88

	89 function roundedHex(x,y, d) {

	90 var sides = 6;

	91 var a = Math.PI*2/sides;

	92 var aa = a;

	93 var r = 10;

	94 g.beginPath();

	95 g.save();

	96 g.translate(x, y);

	97 g.moveTo(Math.cos(aa)d, Math.sin(aa)d);

	98 for (var i = 0; i < sides; i++) {

	99 aa += a;

	100 g.lineTo(Math.cos(aa)d, Math.sin(aa)d);

	101 }

	102 g.fill();

	103 g.restore();

	104 g.closePath();

	105 }

	106

	107 var colors = ["#e4463b", "#fffc23", "#5ad81c", "#1c8bd8"];

	108 var s = 80;

	109 var rows = 20;

	110 var cols = 10;

	111 function Hex() {

	112 this.x = (hexes.length%rows)*s;

	113 this.y = Math.floor(hexes.length/rows)s0.865;

	114 this.color = random(colors);

	115 this.ss = 0;

	116 this.draw = function() {

	117 var radgrad2 = g.createRadialGradient(0,0,0,0,0,this.ss*1.5);//g.createRadia lGradient(this.x,this.y,0,this.x,this.y,this.s);

	118 radgrad2.addColorStop(0, this.color);

	119 radgrad2.addColorStop(1, "#000");

	120 g.fillStyle = radgrad2;

	121 if (this.ss > 0) {

	122 roundedHex(this.x, this.y, this.ss);

	123 }

	124 }

	125

	126 this.update = function() {

	127 var d = dist(cx, height/2.3, this.x, this.y);

	128 d = constrain(d, 0, 200);

	129 var x = map(d, 200, 0, 0, s*2);

	130 this.ss += (x-this.ss)*0.5;

	131 }

	132

	133 }

	134 </script>

	135 <style type="text/css">

	136 * {

	137 margin: 0;

	138 padding: 0;

	139 }

	140 html, body {

	141 width: 100%;

	142 background-color: #000;

	143 height: 100%;

	144 }

	145 img {

	146 position: absolute;

	147 left: 50%;

	148 margin-left: -90px;

	149 padding-top: 470px;

	150 }

	151 </style>

	152 </head>

	153 <body onload="setup()">

	154 <img src="title.png" alt="" width="180"/>

	155 </body>

	156 </html>

OLD	NEW

« no previous file with comments | « screensavers/fade_in_out/logo_back.png ('k') | screensavers/horizontal_sparkle/title.png » ('j') | no next file with comments »