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 @@
+ 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: +
- +