Fishtank/fish.html at master · ossim/Fishtank · GitHub

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
125
126
<!-- inspired by hakim.se -->

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Fishtank</title>
        <link type="text/css" href="css/style.css" rel="stylesheet"/>
        <link href='http://fonts.googleapis.com/css?family=Playfair+Display+SC:400,700' rel='stylesheet' type='text/css'>
    </head>
    <body>
        <div id="panel">
            <h1>David Xie // fishtank</h1>
            <p><i>You strange, astonished-looking, angle-faced, </br>dreary-mouthed, gaping wretches of the sea.</i></p>
        </div>
        <canvas id="canvasElement">Your fishtank is too old to hold these fish.</canvas>
        <script type="text/javascript">

        var particles = [];
        for( var i = 0; i < 150; i++ ) {
            particles.push( {
                x:Math.random()*window.innerWidth,
                y:Math.random()*window.innerHeight,
                vx:(Math.random()*2)-1,
                vy:(Math.random()*2-1),
                history: [],
                size: 4+Math.random()*6,
                color: Math.random() > .4 ? "rgba(033,090,109,0.1)" : Math.random() > .4 ? "rgba(060,162,162,0.1)" : Math.random() > .4 ? "rgba(146,199,163,0.1)" : "rgba(146,199,163,0.1)"
            } );
        }

        var mouse = { x: 0, y: 0 };

        var canvas = document.getElementById('canvasElement');

        if (canvas && canvas.getContext) {
            var context = canvas.getContext('2d');

            Initialize();
        }

        function Initialize() {
            canvas.addEventListener('mousemove', MouseMove, false);
            window.addEventListener('resize', ResizeCanvas, false);
            setInterval( TimeUpdate, 20 );

            context.beginPath();

            ResizeCanvas();
        }

        function TimeUpdate(e) {

            context.clearRect(0, 0, window.innerWidth, window.innerHeight);

            for( var i = 0; i < particles.length; i++ ) {
                particles[i].x += particles[i].vx;
                particles[i].y += particles[i].vy;

                if( particles[i].x > window.innerWidth ) {
                    particles[i].vx = -1-Math.random();
                }
                else if ( particles[i].x < 0 ) {
                    particles[i].vx = 1+Math.random();
                }
                else {
                    particles[i].vx *= 1 + (Math.random()*0.005);
                }

                if( particles[i].y > window.innerHeight ) {
                    particles[i].vy = -1-Math.random();
                }
                else if ( particles[i].y < 0 ) {
                    particles[i].vy = 1+Math.random();
                }
                else {
                    particles[i].vy *= 1 + (Math.random()*0.005);
                }

                particles[i].history.push({ x: particles[i].x, y: particles[i].y });
                if( particles[i].history.length > 45 ) {
                    particles[i].history.shift();
                }

                var distanceFactor = DistanceBetween( mouse, particles[i] );
                distanceFactor = Math.max( Math.min( 15 - ( distanceFactor / 10 ), 9 ), 1 ); // from 1 to 9

                var newAlpha = distanceFactor / 10;
                var newColor = particles[i].color.replace(particles[i].color.slice(17,20), newAlpha);
                context.fillStyle = newColor;
                context.beginPath();
                context.arc(particles[i].x,particles[i].y,particles[i].size*distanceFactor,0,Math.PI*2,true);
                context.closePath();
                context.fill();

            }
        }

        function MouseMove(e) {
            mouse.x = e.layerX;
            mouse.y = e.layerY;

            //context.fillRect(e.layerX, e.layerY, 5, 5);
            //Draw( e.layerX, e.layerY );
        }

        function Draw( x, y ) {
            context.strokeStyle = '#ff0000';
            context.lineWidth = 4;
            context.lineTo(x, y);
            context.stroke();
        }

        function ResizeCanvas(e) {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        }

        function DistanceBetween(p1,p2) {
            var dx = p2.x-p1.x;
            var dy = p2.y-p1.y;
            return Math.sqrt(dx*dx + dy*dy);
        }
        </script>
    </body>
</html>