Accueil Explorer Aide
Connexion
lu
/
lp
miroir de git://github.com/heyLu/lp
Suivre 1
Voter 0
Fork 0
Code Tickets 0 Commits 186 Publications 1 Wiki
Parcourir la Source

minimal jelly action.

(actually not even interactive, but rather a demonstration of how to use
`quadraticCurveTo`.)
Lucas Stadler 12 ans auparavant
Parent
e1822ce693
commit
49c9c9833e
1 fichiers modifiés avec 73 ajouts et 0 suppressions
Vue séparée Afficher les stats Diff
  1. 73 0
      js/jelly.html

+ 73 - 0
js/jelly.html
Voir le fichier 

@ -0,0 +1,73 @@
1 
<!doctype html>
2 
<html>
3 
<head>
4 
    <title>.jelly</title>
5 
    <meta charset="utf-8" />
6 
    <style>
7 
        body { margin: 0; padding: 0; }
8 
    </style>
9 
</head>
10
11 
<body>
12 
    <canvas id='stage'></canvas>
13 
    <p>Inspired by <a href="http://thefloorisjelly.tumblr.com/post/13477420108/what-technology-library-do-you-use-to-create-the-jelly">The Floor is Jelly</a>.</p>
14
15 
    <script>
16 
        var stage = document.querySelector('#stage');
17 
        var ctx = stage.getContext('2d');
18
19 
        var Rect = function(sx, sy, width, height) {
20 
            var inc = 25;
21
22 
            var upperLeft = {start: {x: sx, y: sy + inc},
23 
                             control: {x: sx, y: sy},
24 
                             end: {x: sx + inc, y: sy}};
25 
            var upperRight = {start: {x: sx + width - inc, y: sy},
26 
                              control: {x: sx + width, y: sy},
27 
                              end: {x: sx + width, y: sy + inc}};
28 
            var lowerRight = {start: {x: sx + width, y: sy + height - inc},
29 
                              control: {x: sx + width, y: sy + height},
30 
                              end: {x: sx + width - inc, y: sy + height}};
31 
            var lowerLeft = {start: {x: sx + inc, y: sy + height},
32 
                             control: {x: sx, y: sy + height},
33 
                             end: {x: sx, y: sy + height - inc}};
34
35 
            var segments = [upperLeft,
36 
                            {start: upperLeft.end, control: {x: sx + width / 2, y: sy}, end: upperRight.start},
37 
                            upperRight,
38 
                            {start: upperRight.end, control: {x: sx + width, y: sy + height / 2}, end: lowerRight.start},
39 
                            lowerRight,
40 
                            {start: lowerRight.end, control: {x: sx + width / 2, y: sy + height}, end: lowerLeft.start},
41 
                            lowerLeft,
42 
                            {start: lowerLeft.end, control: {x: sx, y: sy + height / 2}, end: upperLeft.start}];
43
44 
            var segments = [];
45
46 
            segments.push(upperLeft);
47 
            for (var i = sx + inc; i < sx + width - inc; i += inc) {
48 
                var prev = segments[segments.length - 1];
49 
                segments.push({start: prev.end,
50 
                               control: {x: i, y: sy + Math.random() * i/3},
51 
                               end: {x: i + inc, y: sy}});
52 
            }
53
54 
            segments.push(upperRight);
55
56 
            this.draw = function(ctx) {
57 
                ctx.beginPath();
58
59 
                for (var i = 0; i < segments.length; i++) {
60 
                    var segment = segments[i];
61 
                    ctx.moveTo(segment.start.x, segment.start.y);
62 
                    ctx.quadraticCurveTo(segment.control.x, segment.control.y, segment.end.x, segment.end.y);
63 
                }
64
65 
                ctx.stroke();
66 
            }
67 
        }
68
69 
        var r = new Rect(50, 50, 200, 100);
70 
        r.draw(ctx);
71 
    </script>
72 
</body>
73 
</html>