-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsketch-04.js
96 lines (75 loc) · 2.43 KB
/
sketch-04.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
84
85
86
87
88
89
90
91
92
93
94
95
96
const canvasSketch = require('canvas-sketch');
const random = require('canvas-sketch-util/random')
const math = require('canvas-sketch-util/math')
const Tweakpane = require('tweakpane')
const settings = {
dimensions: [ 1080, 1080 ],
animate: true
};
const params = {
cols: 10,
rows: 10,
scaleMin: 1,
scaleMax: 30,
freq: 0.001,
amp: 0.2,
animate: true,
frame: 0,
lineCap: 'butt'
}
const sketch = () => {
return ({ context, width, height, frame }) => {
context.fillStyle = 'white';
context.fillRect(0, 0, width, height);
const cols = params.cols
const rows = params.rows
const numCells = cols*rows
const gridw = width * 0.8
const gridh = height * 0.8
const cellw = gridw / cols
const cellh = gridh / rows
const margx = (width - gridw) * 0.5
const margy = (height - gridh) * 0.5
for(let i = 0; i < numCells; i++){
const col = i % cols
const row = Math.floor(i / cols)
const x = col * cellw
const y = row * cellh
const w = cellw * 0.8
const h = cellh * 0.8
const f = params.animate ? frame : params.frame
const n = random.noise3D(x,y, f*10, params.freq)
const angle = n*Math.PI*params.amp
const scale = math.mapRange(n, -1, 1, params.scaleMin, params.scaleMax)
context.save()
context.translate(margx, margy)
context.translate(x,y)
context.translate(cellw*0.5, cellh*0.5)
context.rotate(angle)
context.lineWidth = scale
context.lineCap = params.lineCap
context.beginPath()
context.moveTo(w*-0.5,0)
context.lineTo(w*0.5,0)
context.stroke()
context.restore()
}
};
};
const createPane = () => {
const pane = new Tweakpane.Pane()
let folder
folder = pane.addFolder({title: 'Grid'})
folder.addInput(params, 'lineCap', {options: {butt: 'butt', round: 'round', square: 'square'}})
folder.addInput(params, 'cols', {min:2, max:50, step:1})
folder.addInput(params, 'rows', {min:2, max:50, step:1})
folder.addInput(params, 'scaleMin', {min:1, max:100 })
folder.addInput(params, 'scaleMax', {min:1, max:100 })
folder = pane.addFolder({title: 'Noise'})
folder.addInput(params, 'freq', {min:-0.01, max:0.01})
folder.addInput(params, 'amp', {min:0, max:1})
folder.addInput(params, 'animate')
folder.addInput(params, 'frame', {min:0, max:999})
}
createPane()
canvasSketch(sketch, settings);