Robots and Physical Computing

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

Sunday 14 February 2021

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 can be found at https://www.tinkercad.com/things/hPV4nU0Asr5-smooth-bojo

Quick overview of a simple neural network; at its simplest is has at least three layers of neurons where the output of the first layer's neuron, the input layer, is connected as an input to every neuron in the next layer, the hidden layer. The output of the neurons in the hidden layer connects as inputs to every neuron in the final output layer - which gives the outputs from the network The figure below gives an overview; neurons are processing units.

Well, sort of. Neurons as processing units is certainly true for the hidden and the output layers. It is not true though for the input layer; this is literally a layer of inputs with no processing going on. So going back to the first figure of tinkercad microbit neural network and comparing it with the overview of the neural network we can see the three layers.

The input layer is just the two switches. Hidden layer neurons taks the inputs and processes them (the red abd green microbits in the image. finally, the yellow microbit takes inputs from the 'hidden layer neurons' is the output layer - a single output requires a single neuron in the output layer.

All of this can be found at https://www.tinkercad.com/things/hPV4nU0Asr5-smooth-bojo

Have a play,

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's

Saturday 6 February 2021

Making a neural network in Tinkercad from Microbits

Tinkercad and microbit neural network

In a previous post I produced a single neuron based around microbits in Tickercad - see here.

To extend this the basic ideas discussed in that the previous post where extended to three microbit joined together. In other words a network of neurones or neural network.

Basic requirements of a neuron are

Requirements

- By altering the bias (or w0 in the example), weights change the behaviour of switches changes.

-when switch is pressed a variable x1 or x2 is set to 1 depending on which button is pressed and when released it goes to 0.

- if (bias+w1*x1+w2*x2)>=0 then a T for True appears of the LEDs otherwise F for False is shown.

So by selecting the weights and connecting the outputs (p2) from the microbits labelled as Red and Green in the image above as inputs to the yellow microbit 'neuron' we can form a neural network. Switches as the inputs and the screen on the yellow 'neuron' as the output of the network showing true (T) or false(F).

So to build a XOR from the 'neurons'

'hidden layer'

Red microbit had the variables w0 set to -1 and W1 set to 0 and W2 set 1

Green microbit had the variables w0 set to -1 and W1 set to 1 and W2 set 0

'output layer'

Yellow microbit had the variables w0 set to -1 and W1 set to 1 and W2 set 1

All of this can be found at https://www.tinkercad.com/things/hPV4nU0Asr5-smooth-bojo or through the link shown below:

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 30 January 2021

Blog stats: Most read posts in January 2021

Thursday 21 January 2021

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 of basic components available to build circuits out of.

To have a quick play I wonder if using the built in Scratch=like code blocks, I could build a simulation of neuron on the microbit.

Requirements

- By altering the bias, weights change the behaviour of buttons A and B

-when A is pressed a variable input1 is set to 1 and when released it goes to 0. The same happens for Button B and a variable input 2

- if (bias+weight1*input1+weight2*input2)>=0 then a T for True appears of the LEDs otherwise F for False is shown.

That is it really, apart initialising the variables. The code for producing an OR is shown below and the GIF at the end shows an AND in action:

The GIF below shows it action for an AND (bias is set to -2); change the bias to -1 and you would get an OR.

The whole thing is available at: https://www.tinkercad.com/things/8Ph6UBFdICz-brave-duup

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