TapIntoTwitter – Terence Eden’s Blog https://shkspr.mobi/blog Regular nonsense about tech and its effects 🙃 Thu, 11 Sep 2025 07:03:47 +0000 en-GB hourly 1 https://wordpress.org/?v=6.9.4 https://shkspr.mobi/blog/wp-content/uploads/2023/07/cropped-avatar-32x32.jpeg TapIntoTwitter – Terence Eden’s Blog https://shkspr.mobi/blog 32 32 <![CDATA[Augmented Reality Twitter Conversations!]]> https://shkspr.mobi/blog/2021/09/augmented-reality-twitter-conversations/ https://shkspr.mobi/blog/2021/09/augmented-reality-twitter-conversations/#respond Sat, 11 Sep 2021 11:34:27 +0000 https://shkspr.mobi/blog/?p=40299 I've recently launched TweeView - a new way to visualise Twitter conversation threads in 2D and 3D.

Sadly, I don't have a Virtual Reality system - feel free to buy me one! - but I have the next best thing. A web browser!

Demo!

Using the awesome power of A-Frame, here's a demo of how to view a conversation object as AR.

Play!

You can play with it yourself at TweeView.ml/ar. You will need to download this AR target image.

It works best printed onto matt white paper, then mounted on card. I had to print it twice on the same piece of paper to get the required blackness.

Build!

This is built on several bits of open source tech.

The first part is A-Frame and AR.js

<script src="https://aframe.io/releases/1.0.0/aframe.min.js" integrity="sha384-mAWNMpx7UQMegsgs1X2mE9wVl/svgdzdy4qpXNFgAxUmc8a1ToRWVWl3tzfDinBb" crossorigin="anonymous"></script>
<script src="https://unpkg.com/ar.js/aframe/build/aframe-ar.min.js" integrity="sha384-vLi7A1RlJjrEmCqF2DrdIT9cLqHdV/7GbmsqfniwwtfLRQlP1lXi/Tk199ZCLU5p" crossorigin="anonymous"></script>

Next is ForceGraph AR

<script src="https://unpkg.com/3d-force-graph-ar" integrity="sha384-ERqZX7SBS3fH2SL04csG8OB9QyOF2LtDsZtRrJZR46WipKv7LqplBgM/GoFPjyfQ" crossorigin="anonymous"></script>

I recommend copying them to your local server rather than relying on a CDN.

The <body> of your HTML page needs a target the AR window can attach to:

<div id="3d-graph"></div>

Construct the graph which will be displayed in the browser:

<script>
   const Graph = ForceGraphAR({ markerAttrs: { type:'pattern', url:'/path/to/pattern.patt' }})
      (document.getElementById('3d-graph'))
         .jsonUrl('/path/to/graph.json')
         .glScale(160)
         .yOffset(1)
         .nodeRelSize(10)
         .nodeOpacity(0.9)
         .linkOpacity(0.9)
         .nodeColor(0x0000ff)
         .linkOpacity(1)
         .linkCurvature(0)
         .linkWidth(2)
         .linkDirectionalArrowLength(6)
         .linkDirectionalArrowColor(0x00ff00)
         .linkColor(() => 'red');
</script>

In order to generate a "target" (that's the physical object that is being tracked) use the AR.js Marker Generator. That will deliver you two things.

  1. A .patt file. This is a digital representation of the pattern.
  2. A .png or .pdf file. This is the thing you print off and show in front of your camera.

Finally, you'll need a graph object in JSON format to pass to ForceGraphAR.

You'll then end up with something like this:

Grab the code

All of this is available as open source on my GitHub repo.

Enjoy!

]]> https://shkspr.mobi/blog/2021/09/augmented-reality-twitter-conversations/feed/ 0