|
|
|
|
@ -1,14 +1,35 @@
@@ -1,14 +1,35 @@
|
|
|
|
|
function push_circle_at(circle_positions, cl, r, g, b, c, radius) { |
|
|
|
|
circle_positions.push(c.x - radius, c.y - radius, c.x - radius, c.y + radius, c.x + radius, c.y - radius); |
|
|
|
|
circle_positions.push(c.x + radius, c.y + radius, c.x + radius, c.y - radius, c.x - radius, c.y + radius); |
|
|
|
|
function push_point(s, x, y, u, v, r, g, b, type) { |
|
|
|
|
ser_f32(s, x); |
|
|
|
|
ser_f32(s, y); |
|
|
|
|
ser_f32(s, u); |
|
|
|
|
ser_f32(s, v); |
|
|
|
|
ser_u8(s, r); |
|
|
|
|
ser_u8(s, g); |
|
|
|
|
ser_u8(s, b); |
|
|
|
|
ser_u8(s, type); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
for (let i = 0; i < 6; ++i) { |
|
|
|
|
cl.push(r, g, b); |
|
|
|
|
} |
|
|
|
|
function push_circle(s, cx, cy, radius, r, g, b) { |
|
|
|
|
push_point(s, cx - radius, cy - radius, 0, 0, r, g, b, 1); |
|
|
|
|
push_point(s, cx - radius, cy + radius, 0, 1, r, g, b, 1); |
|
|
|
|
push_point(s, cx + radius, cy - radius, 1, 0, r, g, b, 1); |
|
|
|
|
|
|
|
|
|
push_point(s, cx + radius, cy + radius, 1, 1, r, g, b, 1); |
|
|
|
|
push_point(s, cx + radius, cy - radius, 1, 0, r, g, b, 1); |
|
|
|
|
push_point(s, cx - radius, cy + radius, 0, 1, r, g, b, 1); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function push_quad(s, p1x, p1y, p2x, p2y, p3x, p3y, p4x, p4y, r, g, b) { |
|
|
|
|
push_point(s, p1x, p1y, 0, 0, r, g, b, 0); |
|
|
|
|
push_point(s, p2x, p2y, 0, 1, r, g, b, 0); |
|
|
|
|
push_point(s, p3x, p3y, 1, 0, r, g, b, 0); |
|
|
|
|
|
|
|
|
|
push_point(s, p4x, p4y, 1, 1, r, g, b, 0); |
|
|
|
|
push_point(s, p3x, p3y, 1, 0, r, g, b, 0); |
|
|
|
|
push_point(s, p2x, p2y, 0, 1, r, g, b, 0); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function push_stroke(state, stroke, positions, colors, circle_positions, circle_colors) { |
|
|
|
|
const starting_length = positions.length; |
|
|
|
|
function push_stroke(s, stroke) { |
|
|
|
|
const stroke_width = stroke.width; |
|
|
|
|
const points = stroke.points; |
|
|
|
|
const color_u32 = stroke.color; |
|
|
|
|
@ -17,15 +38,14 @@ function push_stroke(state, stroke, positions, colors, circle_positions, circle_
@@ -17,15 +38,14 @@ function push_stroke(state, stroke, positions, colors, circle_positions, circle_
|
|
|
|
|
const g = (color_u32 >> 8) & 0xFF; |
|
|
|
|
const b = color_u32 & 0xFF; |
|
|
|
|
|
|
|
|
|
if (points.length < 2) { |
|
|
|
|
// TODO
|
|
|
|
|
stroke.popcount = 0; |
|
|
|
|
if (points.length === 0) { |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// Simple 12 point circle (store offsets and reuse)
|
|
|
|
|
const POINTS = 12; |
|
|
|
|
const phi_step = 2 * Math.PI / POINTS; |
|
|
|
|
if (points.length === 1) { |
|
|
|
|
push_circle(s, points[0].x, points[0].y, stroke_width / 2, r, g, b); |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
for (let i = 0; i < points.length - 1; ++i) { |
|
|
|
|
const px = points[i].x; |
|
|
|
|
@ -56,44 +76,16 @@ function push_stroke(state, stroke, positions, colors, circle_positions, circle_
@@ -56,44 +76,16 @@ function push_stroke(state, stroke, positions, colors, circle_positions, circle_
|
|
|
|
|
const s4x = nextpx - perp1x * stroke_width / 2; |
|
|
|
|
const s4y = nextpy - perp1y * stroke_width / 2; |
|
|
|
|
|
|
|
|
|
positions.push(s1x, s1y, s2x, s2y, s4x, s4y); |
|
|
|
|
positions.push(s1x, s1y, s4x, s4y, s3x, s3y); |
|
|
|
|
|
|
|
|
|
for (let j = 0; j < 6; ++j) { |
|
|
|
|
colors.push(r, g, b); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// Rotate circle offsets so that the diameter of the circle is
|
|
|
|
|
// perpendicular to the (dx, dy) vector. This way the circle won't
|
|
|
|
|
// "poke out" of the rectangle
|
|
|
|
|
const angle = Math.atan(Math.abs(s3x - s4x), Math.abs(s3y - s4y)); |
|
|
|
|
|
|
|
|
|
push_circle_at(circle_positions, circle_colors, r, g, b, points[i], stroke_width / 2); |
|
|
|
|
push_quad(s, s2x, s2y, s1x, s1y, s4x, s4y, s3x, s3y, r, g, b); |
|
|
|
|
push_circle(s, px, py, stroke_width / 2, r, g, b); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
push_circle_at(circle_positions, circle_colors, r, g, b, points[points.length - 1], stroke_width / 2); |
|
|
|
|
const lastp = points[points.length - 1]; |
|
|
|
|
|
|
|
|
|
stroke.popcount = positions.length - starting_length; |
|
|
|
|
push_circle(s, lastp.x, lastp.y, stroke_width / 2, r, g, b); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function pop_stroke(state, context) { |
|
|
|
|
console.error('undo') |
|
|
|
|
// if (state.strokes.length > 0) {
|
|
|
|
|
// // TODO: this will not work once we have multiple players
|
|
|
|
|
// // because there can be others strokes after mine
|
|
|
|
|
// console.error('TODO: multiplayer undo');
|
|
|
|
|
|
|
|
|
|
// const popped = state.strokes.pop();
|
|
|
|
|
|
|
|
|
|
// context.static_positions.length -= popped.popcount;
|
|
|
|
|
// context.static_colors.length -= popped.popcount / 2 * 3;
|
|
|
|
|
|
|
|
|
|
// context.static_positions_f32 = new Float32Array(context.static_positions);
|
|
|
|
|
// context.static_colors_u8 = new Uint8Array(context.static_colors);
|
|
|
|
|
// }
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function get_static_stroke(state) { |
|
|
|
|
function geometry_prepare_stroke(state) { |
|
|
|
|
if (!state.online) { |
|
|
|
|
return null; |
|
|
|
|
} |
|
|
|
|
@ -101,143 +93,66 @@ function get_static_stroke(state) {
@@ -101,143 +93,66 @@ function get_static_stroke(state) {
|
|
|
|
|
return { |
|
|
|
|
'color': state.players[state.me].color, |
|
|
|
|
'width': state.players[state.me].width, |
|
|
|
|
'points': process_stroke(state.current_strokes[state.me].points), |
|
|
|
|
'points': process_stroke(state, state.players[state.me].points), |
|
|
|
|
'user_id': state.me, |
|
|
|
|
}; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function add_static_stroke(state, context, stroke, relax = false) { |
|
|
|
|
function geometry_add_stroke(state, context, stroke) { |
|
|
|
|
if (!state.online || !stroke) return; |
|
|
|
|
|
|
|
|
|
push_stroke(state, stroke, context.static_positions, context.static_colors, context.static_circle_positions, context.static_circle_colors); |
|
|
|
|
const bytes_left = context.static_stroke_serializer.size - context.static_stroke_serializer.offset; |
|
|
|
|
const bytes_needed = (stroke.points.length * 12 + 6) * config.bytes_per_point; |
|
|
|
|
|
|
|
|
|
if (!relax) { |
|
|
|
|
// TODO: incremental
|
|
|
|
|
if (bytes_left < bytes_needed) { |
|
|
|
|
const old_view = context.static_stroke_serializer.strview; |
|
|
|
|
const old_offset = context.static_stroke_serializer.offset; |
|
|
|
|
|
|
|
|
|
context.static_positions_f32 = new Float32Array(context.static_positions); |
|
|
|
|
context.static_colors_u8 = new Uint8Array(context.static_colors); |
|
|
|
|
const new_size = Math.ceil((context.static_stroke_serializer.size + bytes_needed) * 1.62); |
|
|
|
|
|
|
|
|
|
context.static_circle_positions_f32 = new Float32Array(context.static_circle_positions); |
|
|
|
|
context.static_circle_colors_u8 = new Uint8Array(context.static_circle_colors); |
|
|
|
|
context.static_stroke_serializer = serializer_create(new_size); |
|
|
|
|
context.static_stroke_serializer.strview.set(old_view); |
|
|
|
|
context.static_stroke_serializer.offset = old_offset; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function recompute_static_data(context) { |
|
|
|
|
context.static_positions_f32 = new Float32Array(context.static_positions); |
|
|
|
|
context.static_colors_u8 = new Uint8Array(context.static_colors); |
|
|
|
|
|
|
|
|
|
context.static_circle_positions_f32 = new Float32Array(context.static_circle_positions); |
|
|
|
|
context.static_circle_colors_u8 = new Uint8Array(context.static_circle_colors); |
|
|
|
|
push_stroke(context.static_stroke_serializer, stroke); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function total_dynamic_positions(context) { |
|
|
|
|
let total_dynamic_length = 0; |
|
|
|
|
function recompute_dynamic_data(state, context) { |
|
|
|
|
let bytes_needed = 0; |
|
|
|
|
|
|
|
|
|
for (const player_id in context.dynamic_positions) { |
|
|
|
|
total_dynamic_length += context.dynamic_positions[player_id].length; |
|
|
|
|
for (const player_id in state.players) { |
|
|
|
|
const player = state.players[player_id]; |
|
|
|
|
if (player.points.length > 0) { |
|
|
|
|
bytes_needed += (player.points.length * 12 + 6) * config.bytes_per_point; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
return total_dynamic_length; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function total_dynamic_circle_positions(context) { |
|
|
|
|
let total_dynamic_length = 0; |
|
|
|
|
|
|
|
|
|
for (const player_id in context.dynamic_circle_positions) { |
|
|
|
|
total_dynamic_length += context.dynamic_circle_positions[player_id].length; |
|
|
|
|
if (bytes_needed > context.dynamic_stroke_serializer.size) { |
|
|
|
|
context.dynamic_stroke_serializer = serializer_create(Math.ceil(bytes_needed * 1.62)); |
|
|
|
|
} else { |
|
|
|
|
context.dynamic_stroke_serializer.offset = 0; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
return total_dynamic_length; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function recompute_dynamic_data(state, context) { |
|
|
|
|
const total_dynamic_length = total_dynamic_positions(context); |
|
|
|
|
const total_dynamic_circles_length = total_dynamic_circle_positions(context); |
|
|
|
|
|
|
|
|
|
context.dynamic_positions_f32 = new Float32Array(total_dynamic_length); |
|
|
|
|
context.dynamic_colors_u8 = new Uint8Array(total_dynamic_length / 2 * 3); |
|
|
|
|
|
|
|
|
|
context.dynamic_circle_positions_f32 = new Float32Array(total_dynamic_circles_length); |
|
|
|
|
context.dynamic_circle_colors_u8 = new Uint8Array(total_dynamic_circles_length / 2 * 3); |
|
|
|
|
|
|
|
|
|
let at = 0; |
|
|
|
|
let at_circle = 0; |
|
|
|
|
|
|
|
|
|
for (const player_id in context.dynamic_positions) { |
|
|
|
|
context.dynamic_positions_f32.set(context.dynamic_positions[player_id], at); |
|
|
|
|
context.dynamic_circle_positions_f32.set(context.dynamic_circle_positions[player_id], at_circle); |
|
|
|
|
|
|
|
|
|
const color_u32 = state.players[player_id].color; |
|
|
|
|
|
|
|
|
|
const r = (color_u32 >> 16) & 0xFF; |
|
|
|
|
const g = (color_u32 >> 8) & 0xFF; |
|
|
|
|
const b = color_u32 & 0xFF; |
|
|
|
|
|
|
|
|
|
for (let i = 0; i < context.dynamic_positions[player_id].length; ++i) { |
|
|
|
|
context.dynamic_colors_u8[at / 2 * 3 + i * 3 + 0] = r; |
|
|
|
|
context.dynamic_colors_u8[at / 2 * 3 + i * 3 + 1] = g; |
|
|
|
|
context.dynamic_colors_u8[at / 2 * 3 + i * 3 + 2] = b; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
for (let i = 0; i < context.dynamic_circle_positions[player_id].length; ++i) { |
|
|
|
|
context.dynamic_circle_colors_u8[at_circle / 2 * 3 + i * 3 + 0] = r; |
|
|
|
|
context.dynamic_circle_colors_u8[at_circle / 2 * 3 + i * 3 + 1] = g; |
|
|
|
|
context.dynamic_circle_colors_u8[at_circle / 2 * 3 + i * 3 + 2] = b; |
|
|
|
|
for (const player_id in state.players) { |
|
|
|
|
// player has the same data as their current stroke: points, color, width
|
|
|
|
|
const player = state.players[player_id]; |
|
|
|
|
if (player.points.length > 0) { |
|
|
|
|
push_stroke(context.dynamic_stroke_serializer, player); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
at += context.dynamic_positions[player_id].length; |
|
|
|
|
at_circle += context.dynamic_circle_positions[player_id].length; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function update_dynamic_stroke(state, context, player_id, point) { |
|
|
|
|
function geometry_add_point(state, context, player_id, point) { |
|
|
|
|
if (!state.online) return; |
|
|
|
|
|
|
|
|
|
if (!(player_id in state.current_strokes)) { |
|
|
|
|
state.current_strokes[player_id] = { |
|
|
|
|
'points': [], |
|
|
|
|
'width': state.players[player_id].width, |
|
|
|
|
'color': state.players[player_id].color, |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
context.dynamic_positions[player_id] = []; |
|
|
|
|
context.dynamic_colors[player_id] = []; |
|
|
|
|
|
|
|
|
|
context.dynamic_circle_positions[player_id] = []; |
|
|
|
|
context.dynamic_circle_colors[player_id] = []; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
state.current_strokes[player_id].color = state.players[player_id].color; |
|
|
|
|
state.current_strokes[player_id].width = state.players[player_id].width; |
|
|
|
|
|
|
|
|
|
// TODO: incremental
|
|
|
|
|
context.dynamic_positions[player_id].length = 0; |
|
|
|
|
context.dynamic_colors[player_id].length = 0; |
|
|
|
|
|
|
|
|
|
context.dynamic_circle_positions[player_id].length = 0; |
|
|
|
|
context.dynamic_circle_colors[player_id].length = 0; |
|
|
|
|
|
|
|
|
|
state.current_strokes[player_id].points.push(point); |
|
|
|
|
|
|
|
|
|
push_stroke(state, state.current_strokes[player_id], |
|
|
|
|
context.dynamic_positions[player_id], context.dynamic_colors[player_id], |
|
|
|
|
context.dynamic_circle_positions[player_id], context.dynamic_circle_colors[player_id] |
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
state.players[player_id].points.push(point); |
|
|
|
|
recompute_dynamic_data(state, context); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function clear_dynamic_stroke(state, context, player_id) { |
|
|
|
|
function geometry_clear_player(state, context, player_id) { |
|
|
|
|
if (!state.online) return; |
|
|
|
|
|
|
|
|
|
if (player_id in state.current_strokes) { |
|
|
|
|
state.current_strokes[player_id].points.length = 0; |
|
|
|
|
state.current_strokes[player_id].color = state.players[state.me].color; |
|
|
|
|
state.current_strokes[player_id].width = state.players[state.me].width; |
|
|
|
|
context.dynamic_positions[player_id].length = 0; |
|
|
|
|
context.dynamic_circle_positions[player_id].length = 0; |
|
|
|
|
recompute_dynamic_data(state, context); |
|
|
|
|
} |
|
|
|
|
state.players[player_id].points.length = 0; |
|
|
|
|
recompute_dynamic_data(state, context); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function add_image(context, image_id, bitmap, p) { |
|
|
|
|
|
A.Olokhtonov
2 years ago