From 0d6ede82fee8c06397f5c634c15fc222527beff9 Mon Sep 17 00:00:00 2001 From: sayebabu Date: Fri, 26 Jan 2024 15:23:26 +0100 Subject: [PATCH] tp1 4.1 --- .vscode/settings.json | 4 +- DEV4.1/tp1/app.js | 65 ++++++++++++ DEV4.1/tp1/index.html | 46 +++++++++ DEV4.1/tp1/modules/Ant.js | 68 +++++++++++++ .../tp1/modules/langton-renderer-canvas2d.js | 99 +++++++++++++++++++ 5 files changed, 281 insertions(+), 1 deletion(-) create mode 100644 DEV4.1/tp1/app.js create mode 100644 DEV4.1/tp1/index.html create mode 100644 DEV4.1/tp1/modules/Ant.js create mode 100644 DEV4.1/tp1/modules/langton-renderer-canvas2d.js diff --git a/.vscode/settings.json b/.vscode/settings.json index 81813dc..ad9fd6a 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -2,6 +2,8 @@ "java.project.referencedLibraries": [ "lib/**/*.jar", "DEV3.1/BDD_java/mariadb-java-client-3.2.0.jar", - "c:\\Users\\simon\\Downloads\\mysql-connector-j-8.2.0.jar" + "c:\\Users\\simon\\Downloads\\mysql-connector-j-8.2.0.jar", + "c:\\Users\\simon\\OneDrive\\Bureau\\school\\info\\hamcrest-core.jar", + "c:\\Users\\simon\\OneDrive\\Bureau\\school\\info\\junit-4.jar" ] } \ No newline at end of file diff --git a/DEV4.1/tp1/app.js b/DEV4.1/tp1/app.js new file mode 100644 index 0000000..fa5859f --- /dev/null +++ b/DEV4.1/tp1/app.js @@ -0,0 +1,65 @@ +import render from "./modules/langton-renderer-canvas2d"; +import Ant from "./modules/Ant.js"; + + +const options = { + antStateColors : ['red','yellow'], + tileStateColors : ['white','black'], + tileSize : 10 +}; + + +// For the view + +const STEP_INTERVAL = 5; +const BTN_AUTOPLAY_ID = 'autoplay'; +const BTN_NEXT_MOVE_ID = 'next-move'; +const MOVE_VAL_ID = 'move-value'; +const BTN_PLUS_100_ID = 'plus-100'; + + + + +let autoplayInterval; +let canvas = document.querySelector("canvas"); + + +canvas.width = window.innerWidth ; +canvas.height = window.innerHeight; + +let ant = new Ant(Math.floor(canvas.width / options.tileSize),Math.floor(canvas.height/options.tileSize)); + +document.getElementById(BTN_AUTOPLAY_ID).addEventListener('click', () => { + if (autoplayInterval) { + return + } + // TODO +}); + + +document.getElementById(BTN_PLUS_100_ID).addEventListener('click', () => { + if (autoplayInterval) { + clearInterval(autoplayInterval); + autoplayInterval = null; + } + // TODO +}); + +document.getElementById(BTN_NEXT_MOVE_ID).addEventListener('click', () => { + if (autoplayInterval) { + clearInterval(autoplayInterval); + autoplayInterval = null; + } + ant.moveForward(); + updateView(ant,canvas,options) +}) + + +function updateView(ant,canvas,options) +{ + document.getElementById(MOVE_VAL_ID).textContent = `${ant.move}`; + render(ant,canvas,options); +} + + +updateView(ant,canvas,options,nbMove) diff --git a/DEV4.1/tp1/index.html b/DEV4.1/tp1/index.html new file mode 100644 index 0000000..6d4e836 --- /dev/null +++ b/DEV4.1/tp1/index.html @@ -0,0 +1,46 @@ + + + + + + + + Fourmi de Langton + + + + + + +
+

+ Fourmi de Langton +

+ + + +

+ Nombre de mouvements : +

