-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsketch-02.js
63 lines (43 loc) · 1.35 KB
/
sketch-02.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
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 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 * Math.sin(angle)
y = cy + radius * Math.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/2,random.range(0,-h/2),w,h)
context.fill()
context.restore()
context.save()
context.translate(cx,cy)
context.rotate(-angle)
context.lineWidth = random.range(5, 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);