../ geometry

arcs, circles, grid, polar coordinates, points, lines, rectangles, spheres

arcs

  • Drawing an arc with the canvas
    Arc drawing, radial gradients, stacked canvases, auto-sized canvas, ping-pong and range generators
  • SVG arc
    Generators, degrees-to-radians, updating SVG, auto-sized element
  • Moving along an arc
    Relative point calculation, DOM element translate, ping-pong generator, degrees-to-radians

circles

  • Drawing a circle with the canvas
    Circle drawing, radial gradients, shape drawing function, auto-sized canvas, ping-pong generator
  • SVG circle: Animate an SVG circle
    SVG, pointer event
  • SVG circle path: Animate text on a circular path
    SVG
  • Math: Nearest point on circle perimeter
    Circle functions
  • Sunflower: Calculate points using a Vogel spiral, making a sunflower pattern.
    Generators
  • Ring: Distribute elements around a circle
    Polar coordinates

grid

  • DOM: Generate DIVs based on grid cells
    Grids, DOM manipulation
  • Canvas: Draw elements based on grid cells, modulator-per-cell
    Grids, canvas
  • Data: Associate data with grid cells
    Grids, canvas

polar coordinates

  • Spiral: Draws a spiral based on polar coordinates and generators
    Generators, canvas paths, ping-pong
  • Orbit: Move an element in a circular orbit with polar coordinates
    Polar, animation

points

  • Drawing: Drawing and animating points
    Canvas, points, repeat
  • Particle: Drawing and animating particles
    Canvas, animating points, repeat, jitter
  • Interpolate: Reach a target point over time
    Interpolation, pointer events, relative coordinates
  • Math: Calculate relative coordinates, and compute distance and angle between two points
    Pointer events, Points.distance, Points.angle
  • Angle Avg: Calculates average angle in a stream of points
    Number and point tracker
  • Centroid and Hull: Centroid of two or more points, as well as enclosing shape
    Points.centroid, Points.convexHull, Pointer events, relative coordinates
  • Relation: Track angle, distance, centroid between two points
    Points.relation, Pointer events, relative coordinates
  • Dot product: Calculate similarity between vectors
    Points.dotProduct

lines

  • Math
    Calculating distance, nearest point and interpolation
  • Rotation
    Canvas, relative coordinates
  • SVG
    Lines, SVG, pointer events

rectangles

  • Drawing
    Creating rectangles, compute corners & lines of a rectangle

spheres

  • Fibonacci: Generate points on a sphere
    Canvas, Spheres