Physics simulation with Javascript

A React and canvas experiment that turns image pixels into an interactive particle system.

lab Jan 1, 2024

JavaScript
TypeScript
React
HTML5

Welcome to the world of physics simulation with Javascript

This whole idea came about from a random YouTube video popping up in my feed. A guy selling a course on HTML/Javascript and canvas elements, he was modifying image pixels with canvas in a particle system.

Full disclosure, I did not watch the whole video so I can not say if the video is good or bad, I did however watch some of it to get the gist of what was happening and how I could replicate this in React.

You can view the full code below the result of this experiment.

Final result

Particle controls
Resolution9Size3Force3000 pxEase0.01Friction0.86
Toggles
GravityCollisions

The code

The component

To render the image as he does in the video poses a couple of issues when working with react. One is the fact that loading the image on first load in canvas didn’t work as expected. The <img /> tag has a onload function you should be able to use. I, however, couldn’t make it work, so I used JavaScript for this.

You do not want to initiate the canvas before the image is loaded. This is especially true when the image you use is hosted on a remote server, such as sanity.

1
/**
2
 * PhysicsImageProps
3
 * @param src: url to image
4
 * @param particleSystemOptions: (Optional)
5
 */
6
interface PhysicsImageProps {
7
  src: string
8
  particleSystemOptions?: IParticleSystemOptions | null
9
}
10

11
export default function PhysicsImage({
12
  src,
13
  particleSystemOptions,
14
}: PhysicsImageProps): JSX.Element {
15
  let effect: null | Effect = null
16
  const imageRef = useRef<HTMLImageElement>(null)
17
  const canvasRef = useRef<HTMLCanvasElement>(null)
18

19
  return (
20
    <div className="flex flex-col items-center justify-center px-0">
21
      <canvas ref={canvasRef} />
22
      <img ref={imageRef} />
23
    </div>
24
  )
25
}

Loading the image data

To solve this issue I ended up dropping the <img /> tag, this was also done to not have the image in the html of the component, as that requires you to hide the element with css. After all, the image is only being used to calculate pixel colors and values, not actually rendering the image.

1
/**
2
 * PhysicsImageProps
3
 * @param src: url to image
4
 * @param particleSystemOptions: (Optional)
5
 */
6
interface PhysicsImageProps {
7
  src: string
8
  particleSystemOptions?: IParticleSystemOptions | null
9
}
10

11
export default function PhysicsImage({
12
  src,
13
  particleSystemOptions,
14
}: PhysicsImageProps): JSX.Element {
15
  let effect: null | Effect = null
16
  const canvasRef = useRef<HTMLCanvasElement>(null)
17

18
  return (
19
    <div className="flex flex-col items-center justify-center px-0">
20
      <canvas ref={canvasRef} />
21
    </div>
22
  )
23
}

To get the correct image data the image was built with a useEffect and the Image api. Building it with the API has the added benefit of removing the need for another useRef hook.

1
/**
2
 * PhysicsImageProps
3
 * @param src: url to image
4
 * @param particleSystemOptions: (Optional)
5
 */
6
interface PhysicsImageProps {
7
  src: string
8
  particleSystemOptions?: IParticleSystemOptions | null
9
}
10

11
export default function PhysicsImage({
12
  src,
13
  particleSystemOptions,
14
}: PhysicsImageProps): JSX.Element {
15
  const [loaded, setLoaded] = useState(false)
16
  const [imageSrc, setImageSrc] = useState<HTMLImageElement | null>(null)
17
  const canvasRef = useRef<HTMLCanvasElement>(null)
18

19
  useEffect(() => {
20
    let image = new Image()
21
    image.src = src
22
    image.crossOrigin = 'anonymous'
23
    image.onload = function () {
24
      setImageSrc(image)
25
      setLoaded(true)
26
    }
27
  }, [])
28

29
  return (
30
    <div className="flex flex-col items-center justify-center px-0">
31
      <canvas ref={canvasRef} />
32
    </div>
33
  )
34
}

1
/**
2
 * PhysicsImageProps
3
 * @param src: url to image
4
 * @param particleSystemOptions: (Optional)
5
 */
6
interface PhysicsImageProps {
7
  src: string
8
  particleSystemOptions?: IParticleSystemOptions | null
9
}
10

