rtc-js/projectile_chapter2.html at main · tplive/rtc-js · GitHub

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
<!DOCTYPE html>
<html>
<body>
<script>
window.onerror = function(errorMsg, url, lineNumber){
    // any action you want goes here
    // errorMsg is the error message itself.
    // url should be the file presenting the error, though i have
    //    found that it only presents to me the address of the site.
    // lineNumber is the line number the error occoured on.
    // here is an example of what you could do with it:
    const error = document.getElementById("error")
    error.innerHTML = "Error in " + url + " at " + lineNumber + ":\n" + errorMsg
}
</script>

<h1>Projectile simulator</h1>
<ul id="test_list"></ul>
<p id="error"></ul>

<script src="./js/20240419_functions.js"></script>

<script>
// *** RUN PROJECTILE SIMULATION

// A projectile has a position (point) and a velocity (vector).
// An environment has gravity (vector) and wind (vector).
// A tick represents a unit of time. Each tick yields a new projectile with new position and velocity, based on environment.

var ticks = 300
var env = {gravity: vector(0, -0.01, 0), wind: vector(-0.001, 0, 0)}
log("test_list", `Gravity: ${env.gravity.toString()}, Wind: ${env.wind.toString()}`)

var proj = {position: point(0, 1, 0), velocity: vector(1.5, 1, 0)}
log("test_list", `Projectile start position: ${proj.position.toString()}, Start velocity: ${proj.velocity.toString()}`)

const can = canvas(300, 300)
const c1 = color(1, 1, 1)

const html_can = html_canvas("error", can.width, can.height)
var context = html_can.getContext("2d")
context.fillStyle = "black"
context.fillRect(0, 0, can.width, can.height)
context.fillStyle = "white"

// Loop
while (ticks>=1) {
  ticks--

  proj = {position: add_tuples(proj.position, proj.velocity), velocity: add_tuples(add_tuples(proj.velocity, env.gravity), env.wind)}
  //log("test_list", proj.position.toString())

  let x = Math.round(proj.position.x )
  let y = can.width - Math.round(proj.position.y * 1000 / can.height)
  const c = color(0.95, 0.6, 0.75)
  if (x <= can.width -1 && y <= can.height -1) {
    const s = scale_color(c)

    can.write_pixel(x, y, s)
    context.fillStyle = `rgb(${s.red}, ${s.green}, ${s.blue}`
    context.fillRect(x, y, 2, 2)
  }


}

const ppm = canvas_to_ppm(can)
// Show canvas
//log("error", ppm)
downloadPPMfile(ppm, "plot")

</script>

</body>

</html>