cube-ascii-react

Description

This is a package to create a 3D ASCII cube in React.

🚀🚀You can try it online from your browser 🚀🚀

You can find the package in the npm registry:

🚀🚀 The package is available on npm 🚀🚀

Demo video

demo_video.mp4

Package installation

To install it type npm install cube-ascii-react in your terminal to install it.

Then you can import it in your project with import ParticleSimulator from 'cube-ascii-react'.

Usage

To use it you can simply add the component in your project like this:

import React, {useEffect, useState} from 'react';
import './App.scss';
import {CubeAscii} from './components/CubeAscii';

const App: React.FC = () => {
    const divRef = React.useRef<HTMLDivElement>(null);
    const preTagRef = React.useRef<HTMLPreElement>(null);
    const [isLoaded, setIsLoaded] = useState(false);
    const [useColor, setUseColor] = useState(true);

    const copyToClipboard = async (text: string) => {
        try {
            await navigator.clipboard.writeText(text);
            console.log('Text copied to clipboard');
        } catch (err: unknown) {
            console.error('Failed to copy text: ', err);
        }
    };

    useEffect(() => {
        if (divRef.current) {
            setIsLoaded(true);
        }
    }, [divRef]);
    return (
        <div className={'App'} ref={divRef}>
            {
                isLoaded
                    ? (<>
                            <CubeAscii parentRef={divRef}/>
                        </>
                    )
                    : (
                        <p>Loading...</p>
                    )
            }
        </div>
    );
};

export default App;

or you can change some settings like this:

import React, {useEffect, useState} from 'react';
import './App.scss';
import {CubeAscii} from './components/CubeAscii';

const App: React.FC = () => {
    const divRef = React.useRef<HTMLDivElement>(null);
    const preTagRef = React.useRef<HTMLPreElement>(null);
    const [isLoaded, setIsLoaded] = useState(false);
    const [useColor, setUseColor] = useState(true);

    const copyToClipboard = async (text: string) => {
        try {
            await navigator.clipboard.writeText(text);
            console.log('Text copied to clipboard');
        } catch (err: unknown) {
            console.error('Failed to copy text: ', err);
        }
    };

    useEffect(() => {
        if (divRef.current) {
            setIsLoaded(true);
        }
    }, [divRef]);
    return (
        <div className={'App'} ref={divRef}>
            {
                isLoaded
                    ? (<>
                            <button onClick={() => {
                                setUseColor(!useColor);
                            }}/>
                            <button className={'Button-Copy-Clipboard'}
                                    onClick={async () => copyToClipboard(preTagRef.current!.innerText)}>Copy to clipboard
                            </button>
                            <CubeAscii parentRef={divRef} useColor={useColor} preTagRef={preTagRef}/>
                        </>
                    )
                    : (
                        <p>Loading...</p>
                    )
            }
        </div>
    );
};

export default App;

The component takes 1 to 9 props:

• parentRef - a reference to the parent div of the canvas. It is used to get the size of the canvas.
• screenWidth - the resolution of the cube view in characters.
• screenHeight - the height of the cube view in characters.
• cubeWidthHeight - the width and height of the cube in characters.
• distanceFromCamera - the distance from the camera to the cube.
• framerate - the framerate of the animation.
• useColor - a boolean to use colors or not.
• defaultColor - the default color of the cube when useColor is set to false.
• preTagRef - a reference to the pre tag that contains the cube. You can use it to copy the cube to the clipboard.

You can find the complete example of the project in the GitHub repository here.

Note
Make sure to follow the example: set the parent div of the canvas before instantiating the cube.

GitHub Actions

The project is set up to run the following actions:

• node.js.yml : Runs the tests for the Node.js project.
• eslint.yml : Runs the ESLint linter on the project.
• codeql.yml : Runs the CodeQL linter on the project.
• npm-publish.yml : Publishes the package to npm.

Libraries

React:
https://reactjs.org/docs/getting-started.html

Xo:
https://github.com/xojs/xo
https://github.com/xojs/eslint-config-xo-react
https://github.com/xojs/eslint-config-xo-typescript

ESLint:
https://eslint.org/docs/latest/user-guide/getting-started

GitHub gh-pages:
https://github.com/gitname/react-gh-pages

react-device-detect:
https://www.npmjs.com/package/react-device-detect

Documentation

The Coding Challenge (math and physics):
https://www.youtube.com/watch?v=OAcXnzRNiCY

P5.js:
https://p5js.org/

P5.js React:
https://www.npmjs.com/package/react-p5

Links

Check the source code on

Check the demo on

Check the package on

Contributors

Quentin MOREL :

• @Im-Rises
• https://github.com/Im-Rises