11
export default function PhysicsImage({
12
  src,
13
  particleSystemOptions,
14
}: PhysicsImageProps): JSX.Element {
15
  const [loaded, setLoaded] = useState(false)
16
  const [imageSrc, setImageSrc] = useState<HTMLImageElement | null>(null)
17
  const canvasRef = useRef<HTMLCanvasElement>(null)
18

19
  useEffect(() => {
20
    let image = new Image()
21
    image.src = src
22
    image.crossOrigin = 'anonymous'
23
    image.onload = function () {
24
      setImageSrc(image)
25
      setLoaded(true)
26
    }
27
  }, [])
28

29
  return (
30
    <div className="flex flex-col items-center justify-center px-0">
31
      <canvas ref={canvasRef} />
32
    </div>
33
  )
34
}

From the code you can see that the loaded state is set to true as soon as the image is loaded, there is also an extra step of setting the image in a state variable. This could probably be omitted, but it works for now. When working locally with image from sanity, the image.crossOrigin has to be set to ‘anonymous’, or you will get a insecure action error from the canvas API.

1
/**
2
 * PhysicsImageProps
3
 * @param src: url to image
4
 * @param particleSystemOptions: (Optional)
5
 */
6
interface PhysicsImageProps {
7
  src: string
8
  particleSystemOptions?: IParticleSystemOptions | null
9
}
10

11
export default function PhysicsImage({
12
  src,
13
  particleSystemOptions,
14
}: PhysicsImageProps): JSX.Element {
15
  let effect: null | Effect = null
16
  const [loaded, setLoaded] = useState(false)
17
  const [imageSrc, setImageSrc] = useState<HTMLImageElement | null>(null)
18
  const canvasRef = useRef<HTMLCanvasElement>(null)
19

20

21
  useEffect(() => {
22
    if (loaded) {
23
      const ctx = canvasRef.current.getContext('2d')
24
      const particleOptions: IParticleSystemOptions = particleSystemOptions
25
        ? particleSystemOptions
26
        : {
27
            randomFriction: { min: 0.8, max: 0.9 },
28
            mouseRadius: 3000,
29
            ease: 0.01,
30
            size: 3,
31
            gap: 3,
32
          }
33
      canvasRef.current.width = window.innerWidth
34
      canvasRef.current.height = window.innerHeight
35
      effect = new Effect(canvasRef.current, imageSrc, particleOptions)
36

37
      effect.init(ctx)
38
      animate()
39
    }
40
  }, [loaded])
41

42
  function animate() {
43
    effect.update()
44
    effect.render(canvasRef.current.getContext('2d'))
45
    requestAnimationFrame(animate)
46
  }
47

48
  useEffect(() => {
49
    let image = new Image()
50
    image.src = src
51
    image.crossOrigin = 'anonymous'
52
    image.onload = function () {
53
      setImageSrc(image)
54
      setLoaded(true)
55
    }
56
  }, [])
57

58
  return (
59
    <div className="flex flex-col items-center justify-center px-0">
60
      <canvas ref={canvasRef} />
61
    </div>
62
  )
63
}

To initialize the class we need to add another function to run the setup logic. I opted to do this in a useEffect this is not the correct way, as it would be more performant to do it with a function running from the previous useEffect. This way you could probably also omit the state variables for image and loading all together.

This code though runs the code as the image loads and initializes the particle system.

At the end of initialization it runs the animate() function that starts the rendering process in the canvas. The component itself is fairly simple, only consisting of initializations and returning a simple div with a canvas element inside.

The particle system

1
import { Effect } from './Effect'
2

3
/**
4
 * ParticleOptions
5
 * @param friction - The friction of the particle (default 0.9), number between 0 and 1
6
 * @param ease - The ease of the particle (default 0.1)
7
 * @param size - The size of the particle (default 1)
8
 * @param gap - Gap between particles (default 3)
9
 * @param mouseRadius - The radius of the mouse (default 6000)
10
 * @param randomFriction - Random friction between min and max (default null)
11
 */
12
export interface IParticleSystemOptions {
13
  friction?: number
14
  ease?: number
15
  size?: number
16
  gap?: number
17
  mouseRadius?: number
18
  randomFriction?: { min: number; max: number }
19
}
20

