Assembly and Instances

A technique for assembling images from parts will be introduced via annotated code, which generates the image

Here's the code:

import {rs as linePP} from '/line/line.mjs';
import {rs as basicP} from '/generators/basics.mjs';
import {rs as fromCenterP} from '/generators/lines_from_center.mjs';	
import {rs as cobwebP} from '/generators/lines_cobweb.mjs';	

let rs = basicP.instantiate();

rs.setName('lines_1');
let wd = 600;
let topParams = {width:wd,height:wd,framePadding:0.1*wd};
Object.assign(rs,topParams);

rs.initialize = function () {
  let {width} = this;
  let mv = 0.25*width;
  this.addFrame();
  let quad00 = this.set('quad00',fromCenterP.instantiate().show());
  let quad10 = this.set('quad10',fromCenterP.instantiate().show());
  let quad01= this.set('quad01',cobwebP.instantiate().show());
  let quad11 = this.set('quad11',cobwebP.instantiate().show());
  quad00.width = quad00.height = 0.5*wd;
  quad00.initialize();
  quad00.moveto(Point.mk(-mv,-mv));
  quad10.width = quad10.height = 0.5*wd;
  quad10.lineColor = 'black';
  quad10.backgroundColor = 'white';
  quad10.initialize();
  quad10.moveto(Point.mk(mv,-mv));
  quad01.width = quad01.height = 0.5*wd;
  quad01.initialize();
  quad01.moveto(Point.mk(-mv,mv));
  quad11.width = quad11.height = 0.5*wd;
  quad11.lineColor = 'black';
  quad11.backgroundColor = 'white';
  quad11.initialize();
  quad11.moveto(Point.mk(mv,mv));

}

export {rs};

Here the lines

import {rs as fromCenterP} from '/generators/lines_from_center.mjs';	
import {rs as cobwebP} from '/generators/lines_cobweb.mjs';	

import two image generators. These generators are instantiated and added to the shape tree via the lines:

let quad00 = this.set('quad00',fromCenterP.instantiate().show());
let quad10 = this.set('quad10',fromCenterP.instantiate().show());
let quad01= this.set('quad01',cobwebP.instantiate().show());
let quad11 = this.set('quad11',cobwebP.instantiate().show());

Next the quad's width, height, lineColor and backgroundColor parameters are set. Finally they are initialized and moved into place. This illustrates the assembly of an image from already defined parts.

The same technique can be used to create an instance of an existing generator with modified parameters. For example, the following code

import {rs as linePP} from '/line/line.mjs';
import {rs as generatorP} from '/generators/drop_ice.mjs';

let rs = generatorP.instantiate();

rs.setName('drop_blue_ice');
let ht  = 200;
let topParams = {width:1.5*ht,height:ht,framePadding:.17*ht}

Object.assign(rs,topParams);

rs.initProtos = function () {
	this.lineP = linePP.instantiate();
	this.lineP.stroke = 'blue';
	this.lineP['stroke-width'] = .3;
}  

export {rs};

will produce the following variant (blue and wide) of the image generated by the code in the drop example:

It is conventional to place code which generates an instance in the www/instances directory rather than in www/generators.