phundrak/univ.phundrak.fr
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

TP2 terminé, onto TP3

Browse Source
This commit is contained in:
Phuntsok Drak-pa 2018-10-12 14:44:50 +02:00
parent d9e60dfd9e
commit dde0bdd2dc
12 changed files with 139 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
animation/index.html Normal file
View File

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Button - Lucien Cartier-Tilet</title>
<meta name="author" content="Lucien Cartier-Tilet" />
<meta name="description" content="Page universitaire de Lucien Cartier-Tilet" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="initial-scale=1, user-scalable=yes, maximum-scale=5, width=device-width, height=device-height">
<link rel="stylesheet" type="text/css" href="../css/style.css">
<script type="text/javascript" src="../js/animation.js"></script>
</head>
<body>
<ul class="navbar">
<li><a href="../">Home</a></li>
<li><a href="../square/">Square</a></li>
<li><a href="../faker/">Faker</a></li>
<li><a href="../canvas/">Canvas</a></li>
<li><a href="../button/">Button</a></li>
<li><a class="active" href="../animation/">Animation</a></li>
</ul>
<div id="container">
<div class="content">
<p>Un carré traversant un canvas et apparaissant du côté gauche de l’écran alors qu’il disparaît du côté droit de ce dernier et un autre faisant des allers-retours.</p>
</div>
<canvas id="sqrcontainer" width="800" height="600"></canvas>
</div>
</body>
</html>

24
button/index.html
View File

@ -1,25 +1,27 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="fr">
<head> <head>
<title>Index - Lucien Cartier-Tilet</title> <title>Button - Lucien Cartier-Tilet</title>
<meta name="author" content="Lucien Cartier-Tilet" />
<meta name="description" content="Page universitaire de Lucien Cartier-Tilet" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="initial-scale=1, user-scalable=no, maximum-scale=1, width=device-width, height=device-height"> <meta name="viewport" content="initial-scale=1, user-scalable=yes, maximum-scale=5, width=device-width, height=device-height">
<link rel="stylesheet" type="text/css" href="../css/style.css"> <link rel="stylesheet" type="text/css" href="../css/style.css">
<link rel="stylesheet" type="text/css" href="../css/button.css"> <link rel="stylesheet" type="text/css" href="../css/button.css">
<script type="text/javascript" src="../js/button.js"></script> <script type="text/javascript" src="../js/button.js"></script>
</head> </head>
<body> <body>
<ul class="navbar"> <ul class="navbar">
<li><a href="../">Home</a></li> <li><a href="../">Home</a></li>
<li><a href="./">Moving red square</a></li> <li><a href="../square/">Square</a></li>
<li><a href="../faker">Faker</a></li> <li><a href="../faker/">Faker</a></li>
<li><a class="active" href="../button">Button</a></li> <li><a href="../canvas/">Canvas</a></li>
<li><a href="../canvas-zoom">Canvas & Zoom</a></li> <li><a class="active" href="../button/">Button</a></li>
</ul> </ul>
<div id="container" class="content"> <div id="container" class="content">
</div> </div>
</body> </body>
</html> </html>

19
canvas/index.html
View File

@ -1,10 +1,12 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="fr">
<head> <head>
<title>Moving Square - Lucien Cartier-Tilet</title> <title>Canvas - Lucien Cartier-Tilet</title>
<meta name="author" content="Lucien Cartier-Tilet" />
<meta name="description" content="Page universitaire de Lucien Cartier-Tilet" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="initial-scale=1, user-scalable=no, maximum-scale=1, width=device-width, height=device-height"> <meta name="viewport" content="initial-scale=1, user-scalable=yes, maximum-scale=5, width=device-width, height=device-height">
<link rel="stylesheet" type="text/css" href="../css/style.css" /> <link rel="stylesheet" type="text/css" href="../css/style.css" />
<link rel="stylesheet" type="text/css" href="../css/canvas.css" /> <link rel="stylesheet" type="text/css" href="../css/canvas.css" />
<script type="text/javascript" src="../js/canvas.js"></script> <script type="text/javascript" src="../js/canvas.js"></script>
@ -13,16 +15,17 @@
<body> <body>
<ul class="navbar"> <ul class="navbar">
<li><a href="../">Home</a></li> <li><a href="../">Home</a></li>
<li><a href="./">Moving red square</a></li> <li><a href="../square/">Square</a></li>
<li><a href="../faker">Faker</a></li> <li><a href="../faker/">Faker</a></li>
<li><a class="active" href="../canvas-zoom">Canvas & Zoom</a></li> <li><a class="active" href="../canvas/">Canvas</a></li>
<li><a href="../button">Button</a></li> <li><a href="../button/">Button</a></li>
</ul> </ul>
<div id="container"> <div id="container">
<img src="../img/france_ardeche_landscape.jpg" alt="Vue d’Ardèche" id="ardeche" />
<div class="content"> <div class="content">
<p>Un canvas contenant une image. En passant la souris par dessus l'image on obtient un zoom sur cette dernière.</p> <p>Un canvas contenant une image. En passant la souris par dessus l'image on obtient un zoom sur cette dernière.</p>
<p><a href="https://www.instagram.com/p/BWqLAPSF7Fh/">[source image]</a></p>
</div> </div>
<img src="../img/france_ardeche_landscape.jpg" alt="Vue d’Ardèche" id="ardeche" />
<canvas id="canvastp1" width="800" height="600"></canvas> <canvas id="canvastp1" width="800" height="600"></canvas>
<canvas id="loupe" width="80" height="80" display="none"></canvas> <canvas id="loupe" width="80" height="80" display="none"></canvas>
</div> </div>

