figure 2 |
figure 3 |
Robots and getting computers to work with the physical world is fun; this blog looks at my own personal experimenting and building in this area.
figure 2 |
figure 3 |
Figure 1 |
Figure 2 |
Code Bug has been around for a while, and it is incredibly cute, When it first came, it was a very interesting piece of kit - and it is still is and fun to play with. It spec means it is still a very useful piece of kit.
In 2020 Code Bug launched and successfully funded a Kickstarter campaign (https://www.kickstarter.com/projects/codebug/codebug-connect-cute-colourful-and-programmable-iot-wearable ) for a new version the Code Bug - CodeBug Connect with a serious upgrade.(and the name Connect is highly appropriate with USB tethering and Wifi capability in this version. The technical specification (taken from their site https://www.kickstarter.com/projects/codebug/codebug-connect-cute-colourful-and-programmable-iot-wearable ) shows how much of an upgrade this is:
Recently the early version of the Connects have been arriving and it is cool (IMHO).
The getting going guide https://cbc.docs.codebug.org.uk/gettingstarted/quickstart.html lives it up to its name and does a better explanation of doing this than I can provide here.
First I played with the USB and the blockly style programming tool https://www.codebug.org.uk/newide/ (see above) essentially producing a very slightly modified version of their starter code. You can perhaps see the Python style coming in with the while True coming in. Works well and it showed one of the different between this version and the older one; the LEDs are now colourful instead of red only. Programming it, while using the laptops USB to power it does lead to pulling the cable in and out to get the code to run - but that is fine and is clearly explained in the guide
import
cbc
from
color import Color
import
time
while
True:
cbc.display.scroll_text(str(" Bug
1"), fg=Color('#f0ff20'))
time.sleep(1)
They have even thought about security. I set my system to connect via wifi through my phone; but when I want to connect through my laptop I had to go through the adoption process to try it on my phone and a laptop - sounds scary but it is well explained in the getting going guide and is relatively simple to do.
Looking forward to exploring the device a lot more, the guide also includes a number of code examples to play with and explore. A feature I particularly liked was seeing the block code rendered as python when using the editor on the phone.
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>
<script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
</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>
<script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
</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>
<script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
</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>
<script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
</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>
<script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
</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>
L
The Top 10 viewed post on this blog in March 2024. Covering areas such as small robots, augmented reality, Scratch programming, robots. Micr...