21
export class Particle {
22
  effect: Effect
23
  x: number
24
  y: number
25
  size: number
26
  color: string
27
  dx: number
28
  dy: number
29
  vx: number
30
  vy: number
31
  force: number
32
  angle: number
33
  distance: number
34
  friction: number
35
  ease: number
36
  originX: number
37
  originY: number
38
  constructor(effect, x, y, color, particleOptions?: IParticleSystemOptions) {
39
    this.effect = effect
40
    this.x = this.originX = x
41
    this.y = this.originY = y
42
    this.color = color
43
    this.dx = 0
44
    this.dy = 0
45
    this.vx = 0
46
    this.vy = 0
47
    this.distance = 0
48
    this.angle = 0
49
    this.force = 0
50
    this.friction = particleOptions?.friction
51
      ? particleOptions.friction
52
      : particleOptions?.randomFriction
53
      ? Math.random() *
54
          (particleOptions.randomFriction.max -
55
            particleOptions.randomFriction.min) +
56
        particleOptions.randomFriction.min
57
      : 0.9
58

59
    this.ease = particleOptions?.ease ? particleOptions.ease : 0.1
60
    this.size = particleOptions?.size ? particleOptions.size : 1
61
  }
62

63
  update() {
64
    this.dx = this.effect.mouse.x - this.x
65
    this.dy = this.effect.mouse.y - this.y
66
    this.distance = this.dx * this.dx + this.dy * this.dy
67
    this.force = -this.effect.mouse.radius / this.distance
68
    if (this.distance < this.effect.mouse.radius) {
69
      this.angle = Math.atan2(this.dy, this.dx)
70
      this.vx += this.force * Math.cos(this.angle)
71
      this.vy += this.force * Math.sin(this.angle)
72
    }
73
    this.x += (this.vx *= this.friction) + (this.originX - this.x) * this.ease
74
    this.y += (this.vy *= this.friction) + (this.originY - this.y) * this.ease
75
  }
76
}

There are many ways of creating particle systems, this one is largely based on the video, although the math behind it is not new. Visualizing particles have been studied and researched thoroughly by the visualization community and elsewhere.

This particle system is a pretty standard one and doesn’t really have any real world use (as i see it) apart from being cool to play with.

Particle class

The main purpose of this class for me was to split the code into readable sections, using classes could however be omitted and would probably increase performance slightly, although not enough for me to sacrifice readability at the current stage of this implementation.

The Particle class initiates the particle objects with the correct values and exposes an update function that will be called whenever the particle would move.

It also checks if the users cursor is close to itself, and if it is within the mouse radius it applies a force based on the cursor speed.

It is worth mentioning that this class shares an interface with the Effect class. This should probably be extracted to separate files and be better implemented. The interface gives you an overview over props you can send into the math function above to affect the physics.

Effect class

1
import { IParticleSystemOptions, Particle } from './Particle'
2

