From 5edcdea48f4aa248cc6c987f9c3c603ba120cd7a Mon Sep 17 00:00:00 2001
From: Ben Burlingham
Date: Sat, 26 Aug 2017 19:34:52 -0700
Subject: [PATCH] Movement circle and vision grid moved into particle
container.
---
css/particle.scss | 59 +-
css/style.css | 28 +-
index.html | 35 +-
js/{animation1.js => animation1a.js} | 49 +-
js/animation1b.js | 75 +
js/animation2.js | 89 -
js/animation2a.js | 93 +
js/bundle.js | 20737 +++----------------------
js/controls.js | 47 +-
js/enums.js | 3 +-
js/index.js | 10 +-
js/particle.js | 196 +-
package.json | 2 +-
13 files changed, 2503 insertions(+), 18920 deletions(-)
rename js/{animation1.js => animation1a.js} (62%)
create mode 100644 js/animation1b.js
delete mode 100644 js/animation2.js
create mode 100644 js/animation2a.js
diff --git a/css/particle.scss b/css/particle.scss
index 4b60e43..e7c438e 100644
--- a/css/particle.scss
+++ b/css/particle.scss
@@ -1,64 +1,45 @@
-.particle {
- $side: 20px;
+$particleS: 20px;
+$visionS: 100px;
- // background: url('../res/seahorse.svg') no-repeat center center #aaa;
- background-color: #555;
- background-size: $side $side;
- border-radius: $side / 2;
- color: #fff;
- font-size: 11px;
- height: $side;
- line-height: $side;
- margin: #{-$side / 2} 0 0 #{-$side / 2};
+.particle-container {
position: absolute;
- text-align: center;
- width: $side;
z-index: 1;
+}
- // &.has-vision::after {
- // border: 50px solid;
- // border-color: lightgreen transparent transparent turquoise;
- // border-radius: 50px;
- // content: ' ';
- // height: 0;
- // left: -50px;
- // margin: #{$side / 2} 0 0 #{$side / 2};
- // opacity: 0.5;
- // position: absolute;
- // transform: rotate(45deg);
- // top: -50px;
- // width: 0;
- // z-index: 0;
- // }
+.particle-body {
+ background-color: #555;
+ background-size: $particleS $particleS;
+ border-radius: 0 ($particleS / 2) ($particleS / 2) ($particleS / 2);
+ height: $particleS;
+ margin: #{-$particleS / 2} 0 0 #{-$particleS / 2};
+ position: relative;
+ width: $particleS;
+ z-index: 2;
}
.particle-movement-circle {
border: 3px dotted darkturquoise;
- margin-left: 10px;
- margin-top: 10px;
position: absolute;
z-index: 0;
}
-.particle-vision-grid {
- height: 100px;
- // margin-top: 50px;
- // margin-left: 50px;
+.particle-vision {
+ // background: #ddd;
+ height: $visionS;
+ left: -$visionS / 2;
position: absolute;
- transform-origin: left top;
- width: 100px;
- z-index: 99;
+ top: -$visionS / 2;
+ width: $visionS;
+ z-index: 1;
}
.particle-vision-dot {
$s: 2px;
background: red;
- // border-radius: 2px;
height: $s;
position: absolute;
width: $s;
- z-index: 99;
&.removed {
// background: purple;
diff --git a/css/style.css b/css/style.css
index ccbbba7..f71dc10 100644
--- a/css/style.css
+++ b/css/style.css
@@ -30,40 +30,38 @@ body {
position: relative;
width: 100%;
z-index: 0; }
-.particle {
+.particle-container {
+ position: absolute;
+ z-index: 1; }
+
+.particle-body {
background-color: #555;
background-size: 20px 20px;
- border-radius: 10px;
- color: #fff;
- font-size: 11px;
+ border-radius: 0 10px 10px 10px;
height: 20px;
- line-height: 20px;
margin: -10px 0 0 -10px;
- position: absolute;
- text-align: center;
+ position: relative;
width: 20px;
- z-index: 1; }
+ z-index: 2; }
.particle-movement-circle {
border: 3px dotted darkturquoise;
- margin-left: 10px;
- margin-top: 10px;
position: absolute;
z-index: 0; }
-.particle-vision-grid {
+.particle-vision {
height: 100px;
+ left: -50px;
position: absolute;
- transform-origin: left top;
+ top: -50px;
width: 100px;
- z-index: 99; }
+ z-index: 1; }
.particle-vision-dot {
background: red;
height: 2px;
position: absolute;
- width: 2px;
- z-index: 99; }
+ width: 2px; }
.particle-vision-dot.removed {
background: green; }
.particle-vision-dot.touching {
diff --git a/index.html b/index.html
index 4209dc4..3c61c2e 100644
--- a/index.html
+++ b/index.html
@@ -35,8 +35,8 @@
@@ -44,34 +44,23 @@
Exploration 2: Grid-based vision
+
+ The next goal was to explore a grid-based vision system. Each particle owns a vision grid, which is compared
+ against the global grid to detect collisions. Here's a small scale system, with the vision grid visualized:
+
-
+