DEV Community: Alex

Randomised Terrain Generation

Alex — Tue, 24 Oct 2023 21:27:22 +0000

In the last blog post, we managed to convert the isometric demo from Vanilla.js into Pixi.js in React. It was a great success but I found it a bit boring with just grass tiles floating around.

Why don’t we add some variety of blocks ?

Let’s modify the sprite sheet loading code to introduce some new blocks into the scene.

function generateFrameData(x: number, y: number) {
  return {
    frame: { x: 18 * x, y: 18 * y, w: 18, h: 18 },
    sourceSize: { w: 18, h: 18 },
    spriteSourceSize: { x: 0, y: 0, w: 18, h: 18 }
  }
}

const atlasData = {
  frames: {
    pale_green_grass: generateFrameData(0, 0),
    dark_green_grass: generateFrameData(1, 0),
    dark_green_grass_with_seedling: generateFrameData(2, 0),
    dark_green_grass_with_budding: generateFrameData(3, 0),
    sand: generateFrameData(4, 0),
    sand_with_crack: generateFrameData(5, 0),
    dry_dirt: generateFrameData(6, 0),
    dry_dirt_with_crach: generateFrameData(7,0),
    dirt: generateFrameData(8, 0),
    dark_green_grass_dirt: generateFrameData(0, 1),
    dark_green_grass_dirt_with_seedling: generateFrameData(1, 1)
  },
  meta: {
    image: `${process.env.PUBLIC_URL}/sprites/structural_blocks.png`,
    format: 'RGBA8888',
    size: { w: 180, h: 180 },
    scale: "0.25",
  },
};

We can then randomise the block’s texture by picking a random texture from the textures when rendering the block

const textureTypes = Object.keys(atlasData.frames);

// ...skipped 

function App() {

  // ...skipped

  const grid = useMemo(() => generateGrid(16, 16, (x, y) => ({ 
    x, 
    y,
    textureType: textureTypes[Math.floor(Math.random() * textureTypes.length)]
  })), [])

  return (
    <Stage
      height={window.innerHeight}
      width={window.innerWidth}
      options={{ resizeTo: window }}>
      {textures
        ? grid.map(({ x, y, textureType }) => (
          <GrassBlock
            x={x}
            y={y}
            texture={textures[textureType]}
          />
        ))
        : null
      }
    </Stage>
  );
}

And there you have it, a randomised terrain! Each block will be different every time you refresh the page!

A truly randomised terrain

However, something just doesn’t seems quite right… It is indeed a randomised terrain but it is not realistic — One would not expect a sand block appears next to a grass block and a dry dirt block pop out of nowhere.

To generate terrain that resemble real life, we can apply some rules to our randomness or what’s called Wave Function Collapse in the field of Quantum Mechanics.

Consider we have a 16 x 16 grid, from the start each block would be in superposition — state where is in all possible states at once, meaning each block can be in any of the texture.

In such scenario, we describe the block as having higher value of entropy as it can possibly become any of the block. We also need to introduce a rule set to reduce the entropy of neighbouring block by defining we can be and cannot be next to the current block.

The rule set

If current block is a pale_green_grass block, the neighbouring block cannot be any of the sand block. Thus, the possible state of neighbouring block is reduced hence reducing the entropy.

Keep in mind when defining the rule set, if pale_green_grass cannot have any sand block as neighbour, the same goes to sand block — it cannot have pale_green_grass as neighbour. This is important otherwise some block on your screen might appear empty as there are contradictions.

The algorithm works like follow:

Find the cell with lowest entropy
“Collapse” it
Propagate the changes to neighbouring cell following the rule set
Repeat until all cell are collapsed

// utils.ts

