-
Notifications
You must be signed in to change notification settings - Fork 0
/
side.js
136 lines (104 loc) · 4.93 KB
/
side.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
window.addEventListener('resize', function () {
"use strict";
window.location.reload();
})
const l = (p) => {
var c_input, v_input, s_input, e_input, vx, vy, vz, func, size, amount, eye, jay, kay
p.preload = function() {
myFont = p.loadFont('./fonts/rob.ttf')
}
p.setup = function() {
let canvas = p.createCanvas(0.3*p.windowWidth,p.windowHeight)
canvas.position(0.7*p.windowWidth,0)
centerText()
}
p.draw = function() {
p.background(15,15,15,255)
p.textFont(myFont, 0.012*p.windowWidth)
}
centerText = function() {
p.noStroke()
p.fill(35,35,40,255)
c_input = p.createDiv(
'<img style="width:50%; height:auto; max-width:100%; max-height:100%; margin:auto; display:block; left:0; right:0; position:absolute; top:0; bottom:0;" src="./pics/Center.png"/>'
)
c_input.size(0.3*p.windowWidth,0.075*p.windowHeight)
c_input.position(0.7*p.windowWidth,0)
c_input.style('background', p.color(40,40,40,255))
v_input = p.createDiv(
'<img style="width:47%; height:auto; max-width:100%; max-height:100%; margin:auto; display:block; left:0; right:0; position:absolute; top:0; bottom:0;" src="./pics/Input.png"/>'
)
v_input.size(0.30*p.windowWidth,0.075*p.windowHeight)
v_input.position(0.7*p.windowWidth,0.2*p.windowHeight)
v_input.style('background', p.color(40,40,40,255))
s_input = p.createDiv(
'<img style="width:42%; height:auto; max-width:100%; max-height:100%; margin:auto; display:block; left:0; right:0; position:absolute; top:0; bottom:0;" src="./pics/Scale.png"/>'
)
s_input.size(0.3*p.windowWidth,0.075*p.windowHeight)
s_input.position(0.7*p.windowWidth,0.5*p.windowHeight)
s_input.style('background', p.color(40,40,40,255))
e_input = p.createDiv(
'<img style="width:50%; height:auto; max-width:100%; max-height:100%; margin:auto; display:block; left:0; right:0; position:absolute; top:0; bottom:0;" src="./pics/Examples.png"/>'
)
e_input.size(0.15*p.windowWidth,0.075*p.windowHeight)
e_input.position(0.7*p.windowWidth,0.7*p.windowHeight)
e_input.style('background', p.color(40,40,40,255))
p.push()
p.textSize(0.012*p.windowWidth)
p.textAlign(p.LEFT, p.CENTER)
vx = p.createDiv(
'<img style="width:100%; height:auto; max-width:100%; max-height:100%; margin:auto; display:block; left:0; right:0; position:absolute; top:0; bottom:0;" src="./pics/x.png"/>'
)
vx.size(0.015*p.windowWidth,0.03*p.windowHeight)
vx.position(0.72*p.windowWidth,0.11*p.windowHeight)
vy = p.createDiv(
'<img style="width:auto; height:auto; max-width:100%; max-height:100%; margin:auto; display:block; left:0; right:0; position:absolute; top:0; bottom:0;" src="./pics/y.png"/>'
)
vy.size(0.015*p.windowWidth,0.03*p.windowHeight)
vy.position(0.79*p.windowWidth,0.11*p.windowHeight)
vz = p.createDiv(
'<img style="width:auto; height:auto; max-width:100%; max-height:100%; margin:auto; display:block; left:0; right:0; position:absolute; top:0; bottom:0;" src="./pics/z.png"/>'
)
vz.size(0.015*p.windowWidth,0.03*p.windowHeight)
vz.position((0.855*p.windowWidth),0.11*p.windowHeight)
func = p.createDiv(
'<img style="width:auto; height:auto; max-width:100%; max-height:100%; margin:auto; display:block; left:0; right:0; position:absolute; top:0; bottom:0;" src="./pics/func.png"/>'
)
func.size(0.057*p.windowWidth,0.027*p.windowHeight)
func.position(0.72*p.windowWidth,0.37*p.windowHeight)
size = p.createDiv(
'<img style="width:auto; height:auto; max-width:100%; max-height:100%; margin:auto; display:block; left:0; right:0; position:absolute; top:0; bottom:0;" src="./pics/Size.png"/>'
)
size.size(0.057*p.windowWidth,0.026*p.windowHeight)
size.position(0.72*p.windowWidth,0.60*p.windowHeight)
amount = p.createDiv(
'<img style="width:auto; height:auto; max-width:100%; max-height:100%; margin:auto; display:block; left:0; right:0; position:absolute; top:0; bottom:0;" src="./pics/Amount.png"/>'
)
amount.size(0.057*p.windowWidth,0.026*p.windowHeight)
amount.position(0.72*p.windowWidth,0.645*p.windowHeight)
var font_size = 0.014*p.windowWidth
eye = p.createDiv(
'î'
)
eye.size(0.027*p.windowWidth,0.027*p.windowHeight)
eye.position(0.93*p.windowWidth,0.325*p.windowHeight)
eye.style('color', p.color(240,240,240,255))
eye.style('font-size', font_size+'px')
jay = p.createDiv(
'ĵ'
)
jay.size(0.027*p.windowWidth,0.026*p.windowHeight)
jay.position(0.93*p.windowWidth,0.368*p.windowHeight)
jay.style('color', p.color(240,240,240,255))
jay.style('font-size', font_size+'px')
kay = p.createDiv(
'k̂'
)
kay.size(0.027*p.windowWidth,0.026*p.windowHeight)
kay.position(0.929*p.windowWidth,0.42*p.windowHeight)
kay.style('color', p.color(240,240,240,255))
kay.style('font-size', 0.013*p.windowWidth+'px')
p.pop()
}
}
let my = new p5(l)