Logo

dev-resources.site

for different kinds of informations.

Demo Highlight: 2dVis

Published at
11/15/2023
Categories
miniscript
minimicro
demo
programming
Author
joestrout
Author
9 person written this
joestrout
open
Demo Highlight: 2dVis

Mini Micro comes with over 40 built-in demos in the /sys/demo directory. But a surprising number of users have never taken the time to really explore these. So, I'm going to highlight some of my favorites, starting with the very first one (alphabetically), 2dVis.

Screenshot of 2dVis demo

This is a fun demonstration of a very powerful technique: calculating the two-dimensional visibility region from a given viewpoint, in an arbitrarily complex environment. The code is based on this excellent article from Red Blob Games.

To follow along, download Mini Micro if you don't have it already, launch it, and enter these commands:

cd "/sys/demo"
dir
load "2dVis"
run
Enter fullscreen mode Exit fullscreen mode

(The dir or directory listing command is not strictly necessary, but is a good habit to get into.)

You should see a display like the screen shot above. Now simply click and drag anywhere in the map. As you do, the yellow "light source" or viewpoint will move around, and you can instantly see where a light at that point would cast into the environment.

Animated GIF of 2DVis demo

You can also think of the yellow dot as the viewpoint β€” say, the position of the player in a game β€”Β and the lit areas as all the parts of the map that can be seen from that point.

The code for this is rather complex, though the Red Blob Games article does a good job of explaining the algorithm. In a nutshell, what it does is:

  1. Sort all the endpoints of the line segments that make up the environment, in counter-clockwise order around the viewpoint.
  2. "Sweep" over these sorted points, figuring out which line segments are visible or partly visible.
  3. For each visible part, add the ends to a growing polygon that represents the visible area.

The demo code then draws this visible-area polygon in a lighter color, before drawing the line segments and yellow ball on top.

Although this is in /sys/demo, it is written in such a way that it can actually be used as an import library! To use it in your own projects, you would do something like this:

  1. Copy 2dVis.ms into your own folder, or else add /sys/demo to the import paths: env.importPaths.push "/sys/demo"
  2. import "2dVis"
  3. make a new Visibility object (and note that because 2dVis is not a valid identifier, we have to index into locals to find the imported module: vis = new locals["2dVis"].Visibility
  4. build your environment by calling vis.loadMap, vis.addBlock, or vis.addSegments as desired
  5. finally, whenever the viewpoint changes: (a) call vis.setViewpoint with the new location; (b) call vis.sweep; (c) do whatever you need with the vis.output polygon.

So, what could you do with this? You might make a sneaker game where you have to avoid being seen by roving guards. (The mathUtil module in /sys/lib has some handy polygon-related methods, like pointInPoly for testing whether a given point is within a polygon). Or you could make a roguelike dungeon crawler, with everything outside the visible polygon hidden. Or how about a puzzle game, where obstacles change in some predictable way β€”Β but only when you can't see them?

Or, like all demos, you can simply explore the code and see what new tips and tricks you discover.

What do you think of this demo? Does it inspire any ideas? Let me know in the comments below!

demo Article's
30 articles in total
Favicon
Using Disposable Emails for a Demo
Favicon
Profylix
Favicon
Demo: Automating GitHub Repo Configuration and Security with Minder
Favicon
How to do great live demos β€” and why they’re important to get right
Favicon
Flems.io
Favicon
Three Tips for Your Next (Software) Demo
Favicon
Using Valibot for Recursive Schema Validation
Favicon
Demo: Minder, a software supply chain security platform from Stacklok
Favicon
asdsadasd
Favicon
Building an Anime Recommendation System with PySpark in SageMaker
Favicon
Demo Highlight: Acey-Deucey
Favicon
Demo Highlight: Asteroids
Favicon
Writting Simple OnceCell
Favicon
How to build a demo project
Favicon
Playing around with Ultra HDR
Favicon
Odoo CRM Demo
Favicon
Odoo Demo
Favicon
demo
Favicon
Demo Highlight: 2dVis
Favicon
Pimcore Demo installed locally but can not log into Admin using the credentials set at the time of installation
Favicon
Learn how to access webcam and take photo with JavaScript
Favicon
Futuristic Dial Button ☎
Favicon
Python SEO Keyword Research Tool: Google Autocomplete, People Also Ask and Related Searches
Favicon
Enterprise Power BI Series
Favicon
Dropshipping Research Tool Demo in Python
Favicon
How to run Apache SkyWalking on AWS EKS and RDS/Aurora
Favicon
New js framework
Favicon
Top 10 trending github repos for Java developers in this week🍸.
Favicon
Floating Islands WebGL demo πŸ‡ΊπŸ‡¦
Favicon
ReactJS Demo Project - Party Planner Web App - Github

Featured ones: