Scribd
Importer
4 vues11 pages

Transformations Interactives sur Canvas

Le document présente une interface HTML pour manipuler des formes géométriques à l'aide de boutons de transformation. Il inclut des matrices représentant des caractères et des formes comme un cercle, un triangle et un rectangle. Les utilisateurs peuvent effectuer des actions telles que la rotation, le redimensionnement et le déplacement des formes sur un canevas.

Transféré par

lklktas
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats DOCX, PDF, TXT ou lisez en ligne sur Scribd
4 vues11 pages

Transformations Interactives sur Canvas

Le document présente une interface HTML pour manipuler des formes géométriques à l'aide de boutons de transformation. Il inclut des matrices représentant des caractères et des formes comme un cercle, un triangle et un rectangle. Les utilisateurs peuvent effectuer des actions telles que la rotation, le redimensionnement et le déplacement des formes sur un canevas.

Transféré par

lklktas
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats DOCX, PDF, TXT ou lisez en ligne sur Scribd

<!

DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Transformations avec Boutons</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
canvas {
border: 1px solid #000;
background-color: #fff;
}
.controls {
margin-left: 20px;
text-align: center;
}
.controls button {
display: block;
margin: 10px auto;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body onload="init();">

<table border=1>
<tr><td rowspan=2><canvas id="gridCanvas" width="700"
height="400"></canvas></td>
<tr><td><canvas id="monCanvas" width="700"
height="400"></canvas></td>
<td><div class="controls">
<button id="rotateLeft">Rotation Gauche (-10°)</button>
<button id="rotateRight">Rotation Droite (+10°)</button>
<button id="scaleUp">Agrandir (+0.1)</button>
<button id="scaleDown">Réduire (-0.1)</button>
<button id="moveLeft">Déplacer Gauche (-10)</button>
<button id="moveRight">Déplacer Droite (+10)</button>
<button id="moveUp">Déplacer Haut (-10)</button>
<button id="moveDown">Déplacer Bas (+10)</button>
<button id="skewX">Inclinaison X (+0.1)</button>
<button id="skewY">Inclinaison Y (+0.1)</button>
<button id="resetTransform">Réinitialiser</button>
</div></td>
</table>

<script>

//ECRIRE KAPTUE TAGNI ARISTIDE SEVERIN


const characters =

{
// Matrice 5x7 pour la lettre A
'A' :
[
[0, 1, 1, 1, 0],
[1, 0, 0, 0, 1],
[1, 0, 0, 0, 1],
[1, 1, 1, 1, 1],
[1, 0, 0, 0, 1],
[1, 0, 0, 0, 1],
[1, 0, 0, 0, 1],
],

'S':
[
[0, 1, 1, 1, 0],
[1, 0, 0, 0, 1],
[1, 0, 0, 0, 0],
[0, 1, 1, 1, 0],
[0, 0, 0, 0, 1],
[1, 0, 0, 0, 1],
[0, 1, 1, 1, 0],
],

'T':
[
[1, 1, 1, 1, 1],
[0, 0, 1, 0, 0],
[0, 0, 1, 0, 0],
[0, 0, 1, 0, 0],
[0, 0, 1, 0, 0],
[0, 0, 1, 0, 0],
[0, 0, 1, 0, 0],
],

'O':
[
[0, 1, 1, 1, 0],
[1, 0, 0, 0, 1],
[1, 0, 0, 0, 1],
[1, 0, 0, 0, 1],
[1, 0, 0, 0, 1],
[1, 0, 0, 0, 1],
[0, 1, 1, 1, 0],
],

'P':
[
[1, 1, 1, 1, 0],
[1, 0, 0, 0, 1],
[1, 0, 0, 0, 1],
[1, 1, 1, 1, 0],
[1, 0, 0, 0, 0],
[1, 0, 0, 0, 0],
[1, 0, 0, 0, 0],
],
};

// FAIRE les panneaus de signalisation


const panneau=
{
// Matrice 16x16 pour un cercle
circle :
[
[0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0],
[0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0],
[0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0],
[0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0],
[0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0],
[0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0],
[0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0],
[0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0],
[0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0],
],

// Matrice 16x16 pour un triangle


triangle :
[
[0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0],
[0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0],
[0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0],
[0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
],

// Matrice 16x16 pour un rectangle


rectangle:
[
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
],
};

// Créer une matrice 128x256 remplie de 0


const grandMatrix = [Link]({ length: 128 }, () =>
Array(256).fill(0));

// Fonction pour copier une matrice dans la grande matrice à


une position donnée
function copyMatrix(source, target, startRow, startCol)
{
for (let i = 0; i < [Link]; i++)
{
for (let j = 0; j < source[i].length; j++)
{
target[startRow + i][startCol + j] = source[i][j];
}
}
}

// Fonction pour insérer une matrice dans une autre


function insererIntoMatrice(target, source, startRow, startCol)
{
for (let i = 0; i < [Link]; i++)
{
for (let j = 0; j < source[i].length; j++)
{
if (target[startRow + i] && target[startRow + i]
[startCol + j] !== undefined)
{
target[startRow + i][startCol + j] = source[i]
[j];
}
}
}
}

// Insérer la lettre A dans le triangle


insererIntoMatrice([Link], characters.A, 5, 5);
insererIntoMatrice([Link], characters.S, 5, 5);

insererIntoMatrice([Link], characters.S, 5, 3);


insererIntoMatrice([Link], characters.T, 5, 7);
insererIntoMatrice([Link], characters.O, 5, 12);
insererIntoMatrice([Link], characters.P, 5, 17);

// Copier les matrices dans la grande matrice


copyMatrix([Link], grandMatrix, 0, 0); // Cercle
en haut à gauche
copyMatrix([Link], grandMatrix, 0, 16); // Triangle
en haut au milieu
copyMatrix([Link], grandMatrix, 0, 32); //
Rectangle en haut à droite

// Fonction pour dessiner la grande matrice sur le canvas avec


un grillage
function drawMotherMatrix()
{
const canvas = [Link]('gridCanvas');
const context = [Link]('2d');
const dotSize = 5; // Taille de chaque point en pixels
const spacing = 1; // Espacement entre les points
const gridColor = '#ccc'; // Couleur du grillage

// Dessiner les points


for (let i = 0; i < [Link]; i++)
{
for (let j = 0; j < grandMatrix[i].length; j++)
{
[Link] = grandMatrix[i][j] === 1 ?
'black' : 'white';
[Link](j * (dotSize + spacing), i *
(dotSize + spacing), dotSize, dotSize);
}
}

// Dessiner le grillage
[Link] = gridColor;
[Link] = 0.5;

// Lignes verticales
for (let x = 0; x <= grandMatrix[0].length; x++)
{
[Link]();
[Link](x * (dotSize + spacing), 0);
[Link](x * (dotSize + spacing),
[Link] * (dotSize + spacing));
[Link]();
}

// Lignes horizontales
for (let y = 0; y <= [Link]; y++) {
[Link]();
[Link](0, y * (dotSize + spacing));
[Link](grandMatrix[0].length * (dotSize +
spacing), y * (dotSize + spacing));
[Link]();
}
}

// Dessiner la grande matrice


drawMotherMatrix();

/*
* Partie consernant la construction de l'habitacle
* Commencer par former un cube à partir des coordonnées géométriques
*/
let transformMatrix = [1, 0, 0, 1, 0, 0]; // Matrice de
transformation par défaut
// Fonction pour dessiner un rectangle avec transformations
function drawRectangle()
{
const canvas = [Link]('monCanvas');
const context = [Link]('2d');

// Effacer le canvas
[Link](0, 0, [Link], [Link]);

// Sauvegarder le contexte actuel


[Link]();

// Appliquer la matrice de transformation


[Link](...transformMatrix);

// Dessiner le rectangle à partir de ses coordonnées


géométriques
// un rectangle est dessiné à partir d'un point quelconque
x, y ---
// Po=(xRect, yRect)

// Puis au point p2=(xRect + widthRect, yRect), il décale


sur la largeur, c'est pourquoi xRect + widthRect

// Ensuite au point p3= xRect + widthRect, yRect +


heightRect,
//il décale sur la largeur, c'est pourquoi xRect +
widthRect
//il décale sur la hauteur, c'est pourquoi yRect +
heightRect

// Après au point p4 = xRect, yRect + heightRect, il décale


sur la hauteur

[Link](); //Commencement du chemin à


tracer
[Link] = "#0000FF"; //remplir la surface du
rectangle avec la couleur bleu
[Link](xRect, yRect);
[Link](xRect + widthRect, yRect);
[Link](xRect + widthRect, yRect + heightRect);
[Link](xRect, yRect + heightRect);
[Link](); // fermeture du chemin à tracer
[Link](); //remplir
[Link](); //tracer

// Restaurer le contexte
[Link]();
}

//programme ici le cube, voir cas du rectangle


function drawCube()
{
const canvas = [Link]('monCanvas');
const context = [Link]('2d');

// Effacer le canvas
[Link](0, 0, [Link], [Link]);

// Sauvegarder le contexte actuel


[Link]();

// Appliquer la matrice de transformation


[Link](...transformMatrix);

[Link](); //Commencement du chemin à


tracer
[Link] = "#AAADA0"; //remplir la surface du
rectangle avec la couleur bleu
[Link](xRect+30, yRect+30);
[Link](xRect + widthRect+80, yRect+30);
[Link](xRect + widthRect, yRect+80 +
heightRect+20);
[Link](xRect+30, yRect + heightRect+20);
[Link](); // fermeture du chemin à tracer
[Link](); //remplir
[Link](); //tracer

// Restaurer le contexte
[Link]();
}

//programme ici le VolantDirectionnel, voir cas du rectangle


function drawVolantDirectionnel()
{

//programme ici le SiegeDuChauffeur, voir cas du rectangle


function drawSiegeDuChauffeur()
{

//Programme tout l'habitacle ici, si tu réussis le cube, continue


avec tout l'habitacle,
//délai d'envoi samedi 15 mars 2025 à 19:00
drawHabitacle()
{

// Fonction pour appliquer une translation


function translate(dx, dy)
{
transformMatrix[4] += dx;
transformMatrix[5] += dy;
}

// Fonction pour appliquer une mise à l'échelle


function scale(sx, sy)
{
transformMatrix[0] *= sx;
transformMatrix[1] *= sy;
transformMatrix[2] *= sx;
transformMatrix[3] *= sy;
}

// Fonction pour appliquer une rotation


function rotate(angle)
{
const rad = (angle * [Link]) / 180;
const cos = [Link](rad);
const sin = [Link](rad);
const newMatrix = [
transformMatrix[0] * cos + transformMatrix[2] * sin,
transformMatrix[1] * cos + transformMatrix[3] * sin,
transformMatrix[0] * -sin + transformMatrix[2] * cos,
transformMatrix[1] * -sin + transformMatrix[3] * cos,
transformMatrix[4],
transformMatrix[5]
];
transformMatrix = newMatrix;
}

// Fonction pour appliquer une inclinaison (skew)


function skew(skx, sky)
{
const newMatrix = [
transformMatrix[0] + transformMatrix[2] * sky,
transformMatrix[1] + transformMatrix[3] * sky,
transformMatrix[0] * skx + transformMatrix[2],
transformMatrix[1] * skx + transformMatrix[3],
transformMatrix[4],
transformMatrix[5]
];
transformMatrix = newMatrix;
}

// Fonction pour réinitialiser la transformation


function resetTransform()
{
transformMatrix = [1, 0, 0, 1, 0, 0];
}

// Initialisation
function init()
{
const canvas = [Link]('monCanvas');
const context = [Link]('2d');
xRect = [Link] / 2 - 50; // Centrer le rectangle
yRect = [Link] / 2 - 37.5;
widthRect = 100; // Largeur du rectangle
heightRect = 75; // Hauteur du rectangle

// Gestion des boutons

[Link]('rotateLeft').addEventListener('click', () => {
rotate(-10);
drawRectangle();
});

[Link]('rotateRight').addEventListener('click', () =>
{
rotate(10);
drawRectangle();
});

[Link]('scaleUp').addEventListener('click', () => {
scale(1.1, 1.1);
drawRectangle();
});

[Link]('scaleDown').addEventListener('click', () => {
scale(0.9, 0.9);
drawRectangle();
});

[Link]('moveLeft').addEventListener('click', () => {
translate(-10, 0);
drawRectangle();
});

[Link]('moveRight').addEventListener('click', () => {
translate(10, 0);
drawRectangle();
});

[Link]('moveUp').addEventListener('click',
() => {
translate(0, -10);
drawRectangle();
});

[Link]('moveDown').addEventListener('click', () => {
translate(0, 10);
drawRectangle();
});

[Link]('skewX').addEventListener('click',
() => {
skew(0.1, 0);
drawRectangle();
});

[Link]('skewY').addEventListener('click',
() => {
skew(0, 0.1);
drawRectangle();
});

[Link]('resetTransform').addEventListener('click', ()
=> {
resetTransform();
drawRectangle();
});

// Dessiner le rectangle initial


drawRectangle();
}
</script>
</body>
</html>

Vous aimerez peut-être aussi