首页 发现 帮助
注册 登录
jrs
/
pixlife
关注 1
点赞 0
派生 0
文件 工单管理 0 合并请求 0 Wiki
浏览代码

letsdoit

John Salamon 7 年之前
当前提交
90d41f1336
共有 3 个文件被更改，包括 184 次插入 和 0 次删除
合并视图 显示文件统计
  1. 90 0
      code.js
  2. 16 0
      index.html
  3. 78 0
      style.css

+ 90 - 0
code.js
查看文件 

@@ -0,0 +1,90 @@
 
+var hidden = true;
 
+document.getElementById('show').onclick = function(){
 
+	if(hidden) {
 
+        	document.getElementById('side').style.width = '200px';
 
+	} else {
 
+        	document.getElementById('side').style.width = '0';
 
+	}
 
+	hidden = !hidden;
 
+};
 
+document.getElementById('full').onclick = function(){
 
+	if(!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement)
 
+	{
 
+		var elem = document.getElementsByTagName('body')[0];
 
+		var requestFullScreen = elem.requestFullscreen || elem.msRequestFullscreen || elem.mozRequestFullScreen || elem.webkitRequestFullscreen;
 
+		requestFullScreen.call(elem);
 
+	}
 
+	else {
 
+		var exitFullScreen = document.exitFullscreen || document.webkitExitFullscreen || document.mozCancelFullScreen || document.msExitFullscreen;
 
+		exitFullScreen.call(document);
 
+	}
 
+
 
+};
 
+
 
+var canvas = document.getElementById('canvas');
 
+var context = canvas.getContext('2d');
 
+
 
+function resize() {
 
+	canvas.width  = window.innerWidth;
 
+	canvas.height = window.innerHeight;
 
+}
 
+window.addEventListener('resize', resize);
 
+resize();
 
+
 
+var x = 200,
 
+    y = 0,
 
+    vy = 0,
 
+    ay = 0,
 
+    m = 0.1,    // Ball mass in kg
 
+    r = 10,     // Ball radius in cm, or pixels.
 
+    e = -0.5,   // Coefficient of restitution ("bounciness")
 
+    rho = 1.2,  // Density of air. Try 1000 for water.
 
+    C_d = 0.47, // Coeffecient of drag for a ball
 
+    A = Math.PI * r * r / 10000 // Frontal area of the ball; divided by 10000 to compensate for the 1px = 1cm relation
 
+    ;
 
+
 
+var t0 = performance.now();
 
+
 
+function loop(t)
 
+{ 
+
 
+	var dt = (t - t0) / 1000; // delta t, in seconds
 
+	t0 = t;
 
+
 
+	var fy = 0;
 
+
 
+	/* Weight force, which only affects the y-direction (because that's the direction gravity points). */
 
+	fy += m * 9.81;
 
+
 
+	/* Air resistance force; this would affect both x- and y-directions, but we're only looking at the y-axis in this example. */
 
+	fy += -1 * 0.5 * rho * C_d * A * vy * vy;
 
+
 
+	/* Verlet integration for the y-direction */
 
+	dy = vy * dt + (0.5 * ay * dt * dt);
 
+	/* The following line is because the math assumes meters but we're assuming 1 cm per pixel, so we need to scale the results */
 
+	y += dy * 100;
 
+	new_ay = fy / m;
 
+	avg_ay = 0.5 * (new_ay + ay);
 
+	vy += avg_ay * dt;
 
+
 
+	/* Let's do very simple collision detection */
 
+	if (y + r > canvas.height && vy > 0) {
 
+		/* This is a simplification of impulse-momentum collision response. e should be a negative number, which will change the velocity's direction. */
 
+		vy *= e; 
+		/* Move the ball back a little bit so it's not still "stuck" in the wall. */
 
+		y = canvas.height - r;                        
+	}
 
+	draw();
 
+	window.requestAnimationFrame(loop);
 
+}
 
+
 
+function draw() {
 
+	context.fillStyle = 'red';
 
+	context.clearRect(0, 0, canvas.width, canvas.height);
 
+	context.beginPath();
 
+	context.arc(x, y, r, 0, Math.PI * 2, true);
 
+	context.fill();
 
+	context.closePath();
 
+}
 
+   
+window.requestAnimationFrame(loop);

+ 16 - 0
index.html
查看文件 

@@ -0,0 +1,16 @@
 
+<!DOCTYPE html>
 
+<html>
 
+<head>
 
+<link href="style.css" rel="stylesheet" />
 
+<meta charset=utf-8 />
 
+<title>COPTINET/VIZ</title>
 
+</head>
 
+<body>
 
+<div id="side">
 
+  <a href="#" id="full">fullscreen()</a>
 
+</div>
 
+<canvas id="canvas"></canvas>
 
+<input type="button"  id="show" value="menu">
 
+</body>
 
+<script src="code.js"></script>
 
+</html>

+ 78 - 0
style.css
查看文件 

@@ -0,0 +1,78 @@
 
+a:link {
 
+    color:hotpink;
 
+}
 
+a:visited {
 
+    color:#b705ff;
 
+}
 
+a:hover {
 
+    color:#f500ff;
 
+}
 
+body{
 
+    background-color:#121212;
 
+    color:#0A889B;
 
+    margin:1em auto;
 
+    max-width:40em;
 
+    padding:0 .62em;
 
+    font:1.2em/1.62em sans-serif;
 
+}
 
+h1,h2,h3 {
 
+    line-height:1.2em;
 
+    color:#0068ff;
 
+}
 
+
 
+#side {
 
+  padding-top: 60px;
 
+  height: 100%;
 
+  width: 0;
 
+  position: fixed;
 
+  top: 0;
 
+  left: 0;
 
+  background-color:#121212;
 
+  z-index: 1;
 
+  overflow-x: hidden;
 
+  opacity:0.9;
 
+  transition: 0.4s;
 
+}
 
+#side a {
 
+    padding: 8px 8px 8px 32px;
 
+    text-decoration: none;
 
+    font-size: 20px;
 
+    color:#0068ff;
 
+    display: block;
 
+    transition: 0.3s
 
+}
 
+
 
+#side a:hover, .offcanvas a:focus{
 
+    color: #f1f1f1;
 
+}
 
+
 
+#canvas {
 
+  position: fixed;
 
+  background-color:#000;
 
+  top: 0;
 
+  left: 0;
 
+  bottom: 0;
 
+  right: 0;
 
+  width: 100%;
 
+  height: 100%;
 
+}
 
+
 
+#show {
 
+    left: 10px;
 
+    z-index: 2;
 
+    position: fixed;
 
+    top:10px;
 
+    background-color: #b705ff;
 
+    opacity:0.4;
 
+    border: none;
 
+    color: white;
 
+    padding: 10px 26px;
 
+    text-align: center;
 
+    text-decoration: none;
 
+    display: inline-block;
 
+    font-size: 16px;
 
+    transition: 0.3s
 
+}
 
+#show:hover {
 
+    opacity:1.0;
 
+}