I just realized we can do this in a hacky way with #913 😂 . Not too hard but easy to make a dedicate graphic for this:

# get uniform x, y positions
X, Y = np.meshgrid(np.arange(0, 2 * np.pi, .2), np.arange(0, 2 * np.pi, .2))

# positions of each vector as [n_points, 2] array
data = np.column_stack([X.ravel(), Y.ravel()])

# vectors, u and v are x and y components
U = np.cos(X)
V = np.sin(Y)

# angle of each vector
rotations = np.atan2(U, V)
# ravel so it maps `data` index -> rotation
rotations = rotations.ravel()

# sizes is magnitude
# ravel so it maps `data` index -> size
sizes = np.linalg.norm(np.dstack([U, V]), axis=-1).ravel() * 10

fig = fpl.Figure(size=(700, 600))

fig[0, 0].add_scatter(
    data, 
    point_rotation_mode="vertex",
    point_rotations=rotations, 
    sizes=sizes,
    markers="custom",
    uniform_marker=True,
    custom_sdf=vector_sdf,
    
)

fig.show()

using this sdf, I think we can make a a few nicer looking arrows:

var p = coord / size;

let shaft_width = 0.1;      // Width of the arrow shaft
let shaft_length = 0.6;     // Length of the shaft
let head_width = 0.3;       // Width of the arrowhead base
let head_length = 0.4;      // Length of the arrowhead

p.x = p.x + 0.5;

let shaft_d = vec2<f32>(
    abs(p.x) - shaft_length,
    abs(p.y) - shaft_width
);
let dist_shaft = length(max(shaft_d, vec2<f32>(0.0))) 
                 + min(max(shaft_d.x, shaft_d.y), 0.0);

let head_base_x = shaft_length;
let head_tip_x = shaft_length + head_length;
let head_center_x = (head_base_x + head_tip_x) / 2.0;

let hx = p.x - head_center_x;
let hy = p.y;

let h = head_length / 2.0;
let w = head_width / 2.0;

let d1 = (hx * w + abs(hy) * h - w * h) / sqrt(w * w + h * h);

let d2 = hx + h;

let dist_head = max(d1, -d2);

let final_dist = min(dist_shaft, dist_head);

return final_dist * size;

Optical flow #908

Description

Metadata

Metadata

Assignees

Labels

Type

Fields

Projects

Milestone

Relationships

Development

Issue actions