examples

line.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
world.frame()

//physics.debug()

let num = random.num(0, 360)

stroke(color.hsb(num, 75, 95), 3)
fill(color.hsb(num, 85, 75))

em = display.emoji("🤩")
display.rect(100, 100, 50, 50)
display.circle(200, 100, 25)
po = display.polygon(300, 100, 25, 5)
po.randomize = 0.3
po2 = display.polygon(300, 0, 25, 50)
po2.randomize = 0.3
display.cloud(400, 100, 25)
display.line(390, 180, 575, 180)
display.ellipse(500, 100, 25, 50)
display.star(600, 100, 25)
display.bubble("700x100", 700, 100)
display.heart(100, 200, 25)
display.ghost(200, 200, 25)

physics.add(em, { radius: em.width/2 })
physics.add(display.drawElems)

po.animate(400, (to) => {
  to.scale = 2
  to.angle = 25
})

em.animate(400, (to) => {
  to.scale = 2
  to.angle = 25
})

stroke(color.black, 0)
fill(color.white)

p1 = display.circle(100, 100, 25)
p1.color = color.clear
p1.angle = random.num(0,360) //135
p2 = display.circle(860, 540, 25)
p2.color = color.clear
p2.angle = random.num(0,360) //315

li = display.line(100, 100, 860, 540)
li.color=color.hsb(180, 75, 95)
li.borderColor=color.hsb(270, 75, 95)
li.lineCap = "round" //"butt", "round" or "square"
li.width = 50
li.borderWidth = 10

update(() => {
  p1.move(5)
  p1.ifOnEdgeBounce()
  p2.move(5)
  p2.ifOnEdgeBounce()

  li.from(p1.position)
  li.to(p2.position)
})

//physics.add(li)

input.point((e) => {
  if (e.began) {
    line = display.line(e.position, e.position)
    line.moveToFront()
    line.color=li.color.clone()
    line.borderColor=li.borderColor.clone()
    line.lineCap = "square" //"butt", "round" or "square"
    line.width = 50
    line.borderWidth = 5
    line.elements = 5
    line.vertices = 7

    //line.style = "solid"
    //line.style = "dots"
    //line.style = "blocks"
    line.style = "polygons"
    //line.style = "clouds"
    //line.style = "stars"
    //line.style = "hearts"
  }

  if (e.updated) {
    line.to(e.position)
  }

  if (e.ended) {
    line.destroy()
  }
})


l = display.line(100, 540, 860, 540)
l.width = 20
l.style = "stars"

l2 = display.line(175, 450, 780, 445)
l2.width = 16
l2.style = "clouds"

l3 = display.line(245, 360, 715, 355)
l3.width = 14
l3.style = "polygons"

l4 = display.line(300, 275, 655, 275)
l4.width = 12
l4.style = "blocks"

l5 = display.line(350, 225, 615, 225)
l5.width = 10
l5.style = "dots"