glbrush.js/example.html at master · Oletus/glbrush.js · 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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<html>
<head>
<!-- Copyright Olli Etuaho 2013 -->
<title>glbrush.js example application</title>
<script type="text/javascript" src="lib/hsl.js"></script>
<script type="text/javascript" src="util2d.js"></script>
<script type="text/javascript" src="util2d_painting.js"></script>
<script type="text/javascript" src="utilgl.js"></script>
<script type="text/javascript" src="blit_shader.js"></script>
<script type="text/javascript" src="rasterize_shader.js"></script>
<script type="text/javascript" src="gradient_shader.js"></script>
<script type="text/javascript" src="compositing_shader.js"></script>
<script type="text/javascript" src="brush_tip_mover.js"></script>
<script type="text/javascript" src="brush_textures.js"></script>
<script type="text/javascript" src="compositor.js"></script>
<script type="text/javascript" src="picture_event.js"></script>
<script type="text/javascript" src="rasterize.js"></script>
<script type="text/javascript" src="picture_buffer.js"></script>
<script type="text/javascript" src="undo_state.js"></script>
<script type="text/javascript" src="picture_update.js"></script>
<script type="text/javascript" src="picture.js"></script>
<script type="text/javascript" src="picture_renderer.js"></script>
<script type="text/javascript">
/**
 * Utility function to get event coordinates relative to an element.
 */
function getRelativeCoords(event, element) {
    var rect = element.getBoundingClientRect();
    // + 0.5 to move to pixel center
    if (event.touches !== undefined && event.touches.length > 0) {
        return new Vec2(event.touches[0].clientX - rect.left + 0.5,
                        event.touches[0].clientY - rect.top + 0.5);
    }
    return new Vec2(event.clientX - rect.left + 0.5,
                    event.clientY - rect.top + 0.5);
}

loadApp = function() {
    // Create a container element for the picture
    var drawArea = document.createElement('div');
    var width = 800;
    var height = 600;
    drawArea.style.width = width + 'px';
    drawArea.style.height = height + 'px';
    document.body.appendChild(drawArea);

    // Initialize a Picture with one opaque layer and add it to the drawArea
    var picture = new Picture(0, null, new Rect(0, width, 0, height), 1.0,
                              PictureRenderer.create(['webgl', 'no-float-webgl', 'canvas']));
    picture.addBuffer(0, [255, 255, 255, 255], false);
    picture.setCurrentEventAttachment(0);
    drawArea.appendChild(picture.pictureElement());
    picture.display();

    // Add mouse event listeners to the container element that create brush
    // events on the draw area
    var currentEvent = null;
    var pressureInd = 0;
    drawArea.onmousedown = function(e) {
        var coords = getRelativeCoords(e, drawArea);
        var oldPixel = picture.getPixelRGBA(coords);
        // some funky color changes
        var red = 255 - oldPixel[0];
        var green = 33;
        var blue = 42;
        currentEvent = picture.createBrushEvent([red, green, blue], 0.8, 1.0,
                                                20, 0, 1,
                                                PictureEvent.Mode.normal);
    };
    drawArea.onmouseup = function(e) {
        if (currentEvent !== null) {
            picture.setCurrentEvent(null);
            var update = new PictureUpdate('add_picture_event');
            update.setPictureEvent(0, currentEvent);
            picture.pushUpdate(update);
            picture.display();
            currentEvent = null;
        }
    };
    drawArea.onmouseout = drawArea.onmouseup;
    drawArea.onmousemove = function(e) {
        if (currentEvent !== null) {
            ++pressureInd;
            var pressure = (Math.sin(pressureInd * 0.4) + 2.0) * 0.33;
            var coords = getRelativeCoords(e, drawArea);
            picture.pictureTransform.inverseTransform(coords);
            currentEvent.pushCoordTriplet(coords.x, coords.y, pressure);
            picture.setCurrentEvent(currentEvent);
            picture.display();
        }
    };

    var createButton = function(value, onclick) {
        var btn = document.createElement('input');
        btn.type = 'button';
        btn.value = value;
        document.body.appendChild(btn);
        btn.onclick = onclick;
    };

    // Add undo to the mix just for kicks
    createButton('Undo', function() {
        var undone = picture.undoLatest();
        if (undone) {
            var update = new PictureUpdate('undo');
            update.setUndoEvent(undone.sid, undone.sessionEventId);
            picture.pushUpdate(update, false);
        }
        picture.display();
    });

    // And animation!
    createButton('Animate', function() {
        picture.animate(0.15);
    });

    // Whee, resize
    var resize = function(scale) {
        if (!picture.animating) {
            picture.crop(picture.boundsRect, scale);
            drawArea.style.width = picture.bitmapWidth();
            drawArea.style.height = picture.bitmapHeight();
            picture.display();
        }
    };
    createButton('0.5x', function() {
        resize(0.5);
    });
    createButton('1.0x', function() {
        resize(1.0);
    });
    if (picture.maxBitmapScale() > 1.5) {
        createButton('1.5x', function() {
            resize(1.5);
        });
    }

    // And there's a lot more public API in Picture to use...
}
</script>
</head>
<body onload="loadApp()" style="background:#888;">
</body>
</html>