Skip to content

Latest commit

 

History

History
168 lines (124 loc) · 5.83 KB

physical-units.md

File metadata and controls

168 lines (124 loc) · 5.83 KB
Raw

📕 canvas-sketch → Documentation → Developing with Physical Units

Developing with Physical Units

A common challenge when working with code art is figuring out how best to scale it up to a real print, for example US Letter size (8.5 x 11 inches) or even larger formats (such as 3 ft x 3 ft).

Let's say we want a generative design for a business card, which is typically 3.5 x 2 inches. We can setup our artwork like so:

const settings = {
  // Measurements of artwork
  dimensions: [ 3.5, 2 ],
  // Use a higher density for print resolution
  // (this defaults to 72, which is good for web)
  pixelsPerInch: 300,
  // All our units are inches
  units: 'in'
}

Now, our canvas fill be scaled to fit the browser window, but the units in our renderer function are assumed to be in inches, including the width and height properties. This means we can, for example, specify a radius of 0.5 for a circle, and it will result in a circle with an exactly 0.5 inch radius when exported and printed at 300 PPI.

Using the above settings, we can create a simple artwork with circles like so:

...

const sketch = () => {
  // Utility to draw a circle
  const circle = (context, x, y, radius, fill) => {
    context.beginPath();
    context.arc(x, y, radius, 0, Math.PI * 2, false);
    if (fill) context.fill();
    context.stroke();
  };

  return ({ context, width, height }) => {
    // Here, the 'width' and 'height' are in inches
    // Fill the whole card with black
    context.fillStyle = '#000';
    context.fillRect(0, 0, width, height);

    // Now draw some circles with alternating radii
    // between 0.5 and 0.25 inches
    context.strokeStyle = '#fff';
    context.fillStyle = '#fff';
    context.lineWidth = 0.01;
    for (let i = 0; i < 5; i++) {
      const x = i / 4 * width;
      const y = height / 2;
      const radius = i % 2 === 0 ? 0.5 : 0.25;
      const fill = i % 4 === 0;
      circle(context, x, y, radius, fill);
    }
  };
};
...

When you save with Cmd + S or Ctrl + S, the output image will be 1050 x 600 px, which can be imported into a 3.5 x 2 inch document at 300 PPI resolution. You can see the exported artwork here:

Here is another business card example, using cos() and sin() to spiral many circles around the center.

See here for the full source code of this sketch.

Paper Size Presets

For convenience, canvas-sketch includes presets for a variety of common paper sizes such as "A4", "letter", "arch-2" etc. You can specify these as case-insensitive strings to the dimension object, like so:

const settings = {
  // For print output
  pixelsPerInch: 300,
  // Results in 21 x 29.7 cm
  dimensions: 'A4',
  // You can still work in your preferred units
  units: 'in'
};

All these preset dimensions are in portrait by default, but you can use the { orientation } setting to flip to landscape (i.e. more wide than tall). This setting also works with regular [ x, y ] dimensions, forcing the dimensions to produce one or the other paper orientation.

const settings = {
  dimensions: 'postcard',
  orientation: 'landscape' // also supports 'portrait'
};

For a full list of supported paper sizes, see the lib/paper-sizes.js definitions.

Bleeds & Safe Zones

In the earlier business card print, we saved the file at exactly 3.5 x 2 inches, but the file sent to the printer should really include a "safe zone" called a bleed to ensure the background trims nicely around the edges.

A simple way to do this is to add a { bleed } setting, which increases the width and height dimensions by 2.0 * bleed.

You can use trimWidth and trimHeight props to get back the original "trim size" of your paper, i.e. what you expect it to be once cut down by the printer.

In the final canvas-dot-flower.js example, we draw a "safe zone" to visualize what the business card looks like within our trim area.

Using the exporting prop, we can ignore rendering this yellow outline on PNG output.

const settings = {
  // Output resolution, we can use 300PPI for print
  pixelsPerInch: 300,
  // All our dimensions and rendering units will use inches
  units: 'in',
  // Standard business card size
  dimensions: [ 3.5, 2 ],
  // Include a bit of 'bleed' to the dimensions above
  bleed: 1 / 8
};

canvasSketch(() => {
  // Render the business card
  return props => {
    const {
      context, exporting, bleed,
      width, height,
      trimWidth, trimHeight
    } = props;

    // Fill entire page with solid color
    context.fillStyle = '#1d1d1d';
    context.fillRect(0, 0, width, height);

    // Visualize the trim area with a yellow guide (ignored on export)
    if (!exporting && bleed > 0) {
      context.strokeStyle = 'yellow';
      context.lineWidth = 0.0075;
      context.strokeRect(bleed, bleed, trimWidth, trimHeight);
    }

    // ... rest of sketch

Also in this sketch, we use the trimHeight so the maximum radius just reaches the edge of the card, and then pull it back by 1/4" to create some padding from the yellow line.

const maxRadius = (trimHeight / 2) - (1 / 4);

Running canvas-sketch in Node.js for Very Large Prints

You can also use Node.js to export high-resolution print artwork, see the Exporting Artwork guide for details.

Now that you're exporting high-resolution prints, you should read about Exporting Artwork to PNG, GIF, MP4 and Other Files.

← Back to Documentation