3
export class Effect {
4
  canvas: HTMLCanvasElement
5
  image: HTMLImageElement
6
  particleSystemOptions?: IParticleSystemOptions | null
7
  width: number
8
  height: number
9
  centerX: number
10
  centerY: number
11
  x: number
12
  y: number
13
  particles: Particle[]
14
  gap: number
15
  mouse: {
16
    x: number
17
    y: number
18
    radius: number
19
    tmpRadius: number
20
  }
21
  box: DOMRect
22
  canvasOffset: { x: number; y: number }
23

24
  constructor(
25
    canvas: HTMLCanvasElement,
26
    image: HTMLImageElement,
27
    particleOptions?: IParticleSystemOptions | null
28
  ) {
29
    this.canvas = canvas
30
    this.box = this.canvas.getBoundingClientRect()
31
    this.canvasOffset = { x: this.box.left, y: this.box.top }
32
    this.width = canvas.width
33
    this.height = canvas.height
34
    this.image = image
35
    this.centerX = this.width / 2
36
    this.centerY = this.height / 2
37
    this.x = this.centerX - this.image.width / 2
38
    this.y = this.centerY - this.image.height / 2
39
    this.particles = []
40
    this.gap = particleOptions?.gap ? particleOptions.gap : 3
41
    this.mouse = {
42
      x: 0,
43
      y: 0,
44
      radius: particleOptions?.mouseRadius ? particleOptions.mouseRadius : 100,
45
      tmpRadius: 0,
46
    }
47
    particleOptions && (this.particleSystemOptions = particleOptions)
48

49
    window.addEventListener('scroll', (_) => {
50
      this.canvasOffset.y = this.canvas.getBoundingClientRect().top
51
    })
52

53
    window.addEventListener('mousemove', (event) => {
54
      this.mouse.x = event.clientX - this.canvasOffset.x
55
      this.mouse.y = event.clientY - this.canvasOffset.y
56
    })
57

58
    window.addEventListener('mousedown', (event) => {
59
      this.mouse.tmpRadius = this.mouse.radius
60
      this.mouse.radius = 0
61
    })
62

63
    window.addEventListener('mouseup', (event) => {
64
      this.mouse.radius = this.mouse.tmpRadius
65
      this.mouse.tmpRadius = 0
66
    })
67

68
    window.addEventListener(
69
      'touchstart',
70
      (event) => {
71
        this.mouse.x = event.changedTouches[0].clientX - this.canvasOffset.x
72
        this.mouse.y = event.changedTouches[0].clientY - this.canvasOffset.y
73
      },
74
      false
75
    )
76

77
    window.addEventListener(
78
      'touchmove',
79
      (event) => {
80
        event.preventDefault()
81
        this.mouse.x = event.targetTouches[0].clientX
82
        this.mouse.y = event.targetTouches[0].clientY
83
      },
84
      false
85
    )
86

87
    window.addEventListener(
88
      'touchend',
89
      (event) => {
90
        event.preventDefault()
91
        this.mouse.x = 0
92
        this.mouse.y = 0
93
      },
94
      false
95
    )
96
  }
97

98
  public init(context) {
99
    context.drawImage(this.image, this.x, this.y)
100
    let pixels = context.getImageData(0, 0, this.width, this.height).data
101
    let index
102
    for (let y = 0; y < this.height; y += this.gap) {
103
      for (let x = 0; x < this.width; x += this.gap) {
104
        index = (y * this.width + x) * 4
105
        const red = pixels[index]
106
        const green = pixels[index + 1]
107
        const blue = pixels[index + 2]
108
        const color = 'rgb(' + red + ',' + green + ',' + blue + ')'
109

110
        const alpha = pixels[index + 3]
111
        if (alpha > 0) {
112
          this.particleSystemOptions
113
            ? this.particles.push(
114
                new Particle(this, x, y, color, this.particleSystemOptions)
115
              )
116
            : this.particles.push(new Particle(this, x, y, color))
117
        }
118
      }
119
    }
120
    context.clearRect(0, 0, this.width, this.height)
121
  }
122

123
  public update() {
124
    for (const element of this.particles) {
125
      element.update()
126
    }
127
  }
128

129
  public render(context) {
130
    context.clearRect(0, 0, this.width, this.height)
131
    for (const element of this.particles) {
132
      let p = element
133
      context.fillStyle = p.color
134
      context.fillRect(p.x, p.y, p.size, p.size)
135
    }
136
  }
137
}

This class is gross, working with classes is not necessarily the most fun thing to do in JavaScript, it is literally 50 lines of code just to initialize the the class. This is of course due to me not using interfaces properly in these files as it is more a proof of concept rather than “this is how you should do it”. It is however how you could do it. The effect also carries the eventListeners to handle mouse interaction.

Cursor position

The hardest part about making this canvas working out the mouse center. In a canvas that spans the entire width and height of the screen, think figma or google docs, the center of the cursor is usually where the client thinks it is. However, the cursor is not where it thinks it is in this document, as there are padding and margins in the document and other DOM elements that move the canvas around on the page.

It was therefore necessary to find the offset from the top of the website. This part of the browser is not that well documented, but it wasn’t too hard to find similar issues on stack overflow. It was however hard to find the correct solution, and I am still not convinced I have the proper solution for this, but it does work as intended, at least for desktop.

Note: The eventListeners for mobile and touch is not correctly implemented in this example, but I do think the same offset should work for all screens and devices.

Final code

1
import { useEffect, useRef, useState } from 'react'
2
import { Effect } from '../lib/particleSystem/Effect'
3
import { IParticleSystemOptions } from '@/lib/particleSystem/Particle'
4

5
/**
6
 * PhysicsImageProps
7
 * @param src: url to image
8
 * @param particleSystemOptions: (Optional)
9
 */
10
interface PhysicsImageProps {
11
  src: string
12
  particleSystemOptions?: IParticleSystemOptions | null
13
}
14

