Create

Function

@plot, @Plot

One point of a shape per cell, or per @m step. @plot gives percentages of the element for @place, and @Plot gives raw numbers for @svg.

Syntax

  • @plot(<shape commands>)
  • @plot(<preset>[; <shape commands>])
  • @plot.scatter(…), @plot.hex(…), @plot.grid(…), @plot.penrose(…)
  • @Plot(…), @Plot.scatter(…), @Plot.hex(…), @Plot.grid(…), @Plot.penrose(…)

The body is the same as in @shape: a preset name from the @shape property, commands such as r, rotate and scale, or both. text and path give the outline of letters or of SVG path data. The extra commands are listed in the table below.

Along the outline

Each cell takes the next point. With r alone the points start on the right and go counterclockwise, and r: 1 reaches the edge of the element: 

@grid: 24x1 / 60vmin;
@size: 8%;
border-radius: 50%;
background: #000;
@place: @plot(r: .8);
Open in playground

A preset, scaled down so the cells on its edge stay inside:

@grid: 40x1 / 60vmin;
@size: 4%;
border-radius: 50%;
background: #e6437d;
@place: @plot(heart; scale: .9);
Open in playground

@R.t reads one loop of noise for all the cells, so r: @R.t(.5, .9) lines them up along one wobbly outline.

Turning the cells

@place also turns each cell. By default its x axis points away from the center; dir: reverse points it inward, and dir: auto 90deg along the circle: 

@grid: 12x1 / 60vmin;
@size: 15% 20%;
background: #000;
clip-path: polygon(0 0, 100% 50%, 0 100%);
@place: @plot(
  r: .8;
  dir: auto 90deg
);
Open in playground

Filling the shape

The variants put the points inside the shape instead of on its outline. .scatter spreads them at random, following the doodle's seed: 

@grid: 120x1 / 60vmin;
@size: 4%;
border-radius: 50%;
background: #e6437d;
@place: @plot.scatter(heart; scale: .9);
Open in playground

.hex, .grid and .penrose set them on the tiling of that @tile kind. Cells past the last point are hidden: 

@grid: 120x1 / 60vmin;
@size: 5%;
border-radius: 50%;
background: #e6437d;
@place: @plot.hex(heart; scale: .9);
Open in playground

The shape can be a letter, here traced in a heavy sans-serif:

@grid: 240x1 / 60vmin;
@size: 4%;
border-radius: 50%;
background: #e6437d;
@place: @plot.hex(
  text: B;
  font: 900 sans-serif;
  scale: .9;
);
Open in playground

In one cell

Inside @m each step takes the next point, so one cell can hold the whole shape:

@grid: 1 / 60vmin;
background: @m50(
  radial-gradient(#000 50%, #0000 0)
  @plot(r: .8) / 5px 5px
  no-repeat
);
Open in playground

In SVG

@Plot gives numbers in the -1 to 1 space, with y pointing down as in SVG. Each copy of an element takes the next point: 

@grid: 1 / 60vmin;
background: @svg(
  viewBox: -1 -1 2 2;
  circle*60 {
    cx, cy: @Plot(r: .7 + .2cos(5t));
    r: .04;
  }
);
Open in playground

With points they come as one list, which a polyline draws as a line:

@grid: 1 / 60vmin;
background: @svg(
  viewBox: -1 -1 2 2;
  polyline {
    points: @Plot(points: 360; r: t / 20; turn: 3);
    fill: none;
    stroke: #000;
    stroke-width: .02;
  }
);
Open in playground

Reference

Variants

VariantPoints
nonealong the outline; over several contours, shared out by length
.scatterat random inside the shape, ordered from the top row down, at most 8192
.hex, .gridthe centers of the @tile pieces that sit inside the shape, clear of its outline
.penrosethe centers of Penrose rhombs, five-fold about the middle and unevenly spaced; best with a few hundred cells

Without a shape the variants fill a circle. @plot reads only the points of the outline, so fill-rule, frame, round and grow do nothing there; the variants read fill-rule and grow.

Commands

CommandValue
pointsreturns that many points as one comma-separated list instead of one per cell; the lattice variants give as many as fit, up to that number. After a preset, only the variants read it. In @shape it counts corners, so leave it out of a body copied from there.
dirhow @place turns the cell: auto away from the center, reverse toward it, auto 90deg with an angle added. A constant angle is offset by 90°, so dir: 0 turns every cell 90deg. Default auto; the variants don't turn cells unless it is given. direction is another name for it.
unitthe unit of the values, also set by a unit on r such as r: 10px. Any unit but % gives raw numbers centered at 0 0.
seedthe seed of .scatter, jitter and @R.t, the doodle's by default
aspectthe variants: the element's width over its height, as in @tile
density, relax.scatter only, as in @tile.voronoi. density: 1 - y puts more points near the bottom.
jitter, shift, op, starthe lattice variants only: move the points as they move the @tile pieces, so @plot.hex(op: d) gives the corners of a honeycomb

See also