Hi! I have a problem with my sketch. The drawing does not display. Console shows ReferenceError: Maths is not defined.
Console:
sketch-02.js? [sm]:38 Uncaught (in promise) ReferenceError: Maths is not defined
at SketchManager._sketch (sketch-02.js? [sm]:38:1)
at SketchManager.submitDrawCall (SketchManager.js:508:25)
at SketchManager.render (SketchManager.js:495:19)
at SketchManager.run (SketchManager.js:129:10)
at SketchManager.js:879:12
Code VSC:
const canvasSketch = require(‘canvas-sketch’);
const math = require (‘canvas-sketch-util/math’);
const random = require (‘canvas-sketch-util/random’);
const settings = {
dimensions: [ 1080, 1080 ]
};
//const degToRad = (degrees) => {
//return degrees / 180 * Maths.PI;
//};
//const randomRange = (min, max) => {
// return Math.random() * (max - min) + min;
//};
const sketch = () => {
return ({ context, width, height }) => {
context.fillStyle = ‘white’;
context.fillRect(0, 0, width, height);
context.fillStyle = 'black';
const cx = width * 0.5;
const cy = height * 0.5;
const w = width * 0.01;
const h = height * 0.1;
let x, y;
const num = 40;
const radius = width * 0.3;
for (let i = 0; i < num; i++) {
const slice = math.degToRad(360 / num);
const angle = slice * i;
x = cx + radius * Maths.sin(angle);
y = cy + radius * Maths.cos(angle);
context.save();
context.translate(x, y);
context.rotate(-angle);
context.scale(random.range(0.1, 2), random.range(0.2, 0.5));
context.beginPath();
context.rect(-w * 0.5, random.range(0, -h * 0.5), w, h);
context.fill();
context.restore();
context.save();
context.translate(cx, cy);
context.rotate(-angle);
context.lineWith = 20;
context.beginPath();
context.arc(0, 0, radius * random.range(0.7, 1.3), slice * random.range(1, -8), slice * random.range(1, 5));
context.stroke();
context.restore();
}
};
};
canvasSketch(sketch, settings);
Thanks.
Lisa