15
export default function PhysicsImage({
16
  src,
17
  particleSystemOptions,
18
}: PhysicsImageProps): JSX.Element {
19
  let effect: null | Effect = null
20
  const [loaded, setLoaded] = useState(false)
21
  const [imageSrc, setImageSrc] = useState<HTMLImageElement | null>(null)
22
  const canvasRef = useRef<HTMLCanvasElement>(null)
23

24
  useEffect(() => {
25
    if (loaded) {
26
      const ctx = canvasRef.current.getContext('2d')
27
      const particleOptions: IParticleSystemOptions = particleSystemOptions
28
        ? particleSystemOptions
29
        : {
30
            randomFriction: { min: 0.8, max: 0.9 },
31
            mouseRadius: 3000,
32
            ease: 0.01,
33
            size: 3,
34
            gap: 3,
35
          }
36
      canvasRef.current.width = window.innerWidth
37
      canvasRef.current.height = window.innerHeight
38
      effect = new Effect(canvasRef.current, imageSrc, particleOptions)
39

40
      effect.init(ctx)
41
      animate()
42
    }
43
  }, [loaded])
44

45
  function animate() {
46
    effect.update()
47
    effect.render(canvasRef.current.getContext('2d'))
48
    requestAnimationFrame(animate)
49
  }
50

51
  useEffect(() => {
52
    let image = new Image()
53
    image.src = src
54
    image.crossOrigin = 'anonymous'
55
    image.onload = function () {
56
      setImageSrc(image)
57
      setLoaded(true)
58
    }
59
  }, [])
60

61
  return (
62
    <div className="flex flex-col items-center justify-center px-0">
63
      <canvas ref={canvasRef} />
64
    </div>
65
  )
66
}

1
import { Effect } from './Effect'
2

3
/**
4
 * ParticleOptions
5
 * @param friction - The friction of the particle (default 0.9), number between 0 and 1
6
 * @param ease - The ease of the particle (default 0.1)
7
 * @param size - The size of the particle (default 1)
8
 * @param gap - Gap between particles (default 3)
9
 * @param mouseRadius - The radius of the mouse (default 6000)
10
 * @param randomFriction - Random friction between min and max (default null)
11
 */
12
export interface IParticleSystemOptions {
13
  friction?: number
14
  ease?: number
15
  size?: number
16
  gap?: number
17
  mouseRadius?: number
18
  randomFriction?: { min: number; max: number }
19
}
20

21
export class Particle {
22
  effect: Effect
23
  x: number
24
  y: number
25
  size: number
26
  color: string
27
  dx: number
28
  dy: number
29
  vx: number
30
  vy: number
31
  force: number
32
  angle: number
33
  distance: number
34
  friction: number
35
  ease: number
36
  originX: number
37
  originY: number
38
  constructor(effect, x, y, color, particleOptions?: IParticleSystemOptions) {
39
    this.effect = effect
40
    this.x = this.originX = x
41
    this.y = this.originY = y
42
    this.color = color
43
    this.dx = 0
44
    this.dy = 0
45
    this.vx = 0
46
    this.vy = 0
47
    this.distance = 0
48
    this.angle = 0
49
    this.force = 0
50
    this.friction = particleOptions?.friction
51
      ? particleOptions.friction
52
      : particleOptions?.randomFriction
53
      ? Math.random() *
54
          (particleOptions.randomFriction.max -
55
            particleOptions.randomFriction.min) +
56
        particleOptions.randomFriction.min
57
      : 0.9
58

59
    this.ease = particleOptions?.ease ? particleOptions.ease : 0.1
60
    this.size = particleOptions?.size ? particleOptions.size : 1
61
  }
62

63
  update() {
64
    this.dx = this.effect.mouse.x - this.x
65
    this.dy = this.effect.mouse.y - this.y
66
    this.distance = this.dx * this.dx + this.dy * this.dy
67
    this.force = -this.effect.mouse.radius / this.distance
68
    if (this.distance < this.effect.mouse.radius) {
69
      this.angle = Math.atan2(this.dy, this.dx)
70
      this.vx += this.force * Math.cos(this.angle)
71
      this.vy += this.force * Math.sin(this.angle)
72
    }
73
    this.x += (this.vx *= this.friction) + (this.originX - this.x) * this.ease
74
    this.y += (this.vy *= this.friction) + (this.originY - this.y) * this.ease
75
  }
76
}

1
import { IParticleSystemOptions, Particle } from './Particle'
2

