add demo

pointworld · Oct 10, 2018 · 39ed714 · 39ed714
1 parent d61e832
commit 39ed714
Show file tree

Hide file tree

Showing 46 changed files with 6,138 additions and 150 deletions.
diff --git a/test/animate.html → demo/animate.html b/test/animate.html → demo/animate.html
@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <title>animate</title>
-  <script src="../dist/pw.js"></script>
+  <script src="./js/pw.js"></script>
   <style>
     body {
       padding: 0;

diff --git a/test/animate_gif.html → demo/animate_gif.html b/test/animate_gif.html → demo/animate_gif.html
@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <title>animate gif</title>
-  <script src="../dist/pw.js"></script>
+  <script src="./js/pw.js"></script>
   <style>
     body {
       padding: 0;

diff --git a/test/beautiful_sky.html → demo/beautiful_sky.html b/test/beautiful_sky.html → demo/beautiful_sky.html
@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <title>beautiful sky</title>
-  <script src="../dist/pw.js"></script>
+  <script src="./js/pw.js"></script>
   <style>
     body {
       padding: 0;
@@ -35,50 +35,50 @@
   const nodes = []
 
   function create_node() {
-    const x = Math.random()*stage.width
-    const y = Math.random()*stage.height
+    const x = Math.random() * stage.width
+    const y = Math.random() * stage.height
     const node = new Pw.CircleNode()
-    node.vx = Math.random()*6-3
-    node.vy = Math.random()*6 - 3
-    node.radius = Math.random()*10+2
+    node.vx = Math.random() * 6 - 3
+    node.vy = Math.random() * 6 - 3
+    node.radius = Math.random() * 10 + 2
     node.mass = node.radius
     node.fillColor = Pw.util.randomColor()
-    node.setLocation(x,y)
+    node.setLocation(x, y)
     scene.add(node)
     return node
   }
 
-  for (let i=0;i<90;i++){
+  for (let i = 0; i < 90; i++) {
     const node = create_node()
     nodes.push(node)
   }
 
   function move(node) {
     node.x += node.vx
     node.y += node.vy
-    if (node.x>stage.width)node.x = 0
-    if (node.y>stage.height) node.y = 0
-    if (node.x-node.width<0) node.x = stage.width
-    if(node.y - node.height < 0) node.y = stage.height
+    if (node.x > stage.width) node.x = 0
+    if (node.y > stage.height) node.y = 0
+    if (node.x - node.width < 0) node.x = stage.width * Math.random()
+    if (node.y - node.height < 0) node.y = stage.height * Math.random()
   }
 
-  const minDist  =100
+  const minDist = 100
   const springAmount = .0025
 
-  function spring(a, b){
+  function spring(a, b) {
     const dx = b.x - a.x
     const dy = b.y - a.y
 
     const dist = Pw.util.getDistance(a, b)
 
-    if (dist<minDist){
+    if (dist < minDist) {
       const g = stage.graphics
-      const alpha = 1 - dist/minDist
+      const alpha = 1 - dist / minDist
       g.beginPath()
-      g.strokeStyle = 'rgba(255,255,255,'+alpha+')'
+      g.strokeStyle = 'rgba(255,255,255,' + alpha + ')'
       g.lineWidth = 1
-      g.moveTo(a.x + a.width/2, a.y + a.height/2)
-      g.lineTo(b.x + b.width/2, b.y + b.height/2)
+      g.moveTo(a.x + a.width / 2, a.y + a.height / 2)
+      g.lineTo(b.x + b.width / 2, b.y + b.height / 2)
       g.stroke()
       g.closePath()
       const ax = dx * springAmount
@@ -90,11 +90,11 @@
     }
   }
 
-  (function f(){
+  (function f() {
     stage.paint()
-    for(var i=0; i<nodes.length; i++){
-      for(var j=0; j<nodes.length; j++){
-        if(j == i) continue
+    for (var i = 0; i < nodes.length; i++) {
+      for (var j = 0; j < nodes.length; j++) {
+        if (j == i) continue
         spring(nodes[i], nodes[j])
       }
       move(nodes[i])
@@ -103,7 +103,7 @@
     requestAnimationFrame(f)
   })()
 
-  stage.addEventListener('mouseup', function(e){
+  stage.addEventListener('mouseup', function (e) {
     var node = create_node()
     node.setLocation(e.x, e.y)
     nodes.push(node)

diff --git a/test/chart_bar.html → demo/chart_bar.html b/test/chart_bar.html → demo/chart_bar.html
@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <title>bar chart</title>
-  <script src="../dist/pw.js"></script>
+  <script src="./js/pw.js"></script>
   <style>
     body {
       padding: 0;

diff --git a/test/chart_pie.html → demo/chart_pie.html b/test/chart_pie.html → demo/chart_pie.html
@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <title>pie chart</title>
-  <script src="../dist/pw.js"></script>
+  <script src="./js/pw.js"></script>
   <style>
     body {
       padding: 0;

diff --git a/test/containerGroup.html → demo/containerGroup.html b/test/containerGroup.html → demo/containerGroup.html
@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <title>container group</title>
-  <script src="../dist/pw.js"></script>
+  <script src="./js/pw.js"></script>
   <style>
     body {
       padding: 0;

diff --git a/test/cut_fruit.html → demo/cut_fruit.html b/test/cut_fruit.html → demo/cut_fruit.html
@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <title>cut fruit</title>
-  <script src="../dist/pw.js"></script>
+  <script src="./js/pw.js"></script>
   <style>
     body {
       padding: 0;

diff --git a/test/eagleEye.html → demo/eagleEye.html b/test/eagleEye.html → demo/eagleEye.html
@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <title>eagle eye</title>
-  <script src="../dist/pw.js"></script>
+  <script src="./js/pw.js"></script>
   <style>
     body {
       padding: 0;

diff --git a/test/effect_gravity.html → demo/effect_gravity.html b/test/effect_gravity.html → demo/effect_gravity.html
@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <title>gravity effect</title>
-  <script src="../dist/pw.js"></script>
+  <script src="./js/pw.js"></script>
   <style>
     body {
       padding: 0;

diff --git a/test/effect_spring_chain.html → demo/effect_spring_chain.html b/test/effect_spring_chain.html → demo/effect_spring_chain.html
@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <title>spring chains effect</title>
-  <script src="../dist/pw.js"></script>
+  <script src="./js/pw.js"></script>
   <style>
     body {
       padding: 0;

diff --git a/test/effect_spring_multi_nodes.html → demo/effect_spring_multi_nodes.html b/test/effect_spring_multi_nodes.html → demo/effect_spring_multi_nodes.html
@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <title>multi-nodes spring effect</title>
-  <script src="../dist/pw.js"></script>
+  <script src="./js/pw.js"></script>
   <style>
     body {
       padding: 0;

diff --git a/test/effect_spring_multi_target.html → demo/effect_spring_multi_target.html b/test/effect_spring_multi_target.html → demo/effect_spring_multi_target.html
@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <title>multi-targets spring effect</title>
-  <script src="../dist/pw.js"></script>
+  <script src="./js/pw.js"></script>
   <style>
     body {
       padding: 0;

diff --git a/test/effect_spring_simple.html → demo/effect_spring_simple.html b/test/effect_spring_simple.html → demo/effect_spring_simple.html
@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <title>simple spring effect</title>
-  <script src="../dist/pw.js"></script>
+  <script src="./js/pw.js"></script>
   <style>
     body {
       padding: 0;

diff --git a/test/index.html → demo/helloworld.html b/test/index.html → demo/helloworld.html
@@ -2,23 +2,31 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
-  <title>test</title>
-  <script src="../dist/pw.js"></script>
+  <title>hello world</title>
+  <script src="./js/pw.js"></script>
   <style>
-    #canvas {
-      margin-left: 50px;
-      margin-top: 50px;
-      border: 2px solid red;
+    body {
+      padding: 0;
+      margin: 0;
+      overflow: hidden;
     }
   </style>
 </head>
 <body>
 <canvas id="canvas" width="500" height="350"></canvas>
 
 <script>
+  canvas.width = document.documentElement.clientWidth
+  canvas.height = document.documentElement.clientHeight
+
+  window.addEventListener('resize', function () {
+    canvas.width = document.documentElement.clientWidth
+    canvas.height = document.documentElement.clientHeight
+  })
 
   const stage = new Pw.Stage(canvas)
   const scene = new Pw.Scene(stage)
+  scene.background = './img/bg.jpg'
 
   function newNode(x, y, w, h, text) {
     const node = new Pw.Node(text)

diff --git a/test/img/android.png → demo/img/android.png b/test/img/android.png → demo/img/android.png
diff --git a/test/img/apple.png → demo/img/apple.png b/test/img/apple.png → demo/img/apple.png
diff --git a/test/img/bg.jpg → demo/img/bg.jpg b/test/img/bg.jpg → demo/img/bg.jpg
diff --git a/test/img/black.png → demo/img/black.png b/test/img/black.png → demo/img/black.png
diff --git a/test/img/caizhu.png → demo/img/caizhu.png b/test/img/caizhu.png → demo/img/caizhu.png
diff --git a/test/img/closedhand.cur → demo/img/closedhand.cur b/test/img/closedhand.cur → demo/img/closedhand.cur
diff --git a/test/img/logo.png → demo/img/logo.png b/test/img/logo.png → demo/img/logo.png
diff --git a/test/img/openhand.cur → demo/img/openhand.cur b/test/img/openhand.cur → demo/img/openhand.cur
diff --git a/test/img/p.png → demo/img/p.png b/test/img/p.png → demo/img/p.png
diff --git a/test/img/smallpng.png → demo/img/smallpng.png b/test/img/smallpng.png → demo/img/smallpng.png
diff --git a/test/img/test.svg → demo/img/test.svg b/test/img/test.svg → demo/img/test.svg
diff --git a/test/img/testIcon.png → demo/img/testIcon.png b/test/img/testIcon.png → demo/img/testIcon.png
diff --git a/test/img/topobg.png → demo/img/topobg.png b/test/img/topobg.png → demo/img/topobg.png
diff --git a/test/img/y.png → demo/img/y.png b/test/img/y.png → demo/img/y.png
diff --git a/test/img/z.png → demo/img/z.png b/test/img/z.png → demo/img/z.png