3
css/button.css
View File

@ -1,6 +1,3 @@
#container {
}
#Button { #Button {
background-color: #F67280; background-color: #F67280;
border: none; border: none;

1
css/canvas.css
View File

@ -1,7 +1,6 @@
#container { #container {
position: relative; position: relative;
height: 100%; height: 100%;
overflow-x: scroll;
} }
#content { #content {

24
faker/index.html
View File

@ -1,19 +1,24 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="fr">
<head> <head>
<title>Faker - Lucien Cartier-Tilet</title> <title>Faker - Lucien Cartier-Tilet</title>
<meta name="description" content="Page universitaire de Lucien Cartier-Tilet" />
<meta name="author" content="Lucien Cartier-Tilet" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="initial-scale=1, user-scalable=no, maximum-scale=1, width=device-width, height=device-height"> <meta name="viewport" content="initial-scale=1, user-scalable=yes, maximum-scale=5, width=device-width, height=device-height">
<link rel="stylesheet" type="text/css" href="https://univ.phundrak.fr/css/style.css"> <link rel="stylesheet" type="text/css" href="../css/style.css">
<script src="https://univ.phundrak.fr/js/faker.min.js"></script> <script src="../js/faker.min.js"></script>
<script src="https://univ.phundrak.fr/js/exo-faker.js"></script> <script src="../js/exo-faker.js"></script>
</head> </head>
<body> <body>
<ul class="navbar"> <ul class="navbar">
<li><a href="https://univ.phundrak.fr/">Home</a></li> <li><a href="../">Home</a></li>
<li><a href="https://univ.phundrak.fr/moving-square/">Moving red square</a></li> <li><a href="../square/">Square</a></li>
<li><a class="active" href="https://univ.phundrak.fr/faker">Faker</a></li> <li><a class="active" href="../faker/">Faker</a></li>
<li><a href="https://univ.phundrak.fr/canvas-zoom">Canvas & Zoom</a></li> <li><a href="../canvas/">Canvas</a></li>
<li><a href="../button/">Button</a></li>
</ul> </ul>
<div class="container"> <div class="container">
<div class="content"> <div class="content">
@ -26,4 +31,5 @@
</div> </div>
</div> </div>
</body> </body>
</html> </html>

6
index.html
View File

@ -1,10 +1,12 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="fr">
<head> <head>
<title>Index - Lucien Cartier-Tilet</title> <title>Index - Lucien Cartier-Tilet</title>
<meta name="description" content="Page universitaire de Lucien Cartier-Tilet" />
<meta name="author" content="Lucien Cartier-Tilet" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="initial-scale=1, user-scalable=no, maximum-scale=1, width=device-width, height=device-height"> <meta name="viewport" content="initial-scale=1, user-scalable=yes, maximum-scale=5, width=device-width, height=device-height">
<link rel="stylesheet" type="text/css" href="css/style.css"> <link rel="stylesheet" type="text/css" href="css/style.css">
</head> </head>

47
js/animation.js Normal file
View File

@ -0,0 +1,47 @@
var square;
var coordsx;
var coordsx2;
var coordsy;
var canvas;
var context;
var size;
var change;
window.onload = function() {
console.log("JS Loaded");
square = new Square();
canvas = document.getElementById("sqrcontainer");
canvas.width = document.documentElement.clientWidth;
context = canvas.getContext('2d');
coordsx = canvas.width / 2;
coordsx2 = coordsx;
coordsy = 50;
size = 50;
change = 1;
setInterval(frame, 1000.0 / 60.0);
};
class Square {
constructor() {}
static draw(x, y, color) {
context.fillStyle = color;
context.fillRect(x, y, size, size);
}
}
function frame() {
canvas.width = document.documentElement.clientWidth;
coordsx += 1;
coordsx2 += change;
Square.draw(coordsx, coordsy, '#f00');
Square.draw(coordsx2, coordsy + 50, '#0f0');
if (coordsx2 > canvas.width - size || coordsx2 <= 0) {
change = -change;
}
if (coordsx > canvas.width - size) {
Square.draw(coordsx - (canvas.width - size), coordsy, '#f00');
}
if (coordsx > canvas.width + size) {
coordsx -= (canvas.width - size);
}
}

2
js/button.js
View File

