-
Notifications
You must be signed in to change notification settings - Fork 0
/
app.js
191 lines (159 loc) · 4.91 KB
/
app.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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
// set up all the global variables
const toolboxWidth = document.querySelector('section.toolbox').offsetWidth
let canvas = null
let bgColor = '#fbf8f3'
let selectedTool = 'pen'
let brushSelector = null
let brushSize = 1
let paintColor = '#000000'
let ifRainbowColor = false
let opacity = 220
function setup() {
setupToolbox()
// set up the canvas
canvas = createCanvas(windowWidth - toolboxWidth, windowHeight)
canvas.parent(select('section.canvas'))
background(bgColor)
}
function setupToolbox() {
// set up paint style tools in the Styles category
const paintStyles = select('section.toolbox div.styles-tools')
setupBrushSelector(paintStyles)
setupPaintColorPicker(paintStyles)
setupRainbowColorButton(paintStyles)
setupOpacitySlider(paintStyles)
setupBrushSizeSlider(paintStyles)
// set up canvas tools in the Canvas category
const canvasTools = select('section.toolbox div.canvas-tools')
setupSaveButton(canvasTools)
setupResetButton(canvasTools)
// set up background style tools Background category
const backgroundStyles = select('section.toolbox div.background-tools')
setupBgColorPicker(backgroundStyles)
}
function setupBrushSelector(parentTag) {
// create the brush selector as a <select> tag
brushSelector = createSelect()
// make a label for the menu
makeLabel(brushSelector, parentTag, 'Paintbrush style')
// make an array of all the paintbrush function names
const brushes = [
'pen',
'marker',
'beads',
'wiggle',
'toothpick',
'fountainPen',
'splatter',
'sprayPaint',
]
// add in all of the paintbrush function names as menu options
brushes.forEach(function (brush) {
brushSelector.option(brush)
})
// set initial value of the currently selected paintbrush
selectedTool = brushSelector.value()
// update the selected paintbrush if the user picks a different menu option
brushSelector.changed(function () {
selectedTool = brushSelector.value()
})
}
function makeLabel(tag, parentTag, text) {
const label = createElement('label', text)
label.parent(parentTag)
tag.parent(label)
}
function setupButton(text, parentTag, onClick) {
const button = createButton(text)
button.parent(parentTag)
button.mousePressed(onClick)
return button
}
function saveFile() {
saveCanvas('painting', 'png')
}
function setupSaveButton(parentTag) {
setupButton('Save', parentTag, saveFile)
}
function resetCanvas() {
// resize canvas to fill the painting area
resizeCanvas(windowWidth - toolboxWidth, windowHeight)
// fill canvas with background color
background(bgColor)
}
function setupResetButton(parentTag) {
setupButton('Reset', parentTag, resetCanvas)
}
function setupColorPicker(initialColor, parentTag, text, onChange) {
const colorPicker = createColorPicker(initialColor)
makeLabel(colorPicker, parentTag, text)
colorPicker.changed(onChange)
return colorPicker
}
function setupBgColorPicker(parentTag) {
const bgColorPicker = setupColorPicker(bgColor, parentTag, 'Background color', function () {
bgColor = bgColorPicker.color()
resetCanvas()
})
}
function setupPaintColorPicker(parentTag) {
const paintColorPicker = setupColorPicker(paintColor, parentTag, 'Paint color', function () {
paintColor = paintColorPicker.color()
ifRainbowColor = false
})
paintColor = paintColorPicker.color()
}
function setPaintColor() {
// set color to either rainbow or normal paint color
let newColor
if (ifRainbowColor) {
const hue = (frameCount * 2) % 360
newColor = color(`hsba(${hue}, 100%, 100%, 0.6)`)
} else {
newColor = paintColor
}
// set the color and opacity of the stroke and fill
newColor.setAlpha(opacity)
stroke(newColor)
fill(newColor)
}
function setupRainbowColorButton(parentTag) {
setupButton('Rainbow color 🌈', parentTag, function () {
ifRainbowColor = !ifRainbowColor
})
}
// helper function that sets up a slider
function setupSlider(min, max, initialValue, step, text, parentTag, onInput) {
const slider = createSlider(min, max, initialValue, step)
makeLabel(slider, parentTag, text)
slider.input(onInput)
return slider
}
function setupOpacitySlider(parentTag) {
const opacitySlider = setupSlider(0, 255, opacity, 1, 'Opacity', parentTag, function () {
opacity = opacitySlider.value()
})
}
function setupBrushSizeSlider(parentTag) {
const brushSizeSlider = setupSlider(1, 16, brushSize, 0.1, 'Brush size', parentTag, () => {
brushSize = brushSizeSlider.value()
})
}
function draw() {
// check if mouse button is pressed and mouse is hovering over canvas section
if (mouseIsPressed && mouseX <= windowWidth - toolboxWidth) {
// set the paint color
setPaintColor()
// draw on the canvas with the selected painting tool function
window[selectedTool]()
}
}
function keyPressed() {
if (keyCode === BACKSPACE) {
resetCanvas()
} else if (key === 's') {
saveFile()
} else if (key === 'r') {
ifRainbowColor = !ifRainbowColor
}
}