Robots and Physical Computing: VR

Showing posts with label VR. Show all posts

Wednesday 31 May 2023

Friday 31 December 2021

Friday 26 February 2021

Build yourself a Planet - Web VR

Using Mozzila's brilliant AFrame, a web-based Virtual Reality model of a planet with rings and include a moon with an image on it.

Step 1. Basic Planet
The first step is to set a new site in Glitch.com and then add a white sphere on a black background.

<html>

<head>

</head>

<body>

<a-scene>

<a-sphere position="0 1.25 -5" radius="3" color="white" >

</a-sphere>

<a-sky color="black"></a-sky>

</a-scene>

</body>

</html>

Using the Aframe 'tags' to create a white sphere and to create a black background

Step 2: Rotate the planet and add some colour
Now we can add a surface to the planet by finding an appropriate image to wrap around the sphere. in this example, I used the site Solar Systems Scope (https://www.solarsystemscope.com/textures/) and downloaded an image of Jupiter's surface (https://www.solarsystemscope.com/textures/download/2k_jupiter.jpg).

(a)If you are using Glitch: This needs to be copied into the assets folder of the project and the URL generated (by left-clicking on the image when it is in the folder) copied.

(b)On you own site upload the image to the same folder as the webpage the ‘URL’ will be filename

(c ) Alternatively use this URL in either approach https://cdn.glitch.com/febf6408-3c33-4608-ac90-b087753e5792%2F2k_jupiter.jpg?v=1573393224376

Now by adding src="" and in the speech-marks paste in the URL for the image; the image wraps around the sphere.

<html>

<head>

</head>

<body>

<a-scene>

<a-sphere position="0 1.25 -5" radius="3" color="white" src="https://cdn.glitch.com/febf6408-3c33-4608-ac90-b087753e5792%2F2k_jupiter.jpg?v=1573393224376"

animation="property: rotation; to: 0 360 0; loop: true; dur: 10000">

</a-sphere>

<a-sky color="black"></a-sky>

</a-scene>

</body>

</html>

Now to rotate it add, also within the , section animation="property: rotation; to: 0 360 0; loop: true; dur: 10000" (see above or the code at the end of the post for more details).

Step 3: Adding ring
In Aframe if you nest another object with the <></> of another object it's position is set relative to the first object. This principle is going to be used here put a ring around the planet. The first stage is to add the ring object is used for this and a the same rotating animation is used. We are going to use a squashed doughnut shape <a-torus> to do this. One the webpage is running you will probably need use the down arrow key to zoom out to see the ring.

<html>

<head>

</head>

<body>

<a-scene>

<a-sphere position="0 1.25 -5" radius="3" color="white" src="https://cdn.glitch.com/febf6408-3c33-4608-ac90-b087753e5792%2F2k_jupiter.jpg?v=1573393224376"

animation="property: rotation; to: 0 360 0; loop: true; dur: 10000">

<a-torus position="0 0 0"

arc="360"

rotation="90 0 0"

color="white" radius="5"

radius-tubular="0.05"

animation="property: rotation; to: 90 0 0; loop: true; dur: 3000">

</a-torus>

</a-sphere>

<a-sky color="black"></a-sky>

</a-scene>

</body>

</html>

Step 4: Adding a moon
The process is really just combining elements of the steps 1-3. Create a new sphere,set the radius to something around 0.25 to 0.5; colour it with whatever you feel is appropriate, add an image (in the example code one has been added) if you want, set a rotation (it is is fun to play with these a bit and place the moon on the ring (setting position="5 0 0" in this case does this.

If the images are accessible as web sources this could be a great option.

<html>

<head>

</head>

<body>

<a-scene>

<a-sphere position="0 1.25 -5" radius="3" color="white" src="https://cdn.glitch.com/febf6408-3c33-4608-ac90-b087753e5792%2F2k_jupiter.jpg?v=1573393224376"

animation="property: rotation; to: 0 360 0; loop: true; dur: 10000">

<a-torus position="0 0 0"

arc="360"

rotation="90 0 0"

color="white" radius="5"

radius-tubular="0.05"

animation="property: rotation; to: 90 0 0; loop: true; dur: 3000">

<a-sphere position="5 0 0"

rotation="0 0 0"

radius="0.5"

color="yellow" src="https://cdn.glitch.com/febf6408-3c33-4608-ac90-b087753e5792%2Fpanic.png?v=1573395380360"

animation="property: rotation; to: 0 259 0; loop: true; dur: 3000">

</a-sphere>

</a-torus>

</a-sphere>

<a-sky color="black"></a-sky>

</a-scene>

</body>

</html>

Step 5: Lets us add some text.

So we might want to put some text into the world we can do that with <a-text value=””>

<html>

<head>

</head>

<body>

<a-scene>

<a-sphere position="0 1.25 -5" radius="3" color="white" src="https://cdn.glitch.com/febf6408-3c33-4608-ac90-b087753e5792%2F2k_jupiter.jpg?v=1573393224376"

animation="property: rotation; to: 0 360 0; loop: true; dur: 10000">

<a-torus position="0 0 0"

arc="360"

rotation="90 0 0"

color="white" radius="5"

radius-tubular="0.05"

animation="property: rotation; to: 90 0 0; loop: true; dur: 3000">

<a-sphere position="5 0 0"

rotation="0 0 0"

radius="0.5"

color="yellow" src="https://cdn.glitch.com/febf6408-3c33-4608-ac90-b087753e5792%2Fpanic.png?v=1573395380360"

animation="property: rotation; to: 0 259 0; loop: true; dur: 3000">

</a-sphere>

</a-torus>

</a-sphere>

<a-text value="Planet CCCU Computing" position="0 4 -2"></a-text>

<a-sky color="black"></a-sky>

</a-scene>

</body>

</html>

We can get interesting effects if we add the text between </a-sphere> and </a-torus> Try adding this in there. <a-text value="Planet CCCU Computing" position="0 3 -2"></a-text>

Have a play with altering the text and putting the line elsewhere in the code. What happens?

Step 6:

Now going to use an image to change the background. The image is "space" by fleskw is licensed with CC BY 2.0. To view a copy of this license, visit https://creativecommons.org/licenses/by/2.0 You will need to change the sky colour to a light colour for this to work. So change the sky line in the code to

<a-sky color="white" src="https://cdn.glitch.com/425c1a98-7ba9-463d-817d-6b491a516246%2F97b3bf6d-ced1-4041-80d4-b6c9a98ba43d.jfif?v=1614341330757"></a-sky>

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

Monday 22 February 2021

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 would like to play with Python and do a Python version of it. Well it is actually very easy to do it.

You can do it in two stages from the block code. First click on the <> icon (lighted in the figure above and it gives a further view producing Python code that changes as you change the blocks. The last stage is to convert to a text project (button at the bottom right of the screen.

Example of the code.

myVariable = 0

def when_started1():

    global myVariable

    drivetrain.drive_for(FORWARD, 100, MM)

    while not down_eye.detect(RED):

        drivetrain.drive_for(FORWARD, 5, MM)

        if right_bumper.pressed():

            drivetrain.drive_for(REVERSE, 30, MM)

            drivetrain.turn_for(LEFT, 20, DEGREES)

            drivetrain.drive_for(FORWARD, 20, MM)

        else:

            if left_bumper.pressed():

                drivetrain.drive_for(REVERSE, 30, MM)

                drivetrain.turn_for(LEFT, 120, DEGREES)

                drivetrain.drive_for(FORWARD, 10, MM)

            else:

                drivetrain.turn_for(RIGHT, 10, DEGREES)

                drivetrain.drive_for(FORWARD, 10, MM)

        wait(5, MSEC)

vr_thread(when_started1())

The code in action

This is possibly a nice transition tool going from block-based programming to text-based.

Related posts

https://robotsandphysicalcomputing.blogspot.com/2021/02/escape-maze-with-vr-robot-vex-vr.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 h any association with. Twitter @scottturneruon

Sunday 21 February 2021

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 simulators to play with. Three examples are listed below:

- Make code for Lego EV3 https://robotsandphysicalcomputing.blogspot.com/2020/05/programming-robots-virtually-3-lego-ev3.html

- iRobot simulator https://robotsandphysicalcomputing.blogspot.com/2020/04/programming-robots-virtually-2-irobot.html

- Vex robotics Vexcode VR https://robotsandphysicalcomputing.blogspot.com/2020/04/programming-robots-virtually-1-vexcode.html

It is the last one of these (https://www.vexrobotics.com/vexcode-vr) that is the focus of this post and return to hit, after an earlier discussion in https://robotsandphysicalcomputing.blogspot.com/2020/04/programming-robots-virtually-1-vexcode.html .

Two of the nice things about the package, apart from being free, are it uses a Scratch-like programming language and it provides a 3D environment and models - playgrounds for a number of scenarios.

So in this post, I will be discussing playing, or rather starting to play with the robot navigating a 3D maze (see the figure above). A feature I particularly like is you can change the views from an overhead view to an onboard version or one that seems to follow the robot.

So as I starting point I programmed it to essentially bounce along the walls keeping the wall on it's right and stopping when the downward 'eye' detects red on the floor for the end of the maze. The sensors include left and right bumper sensors; along with two sensors for detecting colours one facing forward and one down. The code I use is shown below:

It took 8 minutes to solve the maze - which is slow. I would be interested to see the solutions of others being shared. As a simulated robot programming system this is great fun and challenging, I would recommend having a play iot is free and available at https://www.vexrobotics.com/vexcode-vr. I want to have a go with the Python version to replicate or better the solution above (start it as a text project rather than a blocks project when starting a new project).

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

Saturday 25 April 2020

Programming Robots Virtually 1 - VEXcode VR

For a number of years, I have been playing with robots as a means of developing programming/coding skills with students. The problem is when classes get larger or it is used as part of an assessment there is very rarely enough robots to satisfy all the students Turner and Hill (2008). So
therefore, the search has been on for a tool that allows robots to be simulated, programmed, ideally web-based, free and simple to use. Lately, a number of interesting tools have arisen. In this series of posts, I am going to look at experimenting with a few of them. In this post, starting by looking at VEXCode VR - available at https://vr.vex.com/.

VEXcode VR https://vr.vex.com/ from VEX Robotics (https://www.vexrobotics.com/) is a simulator and programming tool for their Scratch-like programming tool VEXCode - at the time of writing is free. If you can do Scratch this is a nice next stage, consisting of the simulator (playground) and the programming environment (see below and the video above.)

Playgrounds
These are the simulated environments you can select from, with a two camera-views; downward camera for overhead view and angled camera to give a 3D view (as shown in the video) via buttons on the bottom right hand side of the playground. Also you can toggle, using the third button on the right hand side, the ability to see the status of the various sensors. There are a number of different playgrounds to play with. In this post I am going to use two of them

Example 1: The Square
Using the Grid Map playground and angled camera. I wanted to start with a stand-by; getting the robot to move in a square. The robot moves forward for 30mm and then turns right 90 degrees; and this is repeated 4 times (see below)

So the commands are very scratch-like. I was impressed, the 3D gave a clear view it in action, the commands were intuitive and (yes repeating myself) very easy to transfer to from Scratch.

Example 2: Playing with Sensors a bit
Now for more fun, getting it to react to the environment a bit; by changing the Playground to Castle Crasher you get an environment that has simulated blocks and red perimeter to interact with. As you would hope, there are sensing blocks including LeftBumper and RightBumper - no guesrss for what they do and DownEye which can detect the red line. The code is simple and shown below, based on detecting the block using the bumpers, move to the side and recheck if (shown below) is if a block is in-front and if not go forward. If it finds the red line reverse back and rotates 180 degrees.

As a side project I wondered what would happen if you didn't put code in to detect the red line, how would it cope with falling off the surface; it simulates it quite well showing it falling off which quite fun. One mistake I made initially is accidentally selecting the wrong form of turning action rotating when it should have been a turn.

Overview so far...
If you can already use movement, sensing and control blocks in Scratch, you can do this. Has potential as a source of online activity's, especially as the time of writing in the UK we are 'social-distancing'. In their paper Turner and Hill (2008) also highlighted that robots are a difficult resource to manage for a large class; this kind of option allows simulation and programming of a robot to be tried out without actually having the robot. Most importantly it is fun.

Reference
Turner S and Hill G(2008) "Robots within the Teaching of Problem-Solving" ITALICS vol. 7 No. 1 June 2008 pp 108-119 ISSN 1473-7507 https://doi.org/10.11120/ital.2008.07010108

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

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

Robots and Physical Computing

Wednesday 31 May 2023

Popular posts May 2023

Top locations

Friday 31 December 2021

Top 10 viewed posts 2021 on the Robot and Physical Computing Blog

Speech Recognition in Scratch 3 - turning Hello into Bonjour!

PS3 Controller to move a USB Robot Arm

Scratch Robot Arm

Tinkercad and Microbit: To make a neuron

Escape the Maze with a VR robot - Vex VR

Easy, Free and no markers Augmented Reality - location based AR

Coral Dev Board and Raspberry Pi

Explaining the Tinkercad microbit Neural network

VR robot in a maze - from Blocks to Python

4tronix Eggbit - cute and wearable - hug avoider

Friday 26 February 2021

Build yourself a Planet - Web VR

Monday 22 February 2021

VR robot in a maze - from Blocks to Python

Sunday 21 February 2021

Escape the Maze with a VR robot - Vex VR

Saturday 25 April 2020

Programming Robots Virtually 1 - VEXcode VR

Saturday 14 July 2018

WebVR 4 Playtime: Putting Objects into Augmented Reality

Top posts on this blog in March 2024

Search This Blog