From 13a4f4238adeee4ff3f7233ff82a8058ca2ffcb3 Mon Sep 17 00:00:00 2001 From: Navan Chauhan Date: Tue, 15 Sep 2020 15:40:52 +0530 Subject: Publish deploy 2020-09-15 15:40 --- feed.rss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'feed.rss') diff --git a/feed.rss b/feed.rss index 9c09b20..c9ddea3 100644 --- a/feed.rss +++ b/feed.rss @@ -1,4 +1,4 @@ -Navan ChauhanWelcome to my personal fragment of the internet. Majority of the posts should be complete.https://navanchauhan.github.io/enSat, 1 Aug 2020 17:00:53 +0530Sat, 1 Aug 2020 17:00:53 +0530250https://navanchauhan.github.io/posts/2020-08-01-Natural-Feature-Tracking-ARJSIntroduction to AR.js and Natural Feature TrackingAn introduction to AR.js and NFThttps://navanchauhan.github.io/posts/2020-08-01-Natural-Feature-Tracking-ARJSSat, 1 Aug 2020 15:43:00 +0530Introduction to AR.js and Natural Feature Tracking

AR.js

AR.js is a lightweight library for Augmented Reality on the Web, coming with features like Image Tracking, Location based AR and Marker tracking. It is the easiest option for cross-browser augmented reality.

The same code works for iOS, Android, Desktops and even VR Browsers!

It weas initially created by Jerome Etienne and is now maintained by Nicolo Carpignoli and the AR-js Organisation

NFT

Usually for augmented reality you need specialised markers, like this Hiro marker (notice the thick non-aesthetic borders 🤢)

This is called marker based tracking where the code knows what to look for. NFT or Natural Feature Tracing converts normal images into markers by extracting 'features' from it, this way you can use any image of your liking!

I'll be using my GitHub profile picture

Creating the Marker!

First we need to create the marker files required by AR.js for NFT. For this we use Carnaux's repository 'NFT-Marker-Creator'.

$ git clone https://github.com/Carnaux/NFT-Marker-Creator
+Navan ChauhanWelcome to my personal fragment of the internet. Majority of the posts should be complete.https://navanchauhan.github.io/enTue, 15 Sep 2020 15:40:39 +0530Tue, 15 Sep 2020 15:40:39 +0530250https://navanchauhan.github.io/posts/2020-08-01-Natural-Feature-Tracking-ARJSIntroduction to AR.js and Natural Feature TrackingAn introduction to AR.js and NFThttps://navanchauhan.github.io/posts/2020-08-01-Natural-Feature-Tracking-ARJSSat, 1 Aug 2020 15:43:00 +0530Introduction to AR.js and Natural Feature Tracking
AR.js
AR.js is a lightweight library for Augmented Reality on the Web, coming with features like Image Tracking, Location based AR and Marker tracking. It is the easiest option for cross-browser augmented reality.
The same code works for iOS, Android, Desktops and even VR Browsers!
It weas initially created by Jerome Etienne and is now maintained by Nicolo Carpignoli and the AR-js Organisation
NFT
Usually for augmented reality you need specialised markers, like this Hiro marker (notice the thick non-aesthetic borders 🤢)
This is called marker based tracking where the code knows what to look for. NFT or Natural Feature Tracing converts normal images into markers by extracting 'features' from it, this way you can use any image of your liking!
I'll be using my GitHub profile picture
Creating the Marker!
First we need to create the marker files required by AR.js for NFT. For this we use Carnaux's repository 'NFT-Marker-Creator'.
$ git clone https://github.com/Carnaux/NFT-Marker-Creator
 
 Cloning into 'NFT-Marker-Creator'...
 remote: Enumerating objects: 79, done.
@@ -425,9 +425,9 @@ Serving HTTP on 0.0.0.0 port 8000
         <a-torus-knot radius='0.26' radius-tubular='0.05' ></a-torus-knot>
     </ a-box>
 </ a-nft>
-
Where are the GIFs?
Now that we know how to place a box in the scene and add a torus knot in it, what do we do next? We bring the classic internet back!
AFrame GIF Shader is a gif shader for A-Frame created by mayognaise.
First things first
Add <script src="https://rawgit.com/mayognaise/aframe-gif-shader/master/dist/aframe-gif-shader.min.js"></script>  to <head>
🎦
Change the box's material to add the GIF shader
...
+
Where are the GIFs?
Now that we know how to place a box in the scene and add a torus knot in it, what do we do next? We bring the classic internet back!
AFrame GIF Shader is a gif shader for A-Frame created by mayognaise.
First things first
Add <script src="https://rawgit.com/mayognaise/aframe-gif-shader/master/dist/aframe-gif-shader.min.js"></script>  to <head>
Change the box's material to add the GIF shader
...
 <a-box position='100 0.5 -180' material="shader:gif;src:url(https://media.tenor.com/images/412b1aa9149d98d561df62db221e0789/tenor.gif);opacity:.5" .....>
-
Bonus Idea: Integrate it with GitHub's new profile Readme Feature!
1) Host the code using GitHub Pages
2) Create a new repository ( the name should be your GitHub username )
3) Add QR Code to the page and tell the users to scan your profile picture
Profit 💸
Here is a demo of me scanning a rounded version of my profile picture ( It still works! Even though the image is cropped and I haven't changed any line of code )
]]>https://navanchauhan.github.io/posts/2020-07-01-Install-rdkit-colabInstall RDKit on Google Colab with one code snippet.https://navanchauhan.github.io/posts/2020-07-01-Install-rdkit-colabWed, 1 Jul 2020 14:23:00 +0530RDKit is one of the most integral part of any Cheminfomatic specialist's toolkit but it is notoriously difficult to install unless you already have conda installed. I originally found this in a GitHub Gist but I have not been able to found that gist again :/
Just copy and paste this in a Colab cell and it will install it 👍
import sys
+
Bonus Idea: Integrate it with GitHub's new profile Readme Feature!
1) Host the code using GitHub Pages
2) Create a new repository ( the name should be your GitHub username )
3) Add QR Code to the page and tell the users to scan your profile picture
??) Profit 💸
Here is a screenshot of me scanning a rounded version of my profile picture ( It still works! Even though the image is cropped and I haven't changed any line of code )
]]>https://navanchauhan.github.io/posts/2020-07-01-Install-rdkit-colabInstalling RDKit on Google ColabInstall RDKit on Google Colab with one code snippet.https://navanchauhan.github.io/posts/2020-07-01-Install-rdkit-colabWed, 1 Jul 2020 14:23:00 +0530Installing RDKit on Google Colab
RDKit is one of the most integral part of any Cheminfomatic specialist's toolkit but it is notoriously difficult to install unless you already have conda installed. I originally found this in a GitHub Gist but I have not been able to find that gist again :/
Just copy and paste this in a Colab cell and it will install it 👍
import sys
 import os
 import requests
 import subprocess
-- 
cgit v1.2.3