+
+ + + + diff --git a/DEV4.1/tp1/modules/Ant.js b/DEV4.1/tp1/modules/Ant.js new file mode 100644 index 0000000..8e5fb40 --- /dev/null +++ b/DEV4.1/tp1/modules/Ant.js @@ -0,0 +1,68 @@ +class Ant { + x = 0; // position + y = 0; + move = 0; + + w = 0; // universe dimensions + h = 0; + + direction = 0; // 0 90 180 270 + state = 0; + tiles = null; + + constructor (w,h) + { + this.tiles = new Array(w).fill(null); + this.tiles.forEach((el,i) => this.tiles[i] = new Array(h).fill(0)); + this.w = w; + this.h = h; + this.x = Math.floor(w/2); + this.y = Math.floor(h/2); + } + + moveForward() + { + switch (this.direction) { + case 0: + this.x = ((this.x + 1) + this.w) % this.w; + break + case 90: + this.y = ((this.y + 1) + this.h) % this.h; + break + case 180: + this.x = ((this.x - 1) + this.w) % this.w; + break + case 270: + this.y = ((this.y - 1) + this.h) % this.h; + break + } + this.move ++; + this.computeNextState(); + } + rotateRight() { + if(this.direction!=270) + { + this.direction += 90; + } + else{ + this.direction = 0; + } + } + + rotateLeft() { + if(this.direction!=0) + { + this.direction -= 90; + } + else{ + this.direction = 270; + } + } + + computeNextState() + { + // TODO + } +} + +export default Ant; diff --git a/DEV4.1/tp1/modules/langton-renderer-canvas2d.js b/DEV4.1/tp1/modules/langton-renderer-canvas2d.js new file mode 100644 index 0000000..1551e5a --- /dev/null +++ b/DEV4.1/tp1/modules/langton-renderer-canvas2d.js @@ -0,0 +1,99 @@ +/** + * render - renders the universe to a 2D canvas. + * + * @param langtonsAnt - the universe. + * @param canvas - The 2D canvas. + * @param options - The rendering options (all optional). + * @returns {undefined} - Nothing is returned. + */ + +function render(langtonsAnt, canvas, options) { + + // Grab our options. + const { + tileStateColors, + antStateColors, + tileSize + } = options; + + + // Drawing style. + const backgroundColor = '#FFFFFF'; + + // Size constants. + const w = canvas.width; + const h = canvas.height; + + // Bounds constants. + const gridSizeW = langtonsAnt.tiles.length; + const gridSizeH = langtonsAnt.tiles[0].length; + + // We're going to draw each square with a given edge size + + const tileSizeW = tileSize//w / gridSizeW ; + const tileSizeH = tileSize //h / gridSizeH ; + + // Get the drawing context. + var ctx = canvas.getContext('2d'); + + // Clear the background. + ctx.fillStyle = backgroundColor; + ctx.fillRect(0, 0, w, h); + + // Draw the grid. + ctx.strokeStyle='#00000011'; + for (let x = 0; x <= gridSizeW; x++) { + ctx.beginPath(); + ctx.moveTo(x * tileSizeW , 0); + ctx.lineTo(x * tileSizeW , h); + ctx.closePath(); + ctx.stroke(); + } + for (let y = 0 ; y <= gridSizeH; y++) { + ctx.beginPath(); + ctx.moveTo(0, y * tileSizeH); + ctx.lineTo(w, y * tileSizeH); + ctx.closePath(); + ctx.stroke(); + } + + + // Start drawing those tiles. + langtonsAnt.tiles.forEach((tileRow,i) => { + tileRow.forEach((tile,j)=>{ + + // Get the tile state index. + + // Skip state zero tiles (i.e. white tiles) + if (tile !== 0) { + // Set the tile colour, defaulting to grey if it is not set. + ctx.fillStyle = tileStateColors[tile] || '#CCCCCC'; + ctx.fillRect(i * tileSizeW + 1, j * tileSizeH +1, tileSizeW - 1, tileSizeH - 1); + } + + }) + }) + + + // Draw the ant. + var antX = langtonsAnt.x * tileSizeW, + antY = langtonsAnt.y * tileSizeH; + const antState = langtonsAnt.state; + + ctx.fillStyle = antStateColors[antState]; + // Tranform before we draw the ant, it makes it easier. + // + ctx.save(); + ctx.translate(antX + tileSizeW/2, antY+tileSizeH/2); + ctx.rotate((langtonsAnt.direction / 180) * Math.PI); + ctx.beginPath(); + ctx.moveTo(-tileSizeW/2, -tileSizeH/2); + ctx.lineTo(tileSizeW/2, 0); + ctx.lineTo(-tileSizeW/2, tileSizeH/2); + ctx.fill(); + ctx.closePath(); + ctx.restore(); +} + + +export default render;