Skip to content

Commit 6e89340

Browse files
chanrtchanrt
committed
Init XY model
1 parent 4da98c0 commit 6e89340

File tree

5 files changed

+234
-1
lines changed

5 files changed

+234
-1
lines changed

‎about.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,7 @@ <h2>Timeline</h2>
103103
</center>
104104
<p class="flow-text">
105105
<b>Note:</b> Sorry about the recent inactivity on this website. The developer was/is busy in passing physics
106-
courses, writing theses, and convincing grad schools/professors to accept him for a PhD ;-)
106+
courses and writing theses ;-)
107107
</p>
108108

109109
<center>

‎xy_model/basic.js

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
let screen_width = window.innerWidth, screen_height = window.innerHeight;
2+
let canvas_width, canvas_height;
3+
let fps = 24, paused = false;
4+
let mobile;
5+
6+
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
7+
mobile = true;
8+
} else {
9+
mobile = false;
10+
}
11+
12+
let canvas = document.getElementById("canvas");
13+
let context = canvas.getContext("2d");
14+
15+
if (mobile) {
16+
canvas_width = 0.9 * screen_width;
17+
}
18+
else {
19+
canvas_width = 0.6 * screen_width;
20+
}
21+
canvas_height = canvas_width / 1.618;
22+
23+
canvas.width = canvas_width;
24+
canvas.height = canvas_height;
25+
26+
let animate = window.requestAnimationFrame
27+
|| window.webkitRequestAnimationFrame
28+
|| window.mozRequestAnimationFrame
29+
|| function (callback) {
30+
window.setTimeout(callback, 1000 / fps);
31+
};
32+
33+
function step() {
34+
if (!paused) {
35+
update();
36+
}
37+
render();
38+
animate(step);
39+
}
40+
41+
window.onload = function () {
42+
defaultParams();
43+
initParams();
44+
animate(step);
45+
}
46+
47+
function defaultParams() {
48+
49+
}
50+
51+
let click_x, click_y, pressed;
52+
53+
if(mobile) {
54+
canvas.addEventListener("touchstart", function (e) {
55+
getTouchPosition(canvas, e);
56+
let touch = e.touches[0];
57+
let mouseEvent = new MouseEvent("mousedown", {
58+
clientX: touch.clientX,
59+
clientY: touch.clientY
60+
});
61+
canvas.dispatchEvent(mouseEvent);
62+
pressed = true;
63+
clicked();
64+
}, false);
65+
66+
canvas.addEventListener("touchmove", function (e) {
67+
getTouchPosition(canvas, e);
68+
let touch = e.touches[0];
69+
let mouseEvent = new MouseEvent("mousemove", {
70+
clientX: touch.clientX,
71+
clientY: touch.clientY
72+
});
73+
canvas.dispatchEvent(mouseEvent);
74+
moved();
75+
}, false);
76+
77+
canvas.addEventListener("touchend", function (e) {
78+
getTouchPosition(canvas, e);
79+
let touch = e.touches[0];
80+
let mouseEvent = new MouseEvent("mouseup", {
81+
clientX: touch.clientX,
82+
clientY: touch.clientY
83+
});
84+
canvas.dispatchEvent(mouseEvent);
85+
pressed = false;
86+
released();
87+
}, false);
88+
}
89+
else {
90+
canvas.addEventListener("mousedown", function (e) {
91+
getMousePosition(canvas, e);
92+
pressed = true;
93+
clicked();
94+
});
95+
96+
canvas.addEventListener("mousemove", function (e) {
97+
getMousePosition(canvas, e);
98+
moved();
99+
});
100+
101+
canvas.addEventListener("mouseup", function (e) {
102+
getMousePosition(canvas, e);
103+
pressed = false;
104+
released();
105+
});
106+
107+
window.addEventListener("keydown", function(e) {
108+
keyPressed(e.keyCode);
109+
}, false);
110+
111+
window.addEventListener("keydown", function(e) {
112+
keyReleased(e.keyCode);
113+
}, false);
114+
}
115+
116+
function getMousePosition(canvas, event) {
117+
rect = canvas.getBoundingClientRect();
118+
click_x = event.clientX - rect.left;
119+
click_y = event.clientY - rect.top;
120+
}
121+
122+
function getTouchPosition(canvas, event) {
123+
var rect = canvas.getBoundingClientRect();
124+
click_x = event.touches[0].clientX - rect.left;
125+
click_y = event.touches[0].clientY - rect.top;
126+
}

‎xy_model/simulation.html

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
<!DOCTYPE html>
2+
<html lang="en-US">
3+
4+
<head>
5+
<title>XY Model | Visualize It</title>
6+
<meta charset="utf-8" />
7+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
8+
<meta name="viewport" content="width=device-width, initial-scale=1" />
9+
<meta name="keywords" content="">
10+
<meta name="og:image" content="https://github.com/visualize-it/visualize-it.github.io/raw/main/images_webp/">
11+
12+
<!-- Materialize -->
13+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" />
14+
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
15+
16+
<script src="../helper.js" defer></script>
17+
<script src="basic.js" defer></script>
18+
<script src="user_input.js" defer></script>
19+
<script src="simulation.js" defer></script>
20+
21+
<script type="text/javascript" async
22+
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-MML-AM_CHTML">
23+
</script>
24+
25+
<!-- CSS -->
26+
<link rel="stylesheet" href="../style.css" />
27+
</head>
28+
29+
<script async src="https://www.googletagmanager.com/gtag/js?id=G-M95CKRP8HB"></script>
30+
<script>
31+
window.dataLayer = window.dataLayer || [];
32+
function gtag() { window.dataLayer.push(arguments); }
33+
gtag('js', new Date());
34+
35+
gtag('config', 'G-M95CKRP8HB');
36+
</script>
37+
38+
<body>
39+
<nav class="nav-extended" style="background:black; margin-top: 0mm">
40+
<div class="nav-wrapper">
41+
<h1 id="main-heading">Visualize It</h1>
42+
</div>
43+
<div class="nav-content">
44+
<ul class="tabs tabs-transparent tabs-fixed-width">
45+
<li class="tab"><a href="../index.html" style="font-size: larger;">Home</a></li>
46+
<li class="tab"><a href="../about.html" style="font-size: larger;">About</a></li>
47+
</ul>
48+
</div>
49+
</nav>
50+
51+
<div class="text">
52+
<h2>XY Model</h2>
53+
<p>Under development</p>
54+
55+
<div class="container" style="width:90%">
56+
<div class="row">
57+
<div class="col s12 l8">
58+
<canvas id="canvas"></canvas>
59+
</div>
60+
<div class="col s12 l4">
61+
62+
</div>
63+
</div>
64+
</div>
65+
66+
<br>
67+
<hr>
68+
69+
<p class="center-align">Developed by ChanRT | Fork me at <a href="https://www.github.com/chanrt">GitHub</a></p>
70+
</div>
71+
</body>
72+
73+
</html>

‎xy_model/simulation.js

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
function update() {
2+
3+
}
4+
5+
function render() {
6+
7+
}
8+
9+
function updateParams(variable) {
10+
11+
}
12+
13+
function initParams() {
14+
15+
}

‎xy_model/user_input.js

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
function clicked() {
2+
3+
}
4+
5+
function moved() {
6+
7+
}
8+
9+
function released() {
10+
11+
}
12+
13+
function keyPressed(key) {
14+
15+
}
16+
17+
function keyReleased(key) {
18+
19+
}

0 commit comments

Comments
 (0)