-
Notifications
You must be signed in to change notification settings - Fork 10
/
blending_mode_example.html
126 lines (116 loc) · 4.96 KB
/
blending_mode_example.html
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
<html>
<head>
<!-- Copyright Olli Etuaho 2013 -->
<title>glbrush.js blending modes 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="picture_update.js"></script>
<script type="text/javascript" src="undo_state.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);
}
drawingBlendMode = PictureEvent.Mode.normal;
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 = Math.random() * 255; //255 - oldPixel[0];
var green = Math.random() * 255; //33;
var blue = Math.random() * 255; //42;
currentEvent = picture.createBrushEvent([red, green, blue], 0.8, 1.0,
20, 0, 1,
drawingBlendMode);
};
drawArea.onmouseup = function(e) {
if (currentEvent !== null) {
picture.setCurrentEvent(null);
picture.pushEvent(0, currentEvent);
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);
currentEvent.pushCoordTriplet(coords.x, coords.y, pressure);
picture.setCurrentEvent(currentEvent);
picture.display();
}
};
var createSelection = function(values, selection, onchange) {
var sel = document.createElement('select');
for (var i=0; i < values.length; i++) {
var option = document.createElement('option');
option.text = values[i][0];
option.value = values[i][1];
sel.appendChild(option);
}
//sel.onchange = onchange;
sel.selectedIndex = selection;
sel.onchange = function(){onchange(this);};
document.body.appendChild(sel);
};
var blendModes = new Array();
for (var key in PictureEvent.Mode) {
if (PictureEvent.Mode.hasOwnProperty(key)) {
blendModes.push([key, PictureEvent.Mode[key]]);
}
}
createSelection(blendModes, drawingBlendMode, function(sel) {
var selectedOption = sel.options[sel.selectedIndex];
drawingBlendMode = parseInt(selectedOption.value);
});
// And there's a lot more public API in Picture to use...
}
</script>
</head>
<body onload="loadApp()" style="background:#888;">
</body>
</html>