Forem: Theo Armour

A day living in the "Singularity"

Theo Armour — Sun, 03 May 2020 08:39:45 +0000

Yesterday was one of those days. It was not that memorable a day but it was merely a thrilling day. Let me explain. For several hours I was in the "singularity". I was living and experiencing in a future I had only barely dreamed of.

the singularity is a hypothetical future point in time at which technological growth becomes uncontrollable and irreversible, resulting in unforeseeable changes to human civilization

The objective of this post is to share aspects of this singularity with you - wherever and whenever you are. The interesting thing is that you are already in and part of the singularity. I will explain. I am a software designer and have been designing things - mostly computer programs - in 3D for decades. The programs I write have been used to design houses, furniture, math visualizations, air traffic moves, stock market moves and more. In all of these workflows, my goal is always to share with you the design I am currently working on and to do this as quickly and as easily as possible.

I am happiest when, for example: you make a comment. I bang on the keyboard for a bit and press enter. You see the changes and make a new comment. I bang some more. The design progresses until we are both happy with it.

In the real world this is really kind of an impossible idea. You cannot look at a house and say "well, I'd like that room to be a little bit bigger" and - presto! - the room becomes bigger. But we have been able to do shared real-time editing like this on the computer screen for several decades. The only issue is that you really have to be sitting right next to me and my computer. You can talk and I can edit and we can both see what's happening in real time.

The moment you are not in the same room it starts getting tricky. We can work over the internet but then you have to have the same program I am running or maybe a lot of technical expertise. These are all difficult things. The result is that there is very little 3D communication in the world as of yet. The only exception is, obviously, gaming. With gaming you can see excellent visions of ways people can communicate and collaborate online and in 3D. The only issue here is that games take huge amount of time, effort and money to design, build and deliver.

The time and effort to do things like this just to share my design for your new bookshelf or new data viz has been way outside of normal means.

I have been able to embed 3D designs into WordPress and Blogger. But each instance has been a hand-crafted and time-consuming experience. It involves saving the design data, uploading it to a server, creating some kind of thing in the post that links to the server and adds ways of allowing the user to rotate the view and whatever. What usually happens instead is that somebody does a screen grab of the 3D thing and saves it as a jpeg and then adds the jpeg to the blog post or email or forum thread. I have been doing this kind of thing for decades. This reduction or simplification of the design has inevitably become a cause for anguish and disappointment for me whenever I share my 3D designs.

Generally I have had two unsatisfactory choices I can spend much time producing a visualization (viz) that becomes useless as soon as we make even a minor change or I can spend time and producing a number of screen captures with the hope that you will get it.

Until yesterday.

The thing you see above is definitely a 3D viz and it is appearing in a post on your browser. It takes no more effort than clicking on a link for you and countless others to view it, rotate it, zoom it, whatever.

The viz is created and maintained by me using VS Code - currently the most popular text editor for software programmers.

The code is turned into a viz via Glitch.com. Glitch supplies a plugin or extension for VS Code that captures any and all edits on your computer, sends the edits to the Glitch server which then updates the viz. The plugin allows you to open any project you have in Glitch and start maintaining it.

The next step is get the viz from Glitch to wherever it wants to be seen - which in this cases is in this post on Dev.to. Glitch, Dev.to and other have simplified this process. In order to add the above viz, all I had to do was add the following text in the post wherever I want thrr viz to be displayed

  {% glitch theo-2020-04-28-population app %}

That little bit of text causes Dev.to post to go and read the viz data from Glitch. Any time the code in Glitch is updated the Dev.to post is updated. With the VS Code extension enabled, anytime I edit in VS Code, Glitch is updated which then in turn updates the Dev.to post.

So there I was yesterday happily editing my code in my favorite editor on a Windows machine and also seeing the updates to the Dev.to post I was working on in real time in the browser on my Chromebook computer. I did not need push any buttons, I did not need to run any scripts, I did not need to recite any magic incantations. It just worked.

Then I wanted to see what was happening in Glitch. So I opened the project on Glitch and started typing in VS Code on the Windows machine. Sure enough, the code I typed on the Windows machine appeared immediately in the Glitch project tab in the Chromebook.