export const blockExclusionRules: Record<string, string[]> = {
    'pale_green_grass': ['sand', 'sand_with_crack'],
    'dark_green_grass': ['sand', 'sand_with_crack', 'dry_dirt', 'dry_dirt_with_crack'],
    'dark_green_grass_with_seedling': ['sand', 'sand_with_crack', 'dry_dirt', 'dry_dirt_with_crack'],
    'dark_green_grass_with_budding': ['sand', 'sand_with_crack', 'dry_dirt', 'dry_dirt_with_crack'],
    'sand': ['pale_green_grass', 'dark_green_grass', 'dark_green_grass_with_seedling', 'dark_green_grass_with_budding', 'dirt'],
    'sand_with_crack': ['pale_green_grass', 'dark_green_grass', 'dark_green_grass_with_seedling', 'dark_green_grass_with_budding', 'dirt'],
    'dry_dirt': ['dark_green_grass', 'dark_green_grass_with_seedling', 'dark_green_grass_with_budding'],
    'dry_dirt_with_crack': ['dark_green_grass', 'dark_green_grass_with_seedling', 'dark_green_grass_with_budding'],
    'dirt': ['sand', 'sand_with_crack']
}

export const directions = [
    [0, -1],
    [-1, 0],
    [0, 1],
    [1, 0]
]

function createMatrix<T>(rows: number, cols: number, itemProvider: (x: number, y: number) => T): T[][] {
    return Array(rows).fill(undefined).map((_, yIndex) =>
        Array(cols).fill(undefined).map((_, xIndex) => itemProvider(xIndex, yIndex)));
}

export function collapse(state: State): string {
    const unwrappedPossibilities = Array.from(state.possibilities);
    // pick a random block from the possibilities
    return unwrappedPossibilities[Math.floor(Math.random() * state.possibilities.size)];
}

export function waveFunctionCollapse(rows: number, cols: number, textureTypes: string[]) {
    const space: State[][] = createMatrix(rows, cols, () => ({ possibilities: new Set(textureTypes) }));
    // use queue to keep track of the block to collapse
    const queue: [number, number][] = [[0, 0]];
    while (queue.length > 0) {
        const [x, y] = queue.shift()!;
        const block = space[x][y];
        // skip if current block is collapsed
        if (block.possibilities.size === 1) continue;
        // collapse the state
        const collapsedState = collapse(block);
        block.possibilities.clear();
        block.possibilities.add(collapsedState);
        // get blocks to exclude
        const blocksToExcluded = blockExclusionRules[collapsedState];
        if (!blocksToExcluded) continue;
        // propagate changes to nearby block's entropy
        for (const direction of directions) {
            const nextX = x + direction[0];
            const nextY = y + direction[1];
            if (nextX < 0 || nextY < 0 || nextX >= rows || nextY >= cols) {
                continue;
            }
            const neighbourBlock = space[nextX][nextY];
            if (neighbourBlock.possibilities.size > 1) {
                // reduce entropy of neighbour block
                blocksToExcluded.forEach((textureType) => neighbourBlock.possibilities.delete(textureType));
                // enqueue neighbour for next collapse
                queue.push([nextX, nextY])
            }
        }
        // sort the queue each iteration to 
        // make sure we are collapsing the block with lowest entropy
        queue.sort(([x1, y1], [x2, y2]) => {
            return space[x1][y1].possibilities.size - space[x2][y2].possibilities.size
        });
    }
    // unwrap the possiblities into a matrix with settled state.
    return space.map((row) => row.map(block => {
        const possibilities = Array.from(block.possibilities);
        return possibilities[0] 
    }));
}

Applying the wave function collapse function to our rendering scene, we get the following:

function App() {

  // ... skipped

  const space = useMemo(() => waveFunctionCollapse(16, 16, textureTypes), []);

  const grid = useMemo(() => generateGrid(16, 16, (x, y) => ({ 
    x, 
    y,
    textureType: space[x][y]
  })), [space])

  return (
    <Stage
      height={window.innerHeight}
      width={window.innerWidth}
      options={{ resizeTo: window }}>
      {textures
        ? grid.map(({ x, y, textureType }) => (
          <GrassBlock
            x={x}
            y={y}
            texture={textures[textureType]}
          />
        ))
        : null
      }
    </Stage>
  );
}

Thanks to Wave Function Collapse, we now have a realistically distributed randomised terrain! Isn’t that amazing!

Bravo!

Obviously, there are room for improvement to make things smoother when transition from one biome to another ( grass -> sand ). There are few things we could do:

Tweak the probability of collapsing into different type of blocks based on surrounding as right now every possible block share the same probability
Refine the rule set so there are less variation between different blocks

I will leave the door open for your imagination to kick in but for the time being I shall wrap this up!

Stay tune for the next part for more isometric pixel fun!

Reference:

Rebuilding Isometric World

Alex — Mon, 09 Oct 2023 20:53:20 +0000

If you’ve been following my articles for a while, you would have known I have written a little isometric grid demo in pure Javascript.

That approach works well for what I was trying to archive but I am planning on adding more functionality into the website. Hence in this article, let me rebuild the project using Pixi.js and it’s React binding, React Pixi.

If you wanna learn more about the math behind isometric graphics, I suggests you checking out this video for it’s in depth explanation

Awesome asset pack from @dani_maccari !

For starters, I found a great isometric asset pack from itch.io that suits my needs. It includes some fine detailed blocks which would come in handy in some of the future use cases!

Secondly, let’s set up a react project using create-react-app and install the dependencies we need:

npx create-react-app isometric-world --template typescript

cd isometric-world && npm install pixi.js @pixi/react

Now we have our project setup, let’s unzip the assets and place it into the public directory in your project. Doing so allows pixi.js to reference the assets as sprite sheets in later step.

Following React-Pixi Getting Started tutorial, we should have the stage setup like this:

import { BlurFilter } from 'pixi.js';
import { Stage, Container, Sprite, Text } from '@pixi/react';
import { useMemo } from 'react';

export const MyComponent = () =>
{
  const blurFilter = useMemo(() => new BlurFilter(4), []);

  return (
    <Stage>
      <Sprite
        image="https://pixijs.io/pixi-react/img/bunny.png"
        x={400}
        y={270}
        anchor={{ x: 0.5, y: 0.5 }}
      />

      <Container x={400} y={330}>
        <Text text="Hello World" anchor={{ x: 0.5, y: 0.5 }} filters={[blurFilter]} />
      </Container>
    </Stage>
  );
};

Let’s prune some of the codes we don’t need and update the Stage to fill up the available space:

export function App(){
  return (
    <Stage 
      height={window.innerHeight} // set initial height to window.innerHeight
      width={window.innerWidth} // set initial width to window.innerWidth
      options={{ resizeTo: window }} // resize to window whenever size changes
    >
    </Stage>
  );
};

With the stage ready, it’s time to bring the blocks in! As mentioned, I am gonna load the sprites with Sprite Sheets. The sprite sheets from the Tinyblock assets pack are in 18 pixels x 18 pixels, there are total of 10 rows & 10 columns of block which makes the size of the sprite sheets 180pixels x 180pixels!

const atlasData = {
  frames: {
    pale_green_grass: {
      // the location of the block
      // located at top left corner with (0, 0) 
      // with a size of 18 x 18 pixels 
      frame: { x: 0, y: 0, w: 18, h: 18 },
      sourceSize: { w: 18, h: 18 },
      spriteSourceSize: { x: 0, y: 0, w: 18, h: 18 }
    },
  },
  meta: {
    // renamed one of the sprite sheets into `structural_blocks.png`
    // and placed it in `public/sprites`
    image: `${process.env.PUBLIC_URL}/sprites/structural_blocks.png`,
    format: 'RGBA8888',
    size: { w: 180, h: 180 },
    // scale is 1:1
    scale: "1",
  },
};

export function App(){
  const [textures, setTextures] = useState<utils.Dict<Texture<Resource>>>();
  useEffect(() => {
    const spritesheet = new Spritesheet(
      BaseTexture.from(atlasData.meta.image, { scaleMode: SCALE_MODES.NEAREST }),
      atlasData
    );
    spritesheet.parse().then(setTextures)
  }, []);

  // ... render bits
};

Loading Sprite Sheets is an async operation, we have to useState and set the resulting textures into state.

To draw the resulting texture onto the screen, we need to wire the texture into the sprite.

function App() {

  const [textures, setTextures] = useState<utils.Dict<Texture<Resource>>>();
  useEffect(() => {
    const spritesheet = new Spritesheet(
      BaseTexture.from(atlasData.meta.image, { scaleMode: SCALE_MODES.NEAREST }),
      atlasData
    );
    spritesheet.parse().then(setTextures)
  }, []);

  return (
    <Stage
      height={window.innerHeight}
      width={window.innerWidth}
      options={{ resizeTo: window }}>
      {textures
        ? <Sprite
            texture={textures['pale_green_grass']}
            scale={4} // scale into 4x
            anchor={{ x: 0.5, y: 0.5 }} // the anchor point would be center of the sprite
            x={36} // 72 / 2 = 36 so sprite is aligned in the middle
            y={36} 
          /> 
        : null
      }
    </Stage>
  );
}

With everything setup properly, this should appear in your browser window!

A tiny grass block yeh!!!

Looking back at my original repository, I have them line up in an isometric fashion with 16 x 16 pattern. Let’s apply the same principal in here. To do so, I wrote some utils functions that would come in handy

import { matrix, multiply } from "mathjs";

type Block = {
    x: number
    y: number
}

export function screen_to_isometric(x: number, y: number) {
    // the weights as explanined in the youtube video
    const isometric_weights = matrix([
        [0.5, 0.25],
        [-0.5, 0.25]
    ]);

    // coordinatex times the size of the block 18 * 4 = 72
    // as it's scaled 4x
    const coordinate = matrix([
        [x * 72, y * 72]
    ]);

    const [isometricCoordinate] = multiply(coordinate, isometricWeights).toArray();
    return isometricCoordinate as number[];
}

export function generateGrid<T extends Block = Block>(
    rows: number, 
    cols: number, 
    blockProvider: (x: number, y: number) => T) {
    const grid: T[] = [];
    for (let i = 0; i < rows; i++) {
        for (let j = 0; j < cols; j++) {
            grid.push(blockProvider(i, j));
        }
    }
    return grid;
}

function App() {

  // ... texture loading code

  // generate the grid using utils method
  const grid = useMemo(() => generateGrid(16, 16, (x, y) => ({ x, y })), [])

  return (
    <Stage
      height={window.innerHeight}
      width={window.innerWidth}
      options={{ resizeTo: window }}>
      {textures
        ? grid.map(({ x, y }) => {
          // convert the screen coordinate to isometric coordinate
          const [isometric_x, isometric_y] = screen_to_isometric(x , y);
          return (
            <Sprite
              texture={textures["pale_green_grass"]}
              x={isometric_x + window.innerWidth / 2} // center horizontally
              y={isometric_y + window.innerHeight / 4} // align the y axis to one fourth of the screen
              anchor={{ x: 0, y: 0 }}
            />
          )
        })
        : null
      }
    </Stage>
  );
}

A perfect green plane should now appear on your screen!

we are very close to replicating our existing website!

The next step would be to replicate the wave motion as seen on the top of the article. To do that, we would need to useTick hook from React-Pixi to update the y-axis of corresponding block on each animation frame. In order to do that, we have to extract the sprite into it’s own component.

type GrassBlockProps = {
  x: number
  y: number
  texture: Texture<Resource>
}

function GrassBlock({ x, y, texture }: GrassBlockProps) {
  const [isometric_x, isometric_y] = useMemo(() => screen_to_isometric(x, y), [x, y])
  const [elevation, setElevation] = useState(0);
  const [timeElapsed, setTimeElapsed] = useState(0);
  useTick((_, ticker) => {
    // save elapsed time
    setTimeElapsed(timeElapsed + ticker.deltaMS / 500);
    // apply cosine function to elapsed time to create a wave form
    setElevation(16 * Math.cos(timeElapsed - x))
  });
  return (
    <Sprite
      texture={texture}
      x={isometric_x + window.innerWidth / 2}
      y={isometric_y + window.innerHeight / 4 + elevation}
      anchor={{ x: 0, y: 0 }}
    />
  )
}

And update the stage with the new component

function App() {

  //... 

  return (
    <Stage
      height={window.innerHeight}
      width={window.innerWidth}
      options={{ resizeTo: window }}>
      {textures
        ? grid.map(({ x, y }) => (
          <GrassBlock
            x={x}
            y={y}
            texture={textures["pale_green_grass"]}
          />
        ))
        : null
      }
    </Stage>
  );
}

Ta da! There you have it isometric grid replicated with pixi.js + React pixi.

Like I mentioned this is going to be the end of the conversion from vanilla JS to Pixi.js. I hope you enjoyed the content and find this interesting!

I am also open for hire on Fiverr! If you like what you see and think my skills is what you need, feel free to send me a message there or on my Twitter (X): https://twitter.com/sheunglaili!

Thanks again for watching!

React Virtualisation from scratch

Alex — Fri, 06 Oct 2023 21:27:20 +0000

I am open for hire on Fiverr! If you think my skills could be of use, please ping me a message here!

If you have been using React for awhile, you may have heard of the infamous virtualisation library react-window or it's predecessor react-virtualized

Both of the library aims to help developer to render large list of tabular data efficiently. You may ask why virtualise it when you can just do the following

type LargeListItem = {
   id: string
   content: string
}

function ComponentA() {
   // .. a very large list
   const largeList: LargeListItem[] = []; 
   return (
      <ul> 
        {largeList.map((item) => (
            <li key={item.id}>{item.content}</li>
        ))}
      </ul>
   )
}

that looks pretty efficient to me, doesn't it?

For a list with small size of number, that's a total valid option. But imagine when there is 50,000 item in the list, React will have to render all of 50,000 components even majority of them will be out of the screen. Not only does it wasted the processing power and it also sacrificed the render ing time for zero benefit.

So how can we render long list of item efficiently?

Worry not, Virtualisation comes to rescue!

If you have played Minecraft before, you would realise not everything are rendered on your map. Blocks are only rendered when your sight reaches it, virtualisation works the same by only render what you would see on your window instead of everything.

The same technique are used in lots of online tool, e.g: Miro, Figma, Google Maps ... e.t.c as there are many components to render on the board usually but majority are not needed when user's focus is only on part of the app.

Enough said, Let's build it from scratch!

Virtualised Whiteboard

The idea is very simple, anything the user viewport touches we rendered, don't render if not.

I bounded the content with a larger rectangle but in reality it can be infinite - just like Minecraft.

Talk is cheap, let's see some code. For this demo, I am using Next.js

User viewport

Firstly, let's look at locating the user viewport which is the small rectangle in the diagram above.

"use client";
import type { PropsWithChildren } from "react";
import { cloneElement, isValidElement, useState, useCallback } from "react";

export function Viewport({ children }: PropsWithChildren) {
    return (
        <div className="h-screen w-screen overflow-scroll">
                {children}
        </div>
    )
}

In this component, we set the dimension to fill the screen and render the child which would be the whiteboard where the content should be render. We also allow viewport to scroll as it's guaranteed the whiteboard would be larger the viewport.

For simplicity, let's assume the whiteboard are 10000px * 10000px in size instead of infinite. In that case, implementation of the whiteboard would be very simple.

"use client";

export function Whiteboard() {
    return (<div className="w-[10000px] h-[10000px]"/>)
}

then we wire the components up,

import { Viewport } from "./components/viewport";
import { Whiteboard } from "./components/whiteboard";

export default function Home() {
  return (
    <Viewport>
      <Whiteboard/>
    </Viewport>
  )
}

There you have it you very own virtualised whiteboard!

Hmm... a little underwhelming is it? And Where's the virtualisation !!???

Let's make something to render on the whiteboard to add some colours to it!

type MemoProps = {
    bgColour: string
}

export function Memo({ bgColour }: MemoProps) {
    return (
        <div 
            className={`drop-shadow-md rounded`} 
            style={{
                height: 48,
                width: 48,
                backgroundColor: bgColour
            }}
        />
    )
}

Memo Component with random background colour. Let's render 10000 memos and put it on to the whiteboard.

"use client";

import { Memo } from "./memo";

const BACKGROUND_COLOURS = ['#fca5a5', '#fb923c', '#fde047', '#bef264', '#6ee7b7', '#7dd3fc', '#d8b4fe']

function randomHexColour() {
  return BACKGROUND_COLOURS[Math.floor(Math.random() * BACKGROUND_COLOURS.length)];
}

const MEMOPoistions = Array(10000).fill(0).map((_, idx) => ({
    id: idx,
    x: Math.random() * 10000,
    y: Math.random() * 10000,
    bgColour: randomHexColour()
}))

export function Whiteboard() {
    return (
        <div className="w-[10000px] h-[10000px] relative">
            {MEMOPoistions.map(({id, bgColour, x, y }) => (
                <div
                    key={id}
                    className="absolute"
                    style={{
                        top: y,
                        left: x
                    }}
                >
                    <Memo bgColour={bgColour} />
                </div>
            ))}
        </div>
    )
}

Looks colourful! But wait....

It takes close to 400ms for one render !? Imagine how many time will be wasted when you have to update content (state) of the memo? Let's virtualise it to save some resource!

Virtualisation

To work out what to render or not, we will have to figure out what are overlapping with viewport.

Let's start by calculating the bounding rectangle of the viewport and pass it to the child.

type ViewportRenderArgs = {
    viewportHeight: number
    viewportWidth: number
    viewportTop: number
    viewportLeft: number
}

type ViewportProps = {
    render: (args: ViewportRenderArgs) => ReactNode
}

export function Viewport({ render }: ViewportProps) {
    // callback reference for calculating viewport height & view
    const [viewportDimensions, setViewportDimensions] = useState({ height: 0, width: 0 });
    const [viewportLocation, setViewportLocation] = useState({ top: 0, left: 0 })

    const calculateViewportDimensions = useCallback((el: HTMLDivElement) => {
        setViewportDimensions({
            height: el.clientHeight,
            width: el.clientWidth
        });
    }, [])

    const onScroll = useCallback((evt: React.UIEvent<HTMLDivElement>) => {
        const el = evt.target;
        if (el instanceof HTMLDivElement) {
            setViewportLocation({ top: el.scrollTop, left: el.scrollLeft });
        }
    }, []);

    return (
        <div
            ref={calculateViewportDimensions}
            onScroll={onScroll}
            className="h-screen w-screen overflow-scroll">
            {/* render children with renderProps and pass in viewport constraints */}
            {render({
                viewportHeight: viewportDimensions.height,
                viewportWidth: viewportDimensions.width,
                viewportLeft: viewportLocation.left,
                viewportTop: viewportLocation.top
            })}
        </div>
    )
}

We also changed to use renderProps instead of children as React document suggests not to use cloneElement to override props.

Now that the whiteboard component know the size of the viewport and also the position of it. We can find out what memo are overlapping with the viewport using a data structure called R-tree which is optimised to look for overlapping rectangle!

There's a great library call rbush written by mourner which suits our purpose perfectly! Please do give a star to the repository if you like!

we can then utilise this library to look for the memo we should render!

The following is what the new code for the whiteboard looks like:

type Memo = {
    id: string
    bgColour: string
    x: number
    y: number
}

