-
Notifications
You must be signed in to change notification settings - Fork 8
/
browser.js
83 lines (74 loc) · 2.88 KB
/
browser.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
'use strict'
const ow = require('ow')
const context = require('./lib/browser-context')
const primitive = require('./lib/primitive')
/**
* Reproduces the given input image using geometric primitives.
*
* Optionally draws the results to an HTML canvas.
*
* Returns a Promise for the generated model.
*
* @name primitive
* @function
*
* @param {Object} opts - Configuration options
* @param {string|Image|ImageData} opts.input - URL, Image, or ImageData of input image to process
* @param {string|HTMLCanvasElement} [opts.output] - Selector or DOM Element of HTMLCanvas to draw results
* @param {number} [opts.numSteps=200] - Number of steps to process [1, 1000]
* @param {number} [opts.minEnergy] - Minimum energy to stop processing early [0, 1]
* @param {number} [opts.shapeAlpha=128] - Alpha opacity of shapes [0, 255]
* @param {string} [opts.shapeType=traingle] - Type of shapes to use
* @param {number} [opts.numCandidates=1] - Number of top-level candidates per step [1, 32]
* @param {number} [opts.numCandidateShapes=50] - Number of random candidate shapes per step [10, 1000]
* @param {number} [opts.numCandidateMutations=100] - Number of candidate mutations per step [10, 500]
* @param {number} [opts.numCandidateExtras=0] - Number of extra candidate shapes per step [0, 16]
* @param {function} [opts.onStep] - Optional async function taking in the model and step index
* @param {function} [opts.log=noop] - Optional logging function (console.log to enable logging)
*
* @return {Promise}
*/
module.exports = async (opts) => {
const {
input,
output,
onStep,
...rest
} = opts
ow(opts, ow.object.label('opts'))
ow(input, ow.any(
ow.string.nonEmpty,
ow.object.instanceOf(global.ImageData),
ow.object.instanceOf(global.Image)
).label('input'))
const target = await context.loadImage(input)
const { canvas } = context.loadCanvas(output, 'output')
const ctx = output.getContext('2d')
const scratch = canvas && document.createElement('canvas')
if (ctx) context.enableContextAntialiasing(ctx)
const model = await primitive({
...rest,
context,
target,
onStep: async (model, step) => {
if (onStep) await onStep(model, step)
if (ctx) {
const { width, height } = model.current
if (canvas.width === width && canvas.height === height) {
// output canvas is the same size as current working buffer,
// so just copy data over (efficient)
ctx.putImageData(model.current)
} else {
// output canvas is different size than current working buffer,
// so resize into temp canvas before drawing (less efficient)
scratch.width = width
scratch.height = height
const ctx2 = scratch.getContext('2d')
ctx2.putImageData(model.current)
ctx.drawImage(scratch, 0, 0, canvas.width, canvas.height)
}
}
}
})
return model
}