basics

This module is present in every image generator. The methods defined by this module include:

this.addFrame();

is called from within the initialize method of an image generator, and takes its parameters from the image generation object (the this of initialize). The image generator may set the frame parameters frameStroke, frameFill, and framePadding. Then the method addFrame() will generate a rectangular frame around the image as determined by these parameters. Here is their meaning:

frameStroke and frameFill are the stroke and fill respectively of the frame. The default value for frameFill is "transparent", and for frameStroke, "rgb(2,2,2)" These defaults produce a frame which is undetectable by the human eye against a black background. However, it is detectable by software which automatically adjusts image scaling for fit in the process of display or printing. Hence the frame facility can be used to control this scaling. I use it in this way for printing at mpix.com.

framePadding determines the amount of excess width and height of the frame relative to the image. This utilizes the width and height parameters of the image, so they must be defined for this to work.

The following more general routine

this.addRectangle({width:number,height:number,stroke_width:number,position:Point=Point(0,0),stroke:color='white',fill:color='Transparent':});

is also available. Any parameters that are missing from the argument are taken from this.

Here are the relevant lines of code from the grid example

import {rs as basicsP} from '/generators/basics.mjs'; // /generators/basics.mjs imports in turn from /mlib/basics.mjs

let rs = basicsP.instantiate();

let nr = 64;
let wd = 200;
let topParams = {numRows:nr,numCols:nr,width:wd,height:wd,pointJiggle:4,framePadding:0.15*wd,frameStroke:'white'};
Object.assign(rs,topParams);

....

rs.initialize = function () {
  this.setupRandomGridForBoundaries('v',{step:30,min:100,max:250}); 
  this.initProtos();
  this.addFrame();
  this.initializeGrid();
}

The method

setBackgroundColor(clr:color)

where clr is a string like 'pink' or 'rgb(100,50,200)' sets the overall background color of the image, however it is zoomed in or out. The default background color is 'black'.