@ -32,7 +32,7 @@ class HoverButton extends Button {
super(); super();
} }
static applyShadow() { static applyShadow() {
button.element.style.boxShadow = "3px 3px 5px #6C5B7B"; button.element.style.boxShadow = "5px 5px 5px #6C5B7B";
} }
static applyUnshadow() { static applyUnshadow() {
button.element.style.boxShadow = "none"; button.element.style.boxShadow = "none";

11
js/canvas.js
View File

@ -14,7 +14,6 @@ window.onload = function() {
topmargin = (canvas.height - img.height * ratio) / 2; topmargin = (canvas.height - img.height * ratio) / 2;
context.drawImage(img, 0, 0, img.width, img.height, context.drawImage(img, 0, 0, img.width, img.height,
0, topmargin, img.width * ratio, img.height * ratio); 0, topmargin, img.width * ratio, img.height * ratio);
canvas.addEventListener('mousemove', displayMousePos, false);
canvas.addEventListener('mousemove', zoom, false); canvas.addEventListener('mousemove', zoom, false);
canvas.addEventListener('mouseout', hide, false); canvas.addEventListener('mouseout', hide, false);
@ -23,12 +22,6 @@ window.onload = function() {
context.drawImage(img, 0, 0); context.drawImage(img, 0, 0);
}; };
function displayMousePos(evt) {
var mousePos = getMousePos(canvas, evt);
var message = 'Mouse position: ' + mousePos.x + ', ' + mousePos.y;
console.log(message);
}
function zoom(evt) { function zoom(evt) {
var mousePos = getMousePos(canvas, evt); /* get mouse position */ var mousePos = getMousePos(canvas, evt); /* get mouse position */
loupe.style.display = "inline"; /* make glass visible */ loupe.style.display = "inline"; /* make glass visible */
@ -37,16 +30,12 @@ function zoom(evt) {
var canvasXMargin = window.getComputedStyle(canvas).getPropertyValue('margin-left'); var canvasXMargin = window.getComputedStyle(canvas).getPropertyValue('margin-left');
canvasXMargin = canvasXMargin.substr(0, canvasXMargin.length - 2); canvasXMargin = canvasXMargin.substr(0, canvasXMargin.length - 2);
var marginLeft = Number(canvasXMargin) + mousePos.x + 15; var marginLeft = Number(canvasXMargin) + mousePos.x + 15;
console.log('X: ' + marginLeft);
loupe.style.marginLeft = marginLeft + "px"; loupe.style.marginLeft = marginLeft + "px";
/* process y axis */ /* process y axis */
var marginTop = mousePos.y + 15; var marginTop = mousePos.y + 15;
loupe.style.marginTop = marginTop + "px"; loupe.style.marginTop = marginTop + "px";
var actualPos = mousePos.y - topmargin; var actualPos = mousePos.y - topmargin;
console.log('Y: ' + marginTop +
', marginTop: ' + topmargin +
', actualPos: ' + actualPos);
/* clear and redraw glass */ /* clear and redraw glass */
var context = loupe.getContext("2d"); var context = loupe.getContext("2d");

1
robots.txt
View File

@ -7,5 +7,4 @@ Disallow: /img
Disallow: /js Disallow: /js
Disallow: /langue Disallow: /langue
Disallow: /.git Disallow: /.git
Disallow: .gitignore
Disallow: *.php Disallow: *.php

14
square/index.html
View File

@ -1,10 +1,12 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="fr">
<head> <head>
<title>Moving Square - Lucien Cartier-Tilet</title> <title>Moving Square - Lucien Cartier-Tilet</title>
<meta name="author" content="Lucien Cartier-Tilet" />
<meta name="description" content="Page universitaire de Lucien Cartier-Tilet" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="initial-scale=1, user-scalable=no, maximum-scale=1, width=device-width, height=device-height"> <meta name="viewport" content="initial-scale=1, user-scalable=yes, maximum-scale=5, width=device-width, height=device-height">
<link rel="stylesheet" type="text/css" href="../css/style.css" /> <link rel="stylesheet" type="text/css" href="../css/style.css" />
<link rel="stylesheet" href="../css/square.css" type="text/css" /> <link rel="stylesheet" href="../css/square.css" type="text/css" />
<script src="../js/square.js"></script> <script src="../js/square.js"></script>
@ -13,10 +15,10 @@
<body> <body>
<ul class="navbar"> <ul class="navbar">
<li><a href="../">Home</a></li> <li><a href="../">Home</a></li>
<li><a class="active" href="./">Moving red square</a></li> <li><a class="active" href="../square/">Square</a></li>
<li><a href="../faker">Faker</a></li> <li><a href="../faker/">Faker</a></li>
<li><a href="../canvas-zoom">Canvas & Zoom</a></li> <li><a href="../canvas/">Canvas</a></li>
<li><a href="../button">Button</a></li> <li><a href="../button/">Button</a></li>
</ul> </ul>
<div id="container"> <div id="container">
<div class="content"> <div class="content">