forked from 1j01/jspaint
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathextra-tools.js
113 lines (107 loc) · 3.31 KB
/
extra-tools.js
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
extra_tools = [{
name: "Airbrushbrush",
description: "Draws randomly within a radius based on the selected Airbrush size, using a brush with the selected shape and size.",
cursor: ["precise-dotted", [16, 16], "crosshair"],
continuous: "time",
rendered_color: "",
rendered_size: 0,
rendered_shape: "",
paint: function(ctx, x, y){
// XXX: copy pasted all this brush caching/rendering code!
// TODO: DRY!
var csz = get_brush_canvas_size(brush_size, brush_shape);
if(
this.rendered_shape !== brush_shape ||
this.rendered_color !== stroke_color ||
this.rendered_size !== brush_size
){
brush_canvas.width = csz;
brush_canvas.height = csz;
// don't need to do brush_ctx.disable_image_smoothing() currently because images aren't drawn to the brush
brush_ctx.fillStyle = brush_ctx.strokeStyle = stroke_color;
render_brush(brush_ctx, brush_shape, brush_size);
this.rendered_color = stroke_color;
this.rendered_size = brush_size;
this.rendered_shape = brush_shape;
}
var draw_brush = function(x, y){
ctx.drawImage(brush_canvas, Math.ceil(x-csz/2), Math.ceil(y-csz/2));
};
var r = airbrush_size * 2;
for(var i = 0; i < 6 + r/5; i++){
var rx = (Math.random()*2-1) * r;
var ry = (Math.random()*2-1) * r;
var d = rx*rx + ry*ry;
if(d <= r * r){
draw_brush(x + ~~rx, y + ~~ry);
}
}
},
$options: $choose_brush
}, {
name: "Spirobrush",
description: "Spirals chaotically using a brush with the selected shape and size.",
cursor: ["precise-dotted", [16, 16], "crosshair"],
continuous: "time",
rendered_color: "",
rendered_size: 0,
rendered_shape: "",
position: {
x: 0,
y: 0,
},
velocity: {
x: 0,
y: 0,
},
pointerdown: function(ctx, x, y){
this.position.x = x;
this.position.y = y;
this.velocity.x = 0;
this.velocity.y = 0;
},
paint: function(ctx, x, y){
// XXX: copy pasted all this brush caching/rendering code!
// TODO: DRY!
var csz = get_brush_canvas_size(brush_size, brush_shape);
if(
this.rendered_shape !== brush_shape ||
this.rendered_color !== stroke_color ||
this.rendered_size !== brush_size
){
brush_canvas.width = csz;
brush_canvas.height = csz;
// don't need to do brush_ctx.disable_image_smoothing() currently because images aren't drawn to the brush
brush_ctx.fillStyle = brush_ctx.strokeStyle = stroke_color;
render_brush(brush_ctx, brush_shape, brush_size);
this.rendered_color = stroke_color;
this.rendered_size = brush_size;
this.rendered_shape = brush_shape;
}
var draw_brush = function(x, y){
ctx.drawImage(brush_canvas, Math.ceil(x-csz/2), Math.ceil(y-csz/2));
};
for(var i = 0; i < 60; i++){
var x_diff = x - this.position.x;
var y_diff = y - this.position.y;
var dist = Math.hypot(x_diff, y_diff);
var divisor = Math.max(1, dist);
var force_x = x_diff / divisor;
var force_y = y_diff / divisor;
this.velocity.x += force_x;
this.velocity.y += force_y;
this.position.x += this.velocity.x;
this.position.y += this.velocity.y;
draw_brush(this.position.x, this.position.y);
}
},
$options: $choose_brush
}, {
name: "Airbrush Options",
description: "Lets you configure the Airbrushbrush. It uses this type of tool option as well.",
cursor: ["airbrush", [7, 22], "crosshair"],
continuous: "time",
paint: function(ctx, x, y){
},
$options: $choose_airbrush_size
}];