3
export class Effect {
4
  canvas: HTMLCanvasElement
5
  image: HTMLImageElement
6
  particleSystemOptions?: IParticleSystemOptions | null
7
  width: number
8
  height: number
9
  centerX: number
10
  centerY: number
11
  x: number
12
  y: number
13
  particles: Particle[]
14
  gap: number
15
  mouse: {
16
    x: number
17
    y: number
18
    radius: number
19
    tmpRadius: number
20
  }
21
  box: DOMRect
22
  canvasOffset: { x: number; y: number }
23

24
  constructor(
25
    canvas: HTMLCanvasElement,
26
    image: HTMLImageElement,
27
    particleOptions?: IParticleSystemOptions | null
28
  ) {
29
    this.canvas = canvas
30
    this.box = this.canvas.getBoundingClientRect()
31
    this.canvasOffset = { x: this.box.left, y: this.box.top }
32
    this.width = canvas.width
33
    this.height = canvas.height
34
    this.image = image
35
    this.centerX = this.width / 2
36
    this.centerY = this.height / 2
37
    this.x = this.centerX - this.image.width / 2
38
    this.y = this.centerY - this.image.height / 2
39
    this.particles = []
40
    this.gap = particleOptions?.gap ? particleOptions.gap : 3
41
    this.mouse = {
42
      x: 0,
43
      y: 0,
44
      radius: particleOptions?.mouseRadius ? particleOptions.mouseRadius : 100,
45
      tmpRadius: 0,
46
    }
47
    particleOptions && (this.particleSystemOptions = particleOptions)
48

49
    window.addEventListener('scroll', (_) => {
50
      this.canvasOffset.y = this.canvas.getBoundingClientRect().top
51
    })
52

53
    window.addEventListener('mousemove', (event) => {
54
      this.mouse.x = event.clientX - this.canvasOffset.x
55
      this.mouse.y = event.clientY - this.canvasOffset.y
56
    })
57

58
    window.addEventListener('mousedown', (event) => {
59
      this.mouse.tmpRadius = this.mouse.radius
60
      this.mouse.radius = 0
61
    })
62

63
    window.addEventListener('mouseup', (event) => {
64
      this.mouse.radius = this.mouse.tmpRadius
65
      this.mouse.tmpRadius = 0
66
    })
67

68
    window.addEventListener(
69
      'touchstart',
70
      (event) => {
71
        this.mouse.x = event.changedTouches[0].clientX - this.canvasOffset.x
72
        this.mouse.y = event.changedTouches[0].clientY - this.canvasOffset.y
73
      },
74
      false
75
    )
76

77
    window.addEventListener(
78
      'touchmove',
79
      (event) => {
80
        event.preventDefault()
81
        this.mouse.x = event.targetTouches[0].clientX
82
        this.mouse.y = event.targetTouches[0].clientY
83
      },
84
      false
85
    )
86

87
    window.addEventListener(
88
      'touchend',
89
      (event) => {
90
        event.preventDefault()
91
        this.mouse.x = 0
92
        this.mouse.y = 0
93
      },
94
      false
95
    )
96
  }
97

98
  public init(context) {
99
    context.drawImage(this.image, this.x, this.y)
100
    let pixels = context.getImageData(0, 0, this.width, this.height).data
101
    let index
102
    for (let y = 0; y < this.height; y += this.gap) {
103
      for (let x = 0; x < this.width; x += this.gap) {
104
        index = (y * this.width + x) * 4
105
        const red = pixels[index]
106
        const green = pixels[index + 1]
107
        const blue = pixels[index + 2]
108
        const color = 'rgb(' + red + ',' + green + ',' + blue + ')'
109

110
        const alpha = pixels[index + 3]
111
        if (alpha > 0) {
112
          this.particleSystemOptions
113
            ? this.particles.push(
114
                new Particle(this, x, y, color, this.particleSystemOptions)
115
              )
116
            : this.particles.push(new Particle(this, x, y, color))
117
        }
118
      }
119
    }
120
    context.clearRect(0, 0, this.width, this.height)
121
  }
122

123
  public update() {
124
    for (const element of this.particles) {
125
      element.update()
126
    }
127
  }
128

129
  public render(context) {
130
    context.clearRect(0, 0, this.width, this.height)
131
    for (const element of this.particles) {
132
      let p = element
133
      context.fillStyle = p.color
134
      context.fillRect(p.x, p.y, p.size, p.size)
135
    }
136
  }
137
}

Future

This has been a fun project, but I think implementing this into pure webGL will provide a massive performance boost. It would also be really nice to have sliders below the image to control the different variables.

If you have questions or ideas feel free to contact me via email