Then I started typing in the Glitch project on the Chromebook. After a while I looked over at the Windows machine. OMG, the new text was appearing there as well. The bottom line is that all the editing is bi-directional. Coding and presenting a 3D viz is now as easy and as painless as collaborating on a Google Doc.

Wait, there's more!

I was so pleased with what was happening, I thought it would a nice thing to thank the authors of the Glitch VS Code Extension. So I went to the Glitch Forum and started a thank you post: https://support.glitch.com/t/about-the-vs-code-extension-category/12451?u=theo-armour

As I was running the thank you, I thought it would be nice to explain a little bit about what I was working on. so I tried embedding a glitch viz inside of the Glitch Discourse Forum post. Discourse is a very popular Forum producer but has nothing to do with Glitch or Dev.to, so getting anything to work seemed unlikely or would take a lot of labor. That is until I dropped the embed code provided by Glitch into the Discourse post.

Bingo! The viz worked in Discourse.

<!-- Copy and Paste Me -->
<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">
  <iframe
    src="https://glitch.com/embed/#!/embed/glitch-in-vscode-2020-05-01?path=README.md&previewSize=0"
    title="glitch-in-vscode-2020-05-01 on Glitch"
    allow="geolocation; microphone; camera; midi; vr; encrypted-media"
    style="height: 100%; width: 100%; border: 0;">
  </iframe>
</div>

Which looks like this

The Read Me file contains an account of my experiences. Click the "View App" button at lower right to obtain another dose of 3D. ;-)

Even if you read the post, you will get only a part of what was going on. I could do things such as Update FireFox on Windows from my Google Phone. I could voice dictate on the Chromebook and text edit on Windows. I could have multiple windows on multiple devices all in sync. And more/

After years of waiting, my 3D world is beginning to have the no-cost, easy and powerful online tools that my 2D brethren have enjoyed for decades.

So for me yesterday was more than a singularity. Yesterday was a "triplearity".

Software is not magic; software is made by humans

Theo Armour — Fri, 01 May 2020 04:03:24 +0000

We did it! @harald3dcv and I solved the issues with having objects circling the globe in a nice easily readable fashion. See the post "Animated GIFs of 3D Globes and Tilting the bar" for the problem we were trying to solve. In the animation above, each bar was given a random height, latitude and longitude. You will note the the text and bar are nicely positioned, are always aligned vertically. Each bar is scaled individually but the every text element is scaled the same. And the best thing is that the frames per second are 60 fps on my win10 laptop with a GPU and still in the high 50s on my Samsung Galaxy Chromebook. So what was the magic?

The magic is all in this function:

      function getMatrixComposed(r = 50, lat = 0, lon = 0, height = 5) {
        const position = latLonToXYZ(r + 0.5 * height, lat, lon);
        const matrix = new THREE.Matrix4();
        const quaternion = new THREE.Quaternion().setFromRotationMatrix(
          matrix.lookAt(
            new THREE.Vector3(0, 0, 0),
            position,
            new THREE.Vector3(0, 0, 1)
          )
        );
        const scale = new THREE.Vector3(1, 3, height);

        matrix.compose(
          position,
          quaternion,
          scale
        );

        return matrix;
      }

The THREE.Matrix4().compose function sets the position, rotation and scale of any three.js object in a single line of code. In some ways it is elegant and simple. And in other ways maddening and complex. All of which is another way of saying: Welcome to the world of linear algebra! ;-)

Linear algebra plays a huge role in the creation of interactive 3D graphics. My own skills in linear algebra would hardly fill a teaspoon. Thank goodness there are lots of shoulders of giants to stand on and build upon. Three.js takes care of the core of the issues. There are hundreds of three.js examples. Among the examples there is likely to be a demo of what you are looking for.

On occasion there is a new problem - like the one above. So Harald and I spent a good amount of time looking at the three.js math library. The three.js math library is a treasure. It is fairly well documented. Here are two pages I look at a lot:

And when I am really in trouble, I look at the very readable source code:

https://github.com/mrdoob/three.js/blob/master/src/math/Vector4.js

Here is the good news: In this day and age most of the problems you will encounter have been solved already. If you cannot find the answer it is probably because you did not identify the correct search terminology.

So why did Harald and I spend two hours in battle with a 4x4 matrix this morning? In two hours we might have been able to find a dozen examples of similar solutions to our problem.

One reason is because solving linear algebra problems is so mentally challenging. The problems are tough, take a lot of thought and there are lots of fails. But then there is that "Eureka!" - I have found it - moment. The thing you have been dreaming about appears on the screen and you know you have found the right answer.

You are then reminded that software is not magic, that software is made by people. You have turned something you imagined into something that is now real, useful and shareable. You are a good human.

Enough chit-chat for now. Have a look at the source code on Glitch. Click on the "addMeshGeometryInstanced" button and watch a hundred items of text pop up on your screen.

The happy thing is that this is beginning to turn into a nice project - to create and maintain a template on Glitch of a script that create a nice interactive 3D globe. More on this idea in the next post. In the meantime be happy that things are looking up just the way we wanted.

Animated GIFs of 3D Globes and Tilting the bar

Theo Armour — Thu, 30 Apr 2020 04:17:40 +0000

Animated GIF Horror

Yes, I know the spinning globe is really, really irritating. I am still way down on the learning curve with trying to reduce my beautiful, interactive 3D world of Three.js to work with you "Flatlanders".

My goal is to be able to push a button on a web page I am working on and have a nice smooth animated GIF come out the other end. The GIF should be small enough to be under the 1 MB maximum size set by GitHub Social Preview and/or Glitch.

The code to generate an animated GIF from a three.js demo is Jaume Sanchez's CCapture. It creates a [WebM]( https://en.wikipedia.org/wiki/WebM file and then uploading to EZGif for optimizing. It's all fairly easy to use, the only issue is that there many parameters from from the number of colors in a bitmap uses as a texture in the 3D model to the FPS used by CCapture compared to the FPS used by EZGIF. So getting anything going takes a lot of trial and error - and lots of groaning and saying to to yourself "Oh dang! Another 10 MB file".

The problem with a spinning earth is that it is no fun unless you go all the way around at a nice smooth gentle pace. At 60 frames per second for ten seconds that's 600 frames. Well, that takes a file of many megabytes. So you end up just looking for a less-sucky compromise.

Tilting the Bar

What is the animated GIF showing? It is a demo of the problem I am posing for tomorrow's pair programming session with Harald Reingruber

.ltag__user__id__274996 .follow-action-button { background-color: #010C1F !important; color: #aebcd5 !important; border-color: #010C1F !important; }

Harald Reingruber

Software Crafter, 3D Computer Graphics, Augmented Reality, Computer Vision, Image Processing, Hobby DJ

Harald3DCV haraldreingruber https://www.h-reingruber.at

I am trying to place sticks or bars that are at given latitudes and longitudes on the surface of a 3D globe. I have been doing this successfully in c19-viz3d. You will note, however, that the bars are all circular in section. This means that the bars can be rotated at any angle and look OK. But if non-circular profiles are desired or if 3D text is desired, then the appearance - with everything tilted every which way - is not pleasing.

Below is the demo file used to created the animated GIF and the tilted bars. Click the "addMeshGeometryInstance" button in order to generate the bars = and note that they are all rotated at different angles.

Will we be able to get the "up" of all the bars facing in the same direction? Who knows, but we shall find out tomorrow.

2020-04-27 3D faster miles an hour

Theo Armour — Tue, 28 Apr 2020 07:18:38 +0000

3D graphics in your browser tend to want to use all the processing power available on your device. A typical metric people look at is frames per second or "fps". The benchmark is keeping your script running at 60 fps.

The script I am currently working on - c19-viz3d - is generally running at between 30 to 40 fps. There is a large variance, however, that depends on whether you are viewing it on an old phone or the latest gaming computer. In any case it would be a really nice thing if we can get it back up to 60 fps.

I spent a lot of today on a cookbook example that explores helping three.js web pages run faster miles an hour. As and when success is achieved, the code will be folded into the main app.

The code I ended up with is running below. Click the buttons to check out the three different modules. At top left of the menu, you can click "load stats.js" to the fps for the module currently running.

The interesting thing about all this actually has little to do about the code itself. It has much more to do about how the code in today's example was written

Pair Programming

Since March 30 Harold Reingruber have been pair programming twice a week for a couple of hours each session.

.ltag__user__id__274996 .follow-action-button { background-color: #010C1F !important; color: #aebcd5 !important; border-color: #010C1F !important; }

Harald Reingruber

Software Crafter, 3D Computer Graphics, Augmented Reality, Computer Vision, Image Processing, Hobby DJ

We met up this morning on Google Hangouts. I mentioned the effort I had put in over the weekend - for details see my post of yesterday 2020-04-26 dev.to, glitch, markdown & three.js. I pointed out that the speed-up was very good but that there were a number of issues with scaling objects and setting their rotation. These issues would be difficult to overcome. Therefore we could could move on to new topics.

Nonetheless Harald wanted to double click into the issues. We spent much of the two hours hacking code and not really solving anything. At the end of the session we were just about where we started. BUT! But somehow during the session Harald set things up in such a way that the scaling of objects appeared to be working as we hoped they would work. But apart from that brief instant where things looked right we had nothing really. And, as we all know, you cannot un-see something.

I had seen the scaling work. There were no doubts. Within two hours I had the module totally working as desired - and in just nine lines of code.

Frankly, the experience was like magic. I came in a negative Ned. Then just a few hours later I became positive Pete

I am still not entirely convinced that pair programming is "good" use of time. Then again, if "magic" happens - who cares?

Nice example

A cookbook example is code that you and others can fork again and again. The example tends to sit a folder somewhere along with many other examples. From time time you visit that folder and click on all the examples to see if one might be doing something you could use just now. It really helps you - and others - if the cookbook example shows more than boxes jumping up and down. So here is the cookbook example that was started over the weekend and is now running at 60 fps. Move your cursor over any of the "bars" to see the population of the city and more.

Thank you SimpleMaps for the free, open source data.

2020-04-26 dev.to, glitch, markdown & three.js

Theo Armour — Mon, 27 Apr 2020 07:31:16 +0000

Posting to Dev.to?

Blogging as a pastime is a really nice activity for oneself , but where you blog brings other people into the process. So blogging about technical matters on Facebook tends to toward losing followers. Blogging on your own website - unless you are already famous - means almost no readers. Wordpress.com, Blogger.com and Medium.com are all great platforms. I have used and admire all of them. The issue is that the readerships - even when the readers are themselves programmers - don't really have the intention of going to those sites to read about programming.

I have been following Dev.to for a while and this is my second post. From what I have seen so far, Dev.to is a nice place for quick and easy posting dedicated to discussing topical aspects of coding - while at the same fulfilling a bunch of items on my wishlist.

Real 3D in the post

I build real-time 3D web-pages that work on your computer, tablet or laptop. The three.js WebGL JavaScript library is my single dependency. Everything I do is free and open source and in plain-vanilla JavaScript.

What this means is that I do not do 2D. I do not do static. I do not do Ruby. I do not do Node. I do not do Videos (2D after all). I do not do databases. So what do I want to be able to show in my blog posts? Real-time, animated interactive 3D. the question is: where can you do this on the web? I have had some success in embedding iframes in WordPress and blogger posts, but the process is by no means satisfactory - let alone easy, fast and producing nice results.

The other day while going through the help menu I noticed this Liquid Tags thing. Scrolling down screws that I noticed that you could embed Glitch files - actual working scripts - in a Dev.to post. just like this one:

WooHoo! Write the text in Markdown. View the 3D demo "inworld". This could be the beginning of a dream come true.

Today's script

The script you see above is a side hustle on my main current project c10-viz3d. in 2019, three.js added some modules that make it possible to generate and process huge numbers of 3D faces. I just started playing with these modules and the script above has some of the first demos.

This afternoon I set one of the scripts to load and display a million boxes. And to my shock and awe, the script worked - six million faces or twelve million triangles were rotating on my screen at 60 frames per second. I couldn't believe it. Neither could my computer. After three minutes it overheated and shut itself down.

C19-VIZ3D: real-time pandemic data in 3D

Theo Armour — Sun, 26 Apr 2020 19:13:04 +0000

Speedy access to the latest, local COVID-19 data with a familiar interface: the Globe

Stable version c19-viz3d

ladybug-tools / spider-covid-19-viz-3d

Speedy access to the latest, local COVID-19 data with a familiar interface: the Globe

You are now in a GitHub source code view - click this link to view Read Me file as a web page

COVID-19 Viz3D Read Me

Full Screen stable: covid 19 viz3d

Full Screen latest: covid 19 viz3d/dev

Cookbook

Demos of the various modules used to build the viewer

Archive Gallery 2

Files for every daily project update since 200-03-19. Some files are better than others.

Archive Gallery 1

Files from the first day of the project

Concept

The concept of the web page is to show you the current COVID-19 situation around the entire world in 3 seconds or less.

View the latest COVID-19 data from John Hopkins University GitHub repository with interactive 3D
Provide entry-level programming code - plain-vanilla JavaScript - anybody can copy and make better
Display all the data in seconds on any device then zoom and rotate and click to see the cases in 3D

…

View on GitHub

Features

Realtime 3D interaction with three.js and real-time data harvesting from Wikipedia Coronavirus Pandemic
Statistics for 230 countries & states with timely access via GitHub & Wikipedia APIs
Compare world pandemic case data in seconds on computer, tablet or phone
Frequent program versions with the entire archive of daily releases online & viewable
Plain vanilla Javascript, single dependency, JSON data, GitHub pages hosted

Background

This project started on March 15 - a few days after the self quarantine started here in San Francisco. While looking for trackers and finding the Johns Hopkins University (JHU) COVID-19 Dashboard, I discovered that JHU was making their COV1D-19 data readily available at no charge via their GitHub repository. A great feature of the JHU data is its inclusion of latitude and longitude for each location - making the data easy to add to a map. A second feature is that the data, being from a reliable academic source, may be considered true and authoritative - no fake news here.

On the other hand there are a number of issues with the JHU website. In 2D maps, locations with big circles quickly overwhelm the locations with little circles. Looking at the charts, although you can tell which are the biggest or smallest quite easily, trying to compare the numbers for locations that are neighbors in the real world (for example: Argentina and Uruguay ) requires a lot of clunky scrolling.

So, because of the 1. break from the normal rhythm of life, 2. opportunity to use my time in new ways, 3. easy access to great data and 4. issues with existing visualizations, my objective became quickly clear: design a way of tracking the COVID-19 data that is fast, easy and works wherever & whenever.

Given the isolation, the project also needed to be engaging and enjoyable. A fun thing is to have results appear quickly, so I embarked on a mission to create a new version or release every day. The mantras have been along the lines "Release early - release often", "Move fast and break things" and "Full speed ahead - damn the torpedoes." Six weeks into the project there have been commits every day and new versions almost every day.

The current status is that technically the project is beginning to settle down. With the assistance and guidance of - Tania, Cynthia, Paul, @Harald, Michal, Terry and others - a good number of the desired features are in place and beginning to work without too many issues. From a human experience point of view the "Interactive legend" and the pop-ups that appear when you touch a country are beginning to work as you might expect. Upcoming versions will be concentrating on increasing the display of frames per second and making more data appear "in-world".

There is, however, another aspect to the project that arrived as a "bolt from the blue" that changed everything and - to this day - remains to be tackled in a proper way. This insight arrived as a GitHub issue posted by Oleg Lavrovsky from Bern, Switzerland. The title of his message is "Expressions of Hope" and contains the following words: "I wonder if we could show positive tweets and expressions of hope and gratitude for the courage of health workers around the world."

Oleg's message reimagines the project. The project must be more than a number delivery system. What you see must be better than just a list of quantities; what you see must provide insights into qualities. Now that we have a working technical foundation and reasonable workflow, we can begin to respond to Oleg's wish list. We want to go from "What you see is what you get" to "What you want to see is what you hoped for". Fingers crossed.