React App

├── public ├── robots.txt ├── favicon.ico ├── logo192.png ├── logo512.png ├── assets │ ├── img │ │ ├── sprites │ │ │ └── ants.png │ │ └── tileset │ │ │ └── MainLev2.0.png │ └── maps │ │ └── AntMap.json ├── manifest.json └── index.html ├── src ├── setupTests.js ├── App.test.js ├── App.js ├── index.css ├── reportWebVitals.js ├── index.js ├── App.css ├── components │ ├── AntStates.js │ ├── MapRenderer.js │ ├── AntRenderer.js │ ├── AntSimulation.js │ └── Ant.js └── logo.svg ├── .gitignore ├── package.json ├── LICENSE.md └── README.md /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cfrBernard/ant-colony-optimization/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cfrBernard/ant-colony-optimization/HEAD/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cfrBernard/ant-colony-optimization/HEAD/public/logo512.png -------------------------------------------------------------------------------- /public/assets/img/sprites/ants.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cfrBernard/ant-colony-optimization/HEAD/public/assets/img/sprites/ants.png -------------------------------------------------------------------------------- /public/assets/img/tileset/MainLev2.0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cfrBernard/ant-colony-optimization/HEAD/public/assets/img/tileset/MainLev2.0.png -------------------------------------------------------------------------------- /src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | // src/App.js 2 | import React from 'react'; 3 | import AntSimulation from './components/AntSimulation'; 4 | 5 | const App = () => { 6 | return ( 7 |

8 | 9 |

10 | ); 11 | }; 12 | 13 | export default App; 14 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | const root = ReactDOM.createRoot(document.getElementById('root')); 8 | root.render( 9 | 10 | 11 | 12 | ); 13 | 14 | // If you want to start measuring performance in your app, pass a function 15 | // to log results (for example: reportWebVitals(console.log)) 16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 17 | reportWebVitals(); 18 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/components/AntStates.js: -------------------------------------------------------------------------------- 1 | const AntStates = { 2 | DEATH: 'death', 3 | IDLE: 'idle', 4 | IDLE_FOOD: 'idle_food', 5 | WALK: 'walk', 6 | WALK_FOOD: 'walk_food' 7 | }; 8 | 9 | const AntAnimations = { 10 | [AntStates.DEATH]: { 11 | frameCount: 8, 12 | frameDelay: 3, 13 | }, 14 | [AntStates.IDLE]: { 15 | frameCount: 8, 16 | frameDelay: 10, 17 | }, 18 | [AntStates.IDLE_FOOD]: { 19 | frameCount: 8, 20 | frameDelay: 10, 21 | }, 22 | [AntStates.WALK]: { 23 | frameCount: 8, 24 | frameDelay: 5, 25 | }, 26 | [AntStates.WALK_FOOD]: { 27 | frameCount: 8, 28 | frameDelay: 5, 29 | } 30 | }; 31 | 32 | export { AntStates, AntAnimations }; 33 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ant-colony-optimization", 3 | "version": "0.2.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.17.0", 7 | "@testing-library/react": "^13.4.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "react": "^18.3.1", 10 | "react-dom": "^18.3.1", 11 | "react-scripts": "5.0.1", 12 | "web-vitals": "^2.1.4" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "react-scripts build", 17 | "test": "react-scripts test", 18 | "eject": "react-scripts eject" 19 | }, 20 | "eslintConfig": { 21 | "extends": [ 22 | "react-app", 23 | "react-app/jest" 24 | ] 25 | }, 26 | "browserslist": { 27 | "production": [ 28 | ">0.2%", 29 | "not dead", 30 | "not op_mini all" 31 | ], 32 | "development": [ 33 | "last 1 chrome version", 34 | "last 1 firefox version", 35 | "last 1 safari version" 36 | ] 37 | }, 38 | "devDependencies": { 39 | "@babel/plugin-proposal-private-property-in-object": "^7.21.11" 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | # MIT License 2 | 3 | ### Copyright (c) 2024 C. Bernard 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/components/MapRenderer.js: -------------------------------------------------------------------------------- 1 | class MapRenderer { 2 | constructor(ctx, mapTileset, tileWidth, tileHeight) { 3 | this.ctx = ctx; 4 | this.mapTileset = mapTileset; 5 | this.tileWidth = tileWidth; 6 | this.tileHeight = tileHeight; 7 | this.offscreenCanvas = document.createElement('canvas'); 8 | this.offscreenCtx = this.offscreenCanvas.getContext('2d'); 9 | } 10 | 11 | drawTile(x, y, tileId) { 12 | const tilesetX = (tileId % (this.mapTileset.width / this.tileWidth)) * this.tileWidth; 13 | const tilesetY = Math.floor(tileId / (this.mapTileset.width / this.tileWidth)) * this.tileHeight; 14 | 15 | this.offscreenCtx.drawImage( 16 | this.mapTileset, 17 | tilesetX, tilesetY, this.tileWidth, this.tileHeight, 18 | x, y, this.tileWidth, this.tileHeight 19 | ); 20 | } 21 | 22 | drawMap(mapData) { 23 | mapData.layers.forEach(layer => { 24 | if (layer.type === "tilelayer") { 25 | layer.data.forEach((tileId, index) => { 26 | if (tileId !== 0) { 27 | const x = (index % mapData.width) * this.tileWidth; 28 | const y = Math.floor(index / mapData.width) * this.tileHeight; 29 | this.drawTile(x, y, tileId - 1); 30 | } 31 | }); 32 | } 33 | }); 34 | } 35 | 36 | renderMapToCache(mapData) { 37 | this.offscreenCanvas.width = mapData.width * this.tileWidth; 38 | this.offscreenCanvas.height = mapData.height * this.tileHeight; 39 | this.drawMap(mapData); 40 | } 41 | } 42 | 43 | export default MapRenderer; 44 | -------------------------------------------------------------------------------- /src/components/AntRenderer.js: -------------------------------------------------------------------------------- 1 | import { AntStates } from './AntStates'; 2 | 3 | class AntRenderer { 4 | constructor(ctx, spriteSheet, frameWidth, frameHeight, scaleFactor = 0.25) { 5 | this.ctx = ctx; 6 | this.spriteSheet = spriteSheet; 7 | this.frameWidth = frameWidth; 8 | this.frameHeight = frameHeight; 9 | this.scaleFactor = scaleFactor; 10 | } 11 | 12 | drawAnt(x, y, hasFood, state, frameIndex) { 13 | let row; 14 | 15 | switch (state) { 16 | case AntStates.DEATH: 17 | row = 0; 18 | break; 19 | case AntStates.IDLE: 20 | row = 1; 21 | break; 22 | case AntStates.IDLE_FOOD: 23 | row = 2; 24 | break; 25 | case AntStates.WALK: 26 | row = 3; 27 | break; 28 | case AntStates.WALK_FOOD: 29 | row = 4; 30 | break; 31 | default: 32 | row = 1; 33 | break; 34 | } 35 | 36 | const sx = frameIndex * this.frameWidth; 37 | const sy = row * this.frameHeight; 38 | 39 | const scaledWidth = this.frameWidth * this.scaleFactor; 40 | const scaledHeight = this.frameHeight * this.scaleFactor; 41 | 42 | this.ctx.save(); 43 | this.ctx.translate(x, y); 44 | this.ctx.drawImage( 45 | this.spriteSheet, 46 | sx, sy, 47 | this.frameWidth, this.frameHeight, 48 | -scaledWidth / 2, -scaledHeight / 2, 49 | scaledWidth, scaledHeight 50 | ); 51 | this.ctx.restore(); 52 | } 53 | } 54 | 55 | export default AntRenderer; 56 | 57 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |

32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Ant Simulation 2 | 3 | A simple graphical simulation of ants using React and an HTML5 canvas. This project was designed as a learning exercise to explore concepts like simulation, sprite animation, and canvas interaction. 4 | 5 | ## Features 6 | 7 | - **Basic Ant Simulation:** 8 | - Ants move on a map based on their state (`IDLE`, `WALK`, etc.). 9 | - Interaction with the map: home, food, walls. 10 | - Sprite animations based on ant states. 11 | 12 | - **Graphical Rendering:** 13 | - Map generated from a tileset and a JSON structure (Tiled Map Editor). 14 | - Ants rendered using a sprite sheet and a canvas. 15 | 16 | ## Project Goals 17 | 18 | This project aimed to: 19 | - Learn how to manipulate a canvas within a React environment. 20 | - Work with tilesets and sprite sheets to manage animations. 21 | - Explore basic simulation concepts like pathfinding and state-driven behavior. 22 | 23 | ### Current Limitations 24 | - Pathfinding logic (e.g., A*) is not yet implemented. 25 | - The project is in an early stage and offers only basic functionality. 26 | - No advanced AI or complex behavior is implemented. 27 | 28 | ## Installation and Running 29 | 30 | ### Prerequisites 31 | - Node.js and npm installed on your machine. 32 | 33 | ### Steps 34 | 35 | 1. Clone the repository: 36 | ```bash 37 | git clone https://github.com//ant-simulation.git 38 | cd ant-simulation 39 | 40 | 2. Istall and start dependencies: 41 | ```bash 42 | npm install 43 | npm start 44 | 45 | 3. Open the application in your browser at http://localhost:3000. 46 | 47 | ## Code Structure 48 | - Ant.js: Handles ant logic (states, movement, etc.). 49 | - AntRenderer.js: Renders ants on the canvas based on their state. 50 | - MapRenderer.js: Renders the map using a tileset and map data in JSON format. 51 | - AntSimulation.js: Main React component orchestrating the simulation. 52 | 53 | ## Resources 54 | ### Tileset and sprites: 55 | - assets/maps/AntMap.json: Map structure generated with Tiled Map Editor. 56 | - assets/img/sprites/ants.png: Sprite sheet for ant animations. 57 | - assets/img/tileset/MainLev2.0.png: Tileset used for the map. 58 | 59 | Future Development 60 | While this project is not a priority at the moment, here are some ideas for improvement: 61 | 62 | - Implement a pathfinding algorithm like A*. 63 | - Add more states and behaviors for the ants (e.g., exploration, returning home with food, etc.). 64 | - Refactor the code to make it more modular and easier to extend. 65 | 66 | ## License 67 | This project is available under the MIT License. Feel free to use, modify, and distribute it. 68 | -------------------------------------------------------------------------------- /src/components/AntSimulation.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect, useRef } from 'react'; 2 | import MapRenderer from './MapRenderer'; 3 | import AntRenderer from './AntRenderer'; 4 | import Ant from './Ant'; 5 | 6 | const MAX_ANTS = 1; 7 | 8 | const AntSimulation = () => { 9 | const canvasRef = useRef(null); 10 | const [mapData, setMapData] = useState(null); 11 | const [spriteSheet, setSpriteSheet] = useState(null); 12 | const [ants, setAnts] = useState([]); 13 | const mapRendererRef = useRef(null); 14 | const antRendererRef = useRef(null); 15 | 16 | const createGridFromMapData = (mapData) => { 17 | const grid = Array.from({ length: mapData.height }, () => 18 | Array.from({ length: mapData.width }, () => ({ 19 | isWall: false, 20 | isFood: false, 21 | isHome: false, 22 | })) 23 | ); 24 | 25 | const layers = { Home: 'isHome', Food: 'isFood', Walls: 'isWall' }; 26 | 27 | for (const [layerName, property] of Object.entries(layers)) { 28 | const layer = mapData.layers.find(layer => layer.name === layerName); 29 | if (layer) { 30 | for (let y = 0; y < layer.height; y++) { 31 | for (let x = 0; x < layer.width; x++) { 32 | const tileId = layer.data[y * layer.width + x]; 33 | if (tileId !== 0) { 34 | grid[y][x][property] = true; 35 | } 36 | } 37 | } 38 | } 39 | } 40 | 41 | return grid; 42 | }; 43 | 44 | useEffect(() => { 45 | const img = new Image(); 46 | img.src = 'assets/img/sprites/ants.png'; 47 | img.onload = () => setSpriteSheet(img); 48 | }, []); 49 | 50 | useEffect(() => { 51 | const loadMapData = async () => { 52 | const response = await fetch('assets/maps/AntMap.json'); 53 | const data = await response.json(); 54 | setMapData(data); 55 | }; 56 | loadMapData(); 57 | }, []); 58 | 59 | useEffect(() => { 60 | if (!spriteSheet || !mapData) return; 61 | 62 | const ctx = canvasRef.current.getContext('2d'); 63 | const mapTileset = new Image(); 64 | mapTileset.src = 'assets/img/tileset/MainLev2.0.png'; 65 | 66 | mapTileset.onload = () => { 67 | mapRendererRef.current = new MapRenderer(ctx, mapTileset, 32, 32); 68 | antRendererRef.current = new AntRenderer(ctx, spriteSheet, 124, 137); 69 | 70 | mapRendererRef.current.renderMapToCache(mapData); 71 | 72 | const grid = createGridFromMapData(mapData); 73 | const initialAnts = []; 74 | for (let i = 0; i < MAX_ANTS; i++) { 75 | initialAnts.push(new Ant(mapData, grid)); 76 | } 77 | setAnts(initialAnts); 78 | }; 79 | }, [spriteSheet, mapData]); 80 | 81 | useEffect(() => { 82 | if (!ants.length || !spriteSheet || !mapData) return; 83 | 84 | const animate = () => { 85 | const ctx = canvasRef.current.getContext('2d'); 86 | 87 | ctx.drawImage(mapRendererRef.current.offscreenCanvas, 0, 0); 88 | 89 | ants.forEach(ant => { 90 | ant.update(); 91 | const { x, y, hasFood, state, frameIndex,} = ant.getPosition(); 92 | antRendererRef.current.drawAnt(x, y, hasFood, state, frameIndex,); 93 | }); 94 | 95 | requestAnimationFrame(animate); 96 | }; 97 | 98 | animate(); 99 | }, [ants, spriteSheet, mapData]); 100 | 101 | return