Skip to content

Commit c6b121a

Browse files
chanrtchanrt
committed
Initialized TDP
1 parent f4e2151 commit c6b121a

File tree

4 files changed

+231
-0
lines changed

4 files changed

+231
-0
lines changed

‎tdp/basic.js

+126
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.4 * screen_width;
20+
}
21+
canvas_height = canvas_width;
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+
}

‎tdp/simulation.html

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

‎tdp/simulation.js

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
function update() {
2+
3+
}
4+
5+
function render() {
6+
context.fillStyle = "#000000";
7+
context.fillRect(0, 0, canvas_width, canvas_height);
8+
}
9+
10+
function updateParams(variable) {
11+
12+
}
13+
14+
function initParams() {
15+
16+
}

‎tdp/user_input.js

+19
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)