Skip to content

Animated Wire MicroSim

You can include this MicroSim in your course by pasting the following HTML directly into your web page.

1
2
<iframe src="https://dmccreary.github.io/circuits/sims/animated-wire/main.html" height="500px" scrolling="no"
  style="overflow: hidden;"></iframe>

Run the Animated Wire MicroSim Edit the Animated Wire MicroSim

Sample Animate Wire Function

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
// Function for drawing an animated wire
function drawAnimatedWire(x1, y1, x2, y2, speed1, state) {
    if (state) {
        let distance = dist(x1, y1, x2, y2);
        let circlePos = map((millis() * speed1) % distance, 0, distance, 0, 1);

        let x = lerp(x1, x2, circlePos);
        let y = lerp(y1, y2, circlePos);

        stroke(0);
        strokeWeight(lineWidth)
        line(x1, y1, x2, y2);

        fill(255, 0, 0);
        noStroke();
        circle(x, y, 10);
    } else {
        stroke(0);
        strokeWeight(lineWidth)
        line(x1, y1, x2, y2);
    }
}