examples
_animations
- circle-grid.js
- circles-border-timer.js
- circles-inout.js
- circles.js
- circles2.js
- cloud-delay.js
- clown.js
- drops.js
- grid.js
- grid2.js
- helloworld-animate.js
- helloworld-animate2.js
- keyframe.js
- keyframe2.js
- keyframe3.js
- shapes-border.js
- square-grid.js
- squares-border-timer.js
- squares-timer-overlap.js
- troll.js
_audio
_gravity
_particles
_sub
display
movement
- arrows-aim-shoot.js
- arrows-line.js
- arrows-rotate.js
- arrows-shift.js
- arrows-x.js
- arrows-y.js
- drag-drop.js
- drag-drop2.js
- falling-click.js
- follow-line.js
- follow-point.js
- follow-x.js
- follow-y.js
- follow.js
- if-on-edge-bounce.js
- input-aim-shoot.js
- input-point-goto.js
- input-point-moveto.js
- input-wasd.js
- joystick.js
- stretch-back-release-physics.js
- stretch-front-release-physics.js
- stretch-front-release.js
physics
showcase
tests
user-interface
clock.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
let sline = display.line()
sline.width = 2
let mline = display.line()
mline.width = 4
let hline = display.line()
hline.width = 6
const point = (t, n, l) => {
// const angle = map(t, 0, n, 0, 2 * PI) - PI_2
const angle = 2 * Math.PI / n * t - Math.PI / 2;
return Point(
display.cx + cos(angle) * l,
display.cy + sin(angle) * l
)
}
const size = 300
forever(() => {
const time = new Date()
const seconds = time.getSeconds()
const minutes = time.getMinutes()
const hours = time.getHours()
sline.to(point(seconds, 60, size - 30))
mline.to(point(minutes, 60, size - 50))
hline.to(point(hours, 12, size - 70))
})
fill(color.hsb(0,0,20))
let i = 0
for (let a = 0; a < 360; a += 6) {
let pnt = point(a, 360, size - 10)
display.circle(pnt, 10)
let l = ui.label(i++ % 60, pnt)
l.color = color.white
l.backgroundColor = color.clear
l.fontSize = 12
}
fill(color.hsb(0,0,40))
display.circle(display.center, size)
let sline = display.line() sline.width = 2 let mline = display.line() mline.width = 4 let hline = display.line() hline.width = 6 const point = (t, n, l) => { // const angle = map(t, 0, n, 0, 2 * PI) - PI_2 const angle = 2 * Math.PI / n * t - Math.PI / 2; return Point( display.cx + cos(angle) * l, display.cy + sin(angle) * l ) } const size = 300 forever(() => { const time = new Date() const seconds = time.getSeconds() const minutes = time.getMinutes() const hours = time.getHours() sline.to(point(seconds, 60, size - 30)) mline.to(point(minutes, 60, size - 50)) hline.to(point(hours, 12, size - 70)) }) fill(color.hsb(0,0,20)) let i = 0 for (let a = 0; a < 360; a += 6) { let pnt = point(a, 360, size - 10) display.circle(pnt, 10) let l = ui.label(i++ % 60, pnt) l.color = color.white l.backgroundColor = color.clear l.fontSize = 12 } fill(color.hsb(0,0,40)) display.circle(display.center, size)