type WhiteboardProps = {
    viewportHeight: number
    viewportWidth: number
    viewportTop: number
    viewportLeft: number
    MEMOs: Memo[]
}

type BoundingBox = {
    minX: number 
    minY: number
    maxX: number
    maxY: number
}

type MemoMetadata = {
    id: string
    bgColour: string
}

export function Whiteboard({
    viewportHeight,
    viewportWidth,
    viewportTop,
    viewportLeft,
    MEMOs,
}: WhiteboardProps) {

    const rtree = useMemo(() => {
        const anchors = []
        for (const memo of MEMOs) {
            anchors.push({
                minX: memo.x,
                minY: memo.y,
                maxX: memo.x + 48, // memo left position plus it's width
                maxY: memo.y + 48, // memo top position plus it's height
                id: memo.id,
                bgColour: memo.bgColour
            })
        }
        const rbush = new Rbush<BoundingBox & MemoMetadata>();
        return rbush.load(anchors);
    }, [MEMOs]);

    const visibleMEMOs = useMemo(() => {
        // search for memos that overlapped with viewport
        return rtree.search({
            minX: viewportLeft,
            minY: viewportTop,
            maxX: viewportWidth + viewportLeft,
            maxY: viewportHeight + viewportTop,
        })
    }, [rtree, viewportHeight, viewportLeft, viewportTop, viewportWidth])

    return (
        <div className="w-[10000px] h-[10000px] relative">
            {visibleMEMOs.map(({ id, bgColour, minX, minY }) => (
                <div
                    key={id}
                    className="absolute"
                    style={{
                        top: minY,
                        left: minX
                    }}
                >
                    <Memo bgColour={bgColour}/>
                </div>
            ))}
        </div>
    )
}

And finally extract the Memo positions and metadata to parent component so it don't re-generate the position every re-render.

export default function Home() {

  const MEMOs = useMemo(() => Array(10000).fill(0).map(() => ({
    id: nanoid(),
    x: Math.random() * 10000,
    y: Math.random() * 10000,
    bgColour: randomHexColour()
  })), []);

  return (
    <Viewport
      render={(viewportArgs) => (
        <Whiteboard
          MEMOs={MEMOs}
          {...viewportArgs}
        />
      )}
    />
  )
}

Look Mum, it's virtualising!!!

Due to the nature of rendering subset of components instead of all of them, the rendering hugely improved from 400ms to 140ms! And not to mention the benefit it brings when we introduce more interactivity and state update to the app, I see this as an absolute win!

As you might see, the app still looks a bit laggy even with the performance boost. There's number of trade off you could do in order to facilitate the rendering process:

using flatbush library instead of rbush which optimise the statically placed element, from the benchmark in the repository it could boost up to 5x the performance of rbush.
increase the bounding box of viewport so some buffer memo will be rendered even though not visible in viewport to smoothen the scroll.

Conclusion

Thank you for sticking with me, I hope you enjoyed and find this article useful. This is the technique used in my website: https://moosic.pro - a Piano MIDI visualiser & recorder, please feel free to check it out if you're interested.

I am also open for hire on Fiverr, so if you think my skills could be of use, please don't hesitate to send a message there!

There's lot more I can add but I am gonna stop here.

Here's something for you to think about

how can I alter this so the canvas can be infinite ?
how to improve the scroll with drag scroll?

Feel free to checkout the repository

sheunglaili / virtualised-whiteboard

Virtualised Whiteboard

Source code for the article written at: https://dev.to/sheunglaili/react-virtualisation-from-scratch-16g7

Getting started

git clone https://github.com/sheunglaili/virtualised-whiteboard

cd /virtualised-whiteboard
npm install 
npm run dev

Go to http://localhost:3000 and enjoy!

Acknowledgement

https://github.com/mourner/rbush

View on GitHub

and play around with it.

If this article get more than 100 reactions, I might continue and add functionality like dynamically place memo anywhere on the whiteboard!