Speech Recognition in Scratch 3 - turning Hello into Bonjour!
The Raspberry Pi Foundation recently released a programming activity Alien Language , with support Dale from Machine Learning for Kids , tha...
PS3 Controller to move a USB Robot Arm
Guest Blogger Hiren Mistry, Nuffield Research Placement Student working at the University of Northampton. How to use a PS3 Controller to...
Scratch Robot Arm
It is not physical but CBiS Education have release a free robot arm simulator for Scratch. Downloadable from their site http://w...
Tinkercad and Microbit: To make a neuron
The free online CAD (and so much more) package Tinkercad https://www.tinkercad.com/ under circuits; now has microbits as part of the list ...
Escape the Maze with a VR robot - Vex VR
You don't need to buy a robot to get programming a robot, now there are a range of free and relatively simple to start with robot simula...
Easy, Free and no markers Augmented Reality - location based AR
For a few years, I have been a fan of Aframe and AR.js - these are fantastic tools for creating web-based Virtual and Augmented Reality. No...
Coral Dev Board and Raspberry Pi
This is the second of a planned occasional series of posts on playing with some of the current AI specific add-on processors for Intenet of ...
Explaining the Tinkercad microbit Neural network
In a previous post, I looked at developing a neural network in Tinkercad around the Microbit (details available here ) and the whole model ...
VR robot in a maze - from Blocks to Python
Recently I produced a post about playing with Vex Robotics VexCode VR blocks and the Maze Playground. The post finished with me saying I w...
4tronix Eggbit - cute and wearable - hug avoider
/ The ever-brilliant 4tronix have produced Eggbit https://shop.4tronix.co.uk/collections/microbit-accessories/products/eggbit; a cute, wear...
Showing posts with label ar. Show all posts
Showing posts with label ar. Show all posts
Friday, 31 December 2021
Top 10 viewed posts 2021 on the Robot and Physical Computing Blog
Saturday, 14 July 2018
WebVR 4 Playtime: Putting Objects into Augmented Reality
In a previous post, I tried to persuade you that using A-Frame it is not too hard to use for some simple Augmented Reality (AR) for free, via a browser, but also runs on a mobile device. Well I going to continue and put objects with images imposed on them into this AR system - which could be quite a quick way to get an organisations logo into AR.
Summary
In the first post WebVR playtime 1: Basics of setting up, images and rotating blocks, I looked at setting up a scene, rotating an object. Second post, recapped the basics, then look at adding video, 360 degree video, and models developed elsewhere. The third post started looking at using WebVR as part of an augmented reality solution building on the great resource Creating Augmented Reality with AR.js and A-Frame by Jerome Etienne, creator of AR.js. This gave us the starting code.
In this post, the ideas are extended further to adding or wrapping images on top of an object.
Adding images to objects
In a previous post (WebVR playtime 1: Basics of setting up, images and rotating blocks) we have seen that in A-Frame if you create a block and in the tag for the block you add an image it gets wrapped on to the block.
As an example in the following code <a-sphere position="0 0.5 -.5" radius=".5" color="yellow" src="test1.png"> a yellow sphere of 0.5 units radius is produced with the image, stored in test1.png, wrapped around the sphere. What makes this effect even more interesting is any white on the image gets replaced by the underlying colour, yellow in this case, of the object. Change the underlying colour and the image can look different.
The way the image is mapped on to the objects, changes with the object. If the object had been a box all the sides would have a copy of the image on them. A sphere and box of different colours will be used to show these effects.
In this exercise, I went back to using Mozilla's Thimble because it allows images to be added into the file area easily and I was having problems with some other editors getting images to work. The slight downside is the automatic viewing of site, doesn't work with the camera; this though is easily worked around by publishing the site and viewing it as a live webpage (to see an example using the Hiro marker (same one as used in the previous post) go to https://thimbleprojects.org/scottturneruon/517091).
Ok, so what does this code look like and do? Let's look at the code for the example just discussed https://thimbleprojects.org/scottturneruon/517091 ), which has some text; but also a white box and yellow sphere that have the same image mapped onto them.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AR and WebVR using AFrame</title>
<link rel="stylesheet" href="style.css">
<script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
<script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
</head>
<body>
<a-scene>
<a-entity position="-.5 0 2.5">
<a-camera></a-camera>
</a-entity>
<a-text value="UO" color="#FFF" position="-1 1.8 -0.5" align="center" width="2.6">
<a-text value="N" color="#FFF" position="0 -0.125 0" height="1" align="center">
</a-text>
<a-animation attribute="rotation" dur="10000" to="360 360 360" repeat="indefinite"></a-animation>
</a-text>
<a-box src="test1.png" height="0.75" position="0 0 -0.5" width="0.75" depth="0.75" >
<a-sphere position="0 0.5 -.5" radius=".5" color="yellow" src="test1.png">
<a-animation attribute="rotation" dur="7500" to="0 360 0" repeat="indefinite">
</a-animation>
</a-sphere>
<a-animation attribute="rotation" dur="15000" to="360 360 360" repeat="indefinite">
</a-animation>
</a-box>
<a-marker-camera preset="hiro"></a-marker-camera>
</a-scene>
</body>
</html>
Everything in the code has been discussed in the previous post but not put altogeher. It can be seen in action here, a still of the marker and AR in action and the short video showing the movement.
via GIPHY
The combination of block, sphere and text, appear when the marker is visible and started to rotate.
What next?
It would be interesting to explore adding actual icons to the blocks (copyright etc allowing) and create new markers other than the Hiro to use, including using the recognition of different markers to present different AR outputs.
The other area to explore further would be adding externally generated 3D models into the system.
To read more go to
All opinions in this blog are the Author's and should not in any way be seen as reflecting the views of any organisation the Author has any association with. Twitter @scottturneruon
Summary
In the first post WebVR playtime 1: Basics of setting up, images and rotating blocks, I looked at setting up a scene, rotating an object. Second post, recapped the basics, then look at adding video, 360 degree video, and models developed elsewhere. The third post started looking at using WebVR as part of an augmented reality solution building on the great resource Creating Augmented Reality with AR.js and A-Frame by Jerome Etienne, creator of AR.js. This gave us the starting code.
In this post, the ideas are extended further to adding or wrapping images on top of an object.
Adding images to objects
In a previous post (WebVR playtime 1: Basics of setting up, images and rotating blocks) we have seen that in A-Frame if you create a block and in the tag for the block you add an image it gets wrapped on to the block.
As an example in the following code <a-sphere position="0 0.5 -.5" radius=".5" color="yellow" src="test1.png"> a yellow sphere of 0.5 units radius is produced with the image, stored in test1.png, wrapped around the sphere. What makes this effect even more interesting is any white on the image gets replaced by the underlying colour, yellow in this case, of the object. Change the underlying colour and the image can look different.
The way the image is mapped on to the objects, changes with the object. If the object had been a box all the sides would have a copy of the image on them. A sphere and box of different colours will be used to show these effects.
In this exercise, I went back to using Mozilla's Thimble because it allows images to be added into the file area easily and I was having problems with some other editors getting images to work. The slight downside is the automatic viewing of site, doesn't work with the camera; this though is easily worked around by publishing the site and viewing it as a live webpage (to see an example using the Hiro marker (same one as used in the previous post) go to https://thimbleprojects.org/scottturneruon/517091).
Ok, so what does this code look like and do? Let's look at the code for the example just discussed https://thimbleprojects.org/scottturneruon/517091 ), which has some text; but also a white box and yellow sphere that have the same image mapped onto them.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AR and WebVR using AFrame</title>
<link rel="stylesheet" href="style.css">
<script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
<script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
</head>
<body>
<a-scene>
<a-entity position="-.5 0 2.5">
<a-camera></a-camera>
</a-entity>
<a-text value="UO" color="#FFF" position="-1 1.8 -0.5" align="center" width="2.6">
<a-text value="N" color="#FFF" position="0 -0.125 0" height="1" align="center">
</a-text>
<a-animation attribute="rotation" dur="10000" to="360 360 360" repeat="indefinite"></a-animation>
</a-text>
<a-box src="test1.png" height="0.75" position="0 0 -0.5" width="0.75" depth="0.75" >
<a-sphere position="0 0.5 -.5" radius=".5" color="yellow" src="test1.png">
<a-animation attribute="rotation" dur="7500" to="0 360 0" repeat="indefinite">
</a-animation>
</a-sphere>
<a-animation attribute="rotation" dur="15000" to="360 360 360" repeat="indefinite">
</a-animation>
</a-box>
<a-marker-camera preset="hiro"></a-marker-camera>
</a-scene>
</body>
</html>
Everything in the code has been discussed in the previous post but not put altogeher. It can be seen in action here, a still of the marker and AR in action and the short video showing the movement.
The combination of block, sphere and text, appear when the marker is visible and started to rotate.
What next?
It would be interesting to explore adding actual icons to the blocks (copyright etc allowing) and create new markers other than the Hiro to use, including using the recognition of different markers to present different AR outputs.
The other area to explore further would be adding externally generated 3D models into the system.
To read more go to
- https://aframe.io/docs/0.7.0/introduction/
- Creating Augmented Reality with AR.js and A-Frame by Jerome Etienne
- WebVR playtime 1: Basics of setting up, images and rotating blocks
- http://robotsandphysicalcomputing.blogspot.com/2018/02/webvr-playtime-2-video-360-video-and.html
All opinions in this blog are the Author's and should not in any way be seen as reflecting the views of any organisation the Author has any association with. Twitter @scottturneruon
Wednesday, 11 July 2018
WebVR 3 Playtime: Augmented Reality
I am going to try to persuade you that using A-Frame it is not hard to do some simple Augmented Reality (AR) for free, via a browser, but that also can run on a mobile device.
Introduction
This is part of a short series of articles about some experiments with WebVR Web-based Virtual Reality - in this case based on the wonderful A-Frame (https://aframe.io) . In the first post WebVR playtime 1: Basics of setting up, images and rotating blocks, I looked at setting up a scene and then rotating an object. In the second post, recapped the basics, then look at adding video, 360 degree video, and models developed elsewhere.
In this post we are going to start looking at using WebVR as part of an augmented reality solution. I going to start by building on the great resource Creating Augmented Reality with AR.js and A-Frame by Jerome Etienne, creator of AR.js - the starting code below and the basis of the solution comes from that resource.
Getting started.
In the previous two posts I used Thimble from Mozilla, I had a problem with access my camera using Thimble so I switched to Glitch - you may need to register - and Codepen.io.
The code below was adapted from the Creating Augmented Reality with AR.js and A-Frame page.
<!-- include A-Frame obviously -->
<script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script>
<!-- include ar.js for A-Frame -->
<script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
<body style="margin : 0px; overflow: hidden;">
<a-scene embedded arjs>
<!-- create your content here. -->
<!-- define a camera which will move according to the marker position -->
<a-marker-camera preset="hiro"></a-marker-camera>
</a-scene>
</body>
The first script line is the same as in the previous posts setting up the A-Frame WebVR. The second one adds the additional functionality for Augmented Reality via markers. The only other new feature is within the <a-scene></a-scene> tags, a new set of tags <a-marker-camera> saying which markers is being used; in this case, a preset one called Hiro (see below), which available in AR.js.
A blue box and text were added to the scene - just in the same way as adding boxes and text in the first of this series. Shown in code pen below
Using the Hiro marker go to https://codepen.io/scottturneruon/pen/gKVWYq to play!
Next Step
To take this forward I wanted to replace the text and box with some rotating text when the marker is visible. On the AR in action can be found at http://bit.ly/2N0nvWx; you will need the Hiro marker.
The code for the AR in action is shown below.
<script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
<body style="margin : 0px; overflow: hidden;">
<a-scene embedded arjs>
<!-- create your content here. just a box for now -->
<a-text value="University of" color="blue" position="0 0.5 -0.5" align="center" height="2"><a-animation attribute="rotation" dur="5000" to="360 0 0" direction="alternate" repeat="indefinite"></a-animation>
</a-text>
<a-text value="Northampton" color="blue" position="0 0.325 0" height="3" align="center"><a-animation attribute="rotation" dur="5000" to="360 0 0" direction="alternate" repeat="indefinite"></a-animation>
</a-text>
<!-- define a camera which will move according to the marker position -->
<a-marker-camera preset="hiro"></a-marker-camera>
</a-scene>
</body>
Where next
Adding images to objects and adding models are the next experiments.
To read more go to
All opinions in this blog are the Author's and should not in any way be seen as reflecting the views of any organisation the Author has any association with. Twitter @scottturneruon
Introduction
This is part of a short series of articles about some experiments with WebVR Web-based Virtual Reality - in this case based on the wonderful A-Frame (https://aframe.io) . In the first post WebVR playtime 1: Basics of setting up, images and rotating blocks, I looked at setting up a scene and then rotating an object. In the second post, recapped the basics, then look at adding video, 360 degree video, and models developed elsewhere.
In this post we are going to start looking at using WebVR as part of an augmented reality solution. I going to start by building on the great resource Creating Augmented Reality with AR.js and A-Frame by Jerome Etienne, creator of AR.js - the starting code below and the basis of the solution comes from that resource.
Getting started.
In the previous two posts I used Thimble from Mozilla, I had a problem with access my camera using Thimble so I switched to Glitch - you may need to register - and Codepen.io.
The code below was adapted from the Creating Augmented Reality with AR.js and A-Frame page.
<!-- include A-Frame obviously -->
<script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script>
<!-- include ar.js for A-Frame -->
<script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
<body style="margin : 0px; overflow: hidden;">
<a-scene embedded arjs>
<!-- create your content here. -->
<!-- define a camera which will move according to the marker position -->
<a-marker-camera preset="hiro"></a-marker-camera>
</a-scene>
</body>
The first script line is the same as in the previous posts setting up the A-Frame WebVR. The second one adds the additional functionality for Augmented Reality via markers. The only other new feature is within the <a-scene></a-scene> tags, a new set of tags <a-marker-camera> saying which markers is being used; in this case, a preset one called Hiro (see below), which available in AR.js.
A blue box and text were added to the scene - just in the same way as adding boxes and text in the first of this series. Shown in code pen below
Using the Hiro marker go to https://codepen.io/scottturneruon/pen/gKVWYq to play!
Next Step
To take this forward I wanted to replace the text and box with some rotating text when the marker is visible. On the AR in action can be found at http://bit.ly/2N0nvWx; you will need the Hiro marker.
The code for the AR in action is shown below.
<script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
<body style="margin : 0px; overflow: hidden;">
<a-scene embedded arjs>
<!-- create your content here. just a box for now -->
<a-text value="University of" color="blue" position="0 0.5 -0.5" align="center" height="2"><a-animation attribute="rotation" dur="5000" to="360 0 0" direction="alternate" repeat="indefinite"></a-animation>
</a-text>
<a-text value="Northampton" color="blue" position="0 0.325 0" height="3" align="center"><a-animation attribute="rotation" dur="5000" to="360 0 0" direction="alternate" repeat="indefinite"></a-animation>
</a-text>
<!-- define a camera which will move according to the marker position -->
<a-marker-camera preset="hiro"></a-marker-camera>
</a-scene>
</body>
Where next
Adding images to objects and adding models are the next experiments.
To read more go to
- https://aframe.io/docs/0.7.0/introduction/
- Creating Augmented Reality with AR.js and A-Frame by Jerome Etienne
- WebVR playtime 1: Basics of setting up, images and rotating blocks
- http://robotsandphysicalcomputing.blogspot.com/2018/02/webvr-playtime-2-video-360-video-and.html
All opinions in this blog are the Author's and should not in any way be seen as reflecting the views of any organisation the Author has any association with. Twitter @scottturneruon
Subscribe to:
Posts (Atom)
Who wants to produce AI produced cartoon strips
Question: How easy is it produce a comic/cartoon using genetative AI? Let's start with using ChatGPT4o to produce cartoons. The idea wa...
