sayebabu/DEV
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

tp1 4.1

Browse Source
This commit is contained in:
Simon SAYE BABU 2024-01-26 15:23:26 +01:00
parent 4203ea31aa
commit 0d6ede82fe
5 changed files with 281 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.vscode/settings.json vendored
View File

@ -2,6 +2,8 @@
"java.project.referencedLibraries": [ "java.project.referencedLibraries": [
"lib/**/*.jar", "lib/**/*.jar",
"DEV3.1/BDD_java/mariadb-java-client-3.2.0.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"
] ]
} }

65
DEV4.1/tp1/app.js Normal file
View File

@ -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)

46
DEV4.1/tp1/index.html Normal file
View File

@ -0,0 +1,46 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1,witdh=device-width">
<title>Fourmi de Langton</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
<style>
canvas {
position : absolute ;
top : 0;
left : 0;
z-index : -1;
}
.control {
position : absolute ;
top : 0;
left : 0;
width : auto;
}
</style>
</head>
<body>
<div class="control m-6 has-text-centered">
<h4 class="has-text-primary-dark title is-4">
Fourmi de Langton
</h4>
<nav class="m-3">
<button class="button" id="next-move">Next</button>
<button class="button" id="autoplay">Auto</button>
<button class="button" id="plus-100">+100</button>
</nav>
<p class="mb-6 is-size-7">
Nombre de mouvements : <span id="move-value"></span>
</p>
</div>
<canvas></canvas>
<script type="module" src="app.js"></script>
</body>
</html>

68
DEV4.1/tp1/modules/Ant.js Normal file
View File

@ -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;

99
DEV4.1/tp1/modules/langton-renderer-canvas2d.js Normal file
View File

@ -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;