TP01, TP02 & TP03EX01
This commit is contained in:
73
TP01/EX1/app.js
Normal file
73
TP01/EX1/app.js
Normal file
@@ -0,0 +1,73 @@
|
||||
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 BTN_RESET_ID = 'reset';
|
||||
const MOVE_VAL_ID = 'move-value';
|
||||
const BTN_PLUS_100_ID = 'plus-100';
|
||||
|
||||
|
||||
|
||||
|
||||
let autoplayInterval;
|
||||
let auto=false;
|
||||
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));
|
||||
|
||||
function boucle() {
|
||||
ant.moveForward();
|
||||
updateView(ant,canvas,options)
|
||||
if (auto === true){
|
||||
setTimeout(boucle, STEP_INTERVAL);
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById(BTN_AUTOPLAY_ID).addEventListener('click', () => {
|
||||
auto = !auto;
|
||||
boucle();
|
||||
});
|
||||
|
||||
|
||||
document.getElementById(BTN_PLUS_100_ID).addEventListener('click', () => {
|
||||
for (let i=0; i<100; i++){
|
||||
ant.moveForward();
|
||||
}
|
||||
updateView(ant,canvas,options)
|
||||
});
|
||||
|
||||
document.getElementById(BTN_NEXT_MOVE_ID).addEventListener('click', () => {
|
||||
ant.moveForward();
|
||||
updateView(ant,canvas,options)
|
||||
})
|
||||
|
||||
document.getElementById(BTN_RESET_ID).addEventListener('click', () => {
|
||||
ant.reset();
|
||||
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,1)
|
||||
47
TP01/EX1/index.html
Normal file
47
TP01/EX1/index.html
Normal file
@@ -0,0 +1,47 @@
|
||||
<!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>
|
||||
<button class="button" id="reset">reset</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>
|
||||
86
TP01/EX1/modules/Ant.js
Normal file
86
TP01/EX1/modules/Ant.js
Normal file
@@ -0,0 +1,86 @@
|
||||
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);
|
||||
}
|
||||
|
||||
reset() {
|
||||
this.direction = 0;
|
||||
this.x = Math.floor(this.w/2);
|
||||
this.y = Math.floor(this.h/2);
|
||||
this.state = 0;
|
||||
this.tiles.forEach(el=>el.fill(0));
|
||||
}
|
||||
|
||||
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() {
|
||||
// TODO
|
||||
this.direction = (this.direction+90)%360;
|
||||
}
|
||||
|
||||
rotateLeft() {
|
||||
// TODO
|
||||
this.direction = (this.direction+270)%360;
|
||||
}
|
||||
|
||||
computeNextState()
|
||||
{
|
||||
// TODO
|
||||
if (this.tiles[this.x][this.y]===1){ //noir
|
||||
if (this.state ===1){
|
||||
this.state = 0;
|
||||
this.tiles[this.x][this.y] = 0;
|
||||
}
|
||||
else{
|
||||
this.rotateLeft();
|
||||
this.tiles[this.x][this.y] = 0;
|
||||
}
|
||||
}
|
||||
else{ // blanc
|
||||
if (this.state ===1){
|
||||
this.rotateRight();
|
||||
this.tiles[this.x][this.y] = 1;
|
||||
}
|
||||
else{
|
||||
this.state = 1;
|
||||
this.tiles[this.x][this.y] = 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default Ant;
|
||||
99
TP01/EX1/modules/langton-renderer-canvas2d.js
Normal file
99
TP01/EX1/modules/langton-renderer-canvas2d.js
Normal 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;
|
||||
50
TP01/EX3/array.html
Normal file
50
TP01/EX3/array.html
Normal file
@@ -0,0 +1,50 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="initial-scale=1,witdh=device-width">
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
|
||||
|
||||
<script src="graph.js" type="text/javascript"></script>
|
||||
<script>
|
||||
window.onload = (()=>{
|
||||
let array = Array.from({length: 15}, () => -10 + Math.floor(Math.random() * 21));
|
||||
|
||||
|
||||
|
||||
graph('graph1', array)
|
||||
graph('graph2', array.map(function(nombre){return nombre+3}))
|
||||
graph('graph3', array.slice().sort((a,b) => (a-b)))
|
||||
graph('graph4', array.filter(function(nombre){return (nombre >= 0)}))
|
||||
})
|
||||
</script>
|
||||
</head>
|
||||
<body class="m-6">
|
||||
<main class="container">
|
||||
<section class="columns is-multiline">
|
||||
|
||||
<div class="column is-6">
|
||||
<h2 class="title is-2">Simple Array</h2>
|
||||
<canvas id="graph1" width="500" height="400"></canvas>
|
||||
</div>
|
||||
|
||||
<div class="column is-6">
|
||||
<h2 class="title is-2">Add 3 (using map)</h2>
|
||||
<canvas id="graph2" width="500" height="400"></canvas>
|
||||
</div>
|
||||
|
||||
<div class="column is-6">
|
||||
<h2 class="title is-2">Sorted</h2>
|
||||
<canvas id="graph3" width="500" height="400"></canvas>
|
||||
</div>
|
||||
|
||||
<div class="column is-6">
|
||||
<h2 class="title is-2">Filtered (positives values)</h2>
|
||||
<canvas id="graph4" width="500" height="400"></canvas>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
34
TP01/EX3/graph.js
Normal file
34
TP01/EX3/graph.js
Normal file
@@ -0,0 +1,34 @@
|
||||
"use strict";
|
||||
|
||||
const colors = [
|
||||
'#00429d', '#204fa3', '#325da9', '#406aaf', '#4e78b5', '#5a86bb',
|
||||
'#6694c1', '#73a2c6', '#80b1cc', '#8ebfd1', '#9dced6', '#addcda',
|
||||
'#c0eade', '#d8f6e1', '#ffffe0'
|
||||
]
|
||||
|
||||
function graph(canvasId, array) {
|
||||
if (array.length == 0) {
|
||||
throw "array.length == 0"
|
||||
}
|
||||
|
||||
var min = array.reduce(function(a, b) { return (a < b)? a: b; })
|
||||
var max = array.reduce(function(a, b) { return (a < b)? b: a; })
|
||||
|
||||
var canvas = document.getElementById(canvasId)
|
||||
var context = canvas.getContext("2d")
|
||||
context.clearRect(0, 0, canvas.width, canvas.height)
|
||||
|
||||
context.beginPath()
|
||||
context.strokeStyle = "black"
|
||||
context.moveTo(0, canvas.height / 2)
|
||||
context.lineTo(canvas.width, canvas.height / 2)
|
||||
context.stroke()
|
||||
|
||||
array.forEach(function(v, i) {
|
||||
|
||||
context.fillStyle = colors[(i) % colors.length]
|
||||
context.fillRect((i + 0.1) * canvas.width / array.length, canvas.height / 2, 0.8 * canvas.width / array.length, v * canvas.height / (min - max) / 2)
|
||||
context.strokeText(v, (i + 0.4)* canvas.width / array.length, canvas.height /10)
|
||||
})
|
||||
}
|
||||
|
||||
59
TP01/EX3/minmax.html
Normal file
59
TP01/EX3/minmax.html
Normal file
@@ -0,0 +1,59 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="http://www.iut-fbleau.fr/css/tacit.css">
|
||||
</head>
|
||||
<body class="m-6">
|
||||
<main class="container">
|
||||
<h2 class="title is-2">Random Array</h2>
|
||||
<div id="line"></div>
|
||||
|
||||
<h2 class="title is-2">Min/Max</h2>
|
||||
<p>
|
||||
Min : <span id="min"></span>
|
||||
</p>
|
||||
<p>
|
||||
Max : <span id="max"></span>
|
||||
</p>
|
||||
</main>
|
||||
<script>
|
||||
|
||||
function getRandomArray(size,inf,max)
|
||||
{
|
||||
// TODO
|
||||
let i;
|
||||
let array = [];
|
||||
for (i=0; i<size; i++){
|
||||
let x = Math.floor(Math.random() * (max - inf + 1) + inf);
|
||||
array[i] = x;
|
||||
}
|
||||
return array;
|
||||
}
|
||||
|
||||
function minmax(array)
|
||||
{
|
||||
// TODO
|
||||
if (array.length >= 0){
|
||||
return array.reduce(function(resultat, nombre) {
|
||||
return{
|
||||
'min': Math.min(resultat.min, nombre),
|
||||
'max': Math.max(resultat.max, nombre)
|
||||
};
|
||||
},
|
||||
{
|
||||
'min': Number.MAX_SAFE_INTEGER,
|
||||
'max': Number.MIN_SAFE_INTEGER
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
let array = getRandomArray(50,-100,100)
|
||||
let minAndMax = minmax(array)
|
||||
|
||||
document.getElementById("line").textContent = array
|
||||
document.getElementById('min').textContent = minAndMax.min
|
||||
document.getElementById('max').textContent = minAndMax.max
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user