Monday 30 November 2020

Popular post on this blog: November 2020



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 8 November 2020

'Dancing' Snowman - ok flashing LEDs to music



This post discusses a project that I want to play with since finding out the new Microbit V2 has an built in microphone - this is to use the new microbit in combination with a Ryan Walmsley's SnowPi RGB https://www.kickstarter.com/projects/ryanwalmsley/snowpi-rgb-edition to make the snow,man change the LEDs as the music's volume changes via the microphone. First though, thank to you to the fabulous  Rachel @ItsAll_Geek2Me from Microbit Education Foundation for letting me have Microbits to play with.


So thehe starting point is the Snowman, essentially following the instructions at snowpi.xyz for setting it up and writing an initial program in makecode for the snowman. If fact the code in this project is a twist on the code found there.


You need to use https://makecode.microbit.org/beta#editor at the time of writing and add the neopixels extension (see snowpi.xyz for more details) Some new blocks in the current beta version of makecode add for the new microbit; including some new blocks for the microphone under inputs - a very useful resource for details on the new microbit and programming it is https://tech.microbit.org/latest-revision/ the microphone blocks are in the input section.
 
The code is availabe at https://makecode.microbit.org/_KDo9KghUhPbw  it is a bit hard to see the code in the images below.
 

 

 
 






 
If you do something more with this code please add a comment to the post.



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

Thursday 5 November 2020

Free your Augmented Reality


 

Dr Scott Turner 

Director of Computing at Canterbury Christ Church University, Kent and a Code Club Volunteer. 




 

Age Range 10-14 years 

 

Year Group 5-9, Code Clubs. 

 

Lesson Type: Web programming 

 

Objective 

How to use free web technologies to create Augmented Reality. 

 

Requirements 

  • A computer capable of accessing the required software and ideally has a webcam 

  • Access to AR.JS Studio (free) https://ar-js-org.github.io/studio/ 

  • Access to webhosting or free webhosting sites such as Glitch.com or GitHub 

  • An image (png, jpeg, gif), or video (mp4)  

  • (optional) mobile device with a camera and internet access. 

 

 

 

Augmented Reality (AR) is becoming increasing popular, but often means using proprietary packages such as Blippar to create your own, or write the code yourself. A middle ground on this is AR.js Studio which allows web-based AR applications to be developed completely with out writing code (if connected to a GitHub account) or with a few minor tweaks otherwise 

 

Activity 1 

We are going to link a marker (in this case a specific image with a black border and the letters AR) to an image using AR.JS Studio, to produce a webpage that uses the a camera connected  to  a browser to replace the marker on screen with the image. 

 

First go to https://ar-js-org.github.io/studio/ and pick marker based project  

Text

Description automatically generated 

Graphical user interface, application

Description automatically generated 

Download the marker by clicking on the Download marker link, print out a copy of it, you will need this later. 

Icon

Description automatically generated 

Now export the project. If you have a Github account this is the easier route once the connection between the website and GitHub is set-up it creates the URL containing your project. Now you just run that in a browser on a mobile device or computer with a webcam and start waving your printed out marker to see it in action. My advice is, if you don't have your own web-server, get yourself a Github account and choose that option, and you just log-in to your account. You will need to give the project a name and then push Publish. Depending on your internet connection it can take a few seconds to a minute or so, but it is worth the wait. An example is available athttps://scottturneruon.github.io/Testobjectexs5y2/ 

 

If this is not possible or you have your own space to store webpages then the download the package is useful. This produces a zipped version of the file and we need to add it to a web-serverTo see that in action, the free web-hosting site Glitch.com  is going to be used to host it, you may have to set up a free account.  

  • First step is unzip the files from AR.JS studio. Open Glitch and start a new project, choose a Hello-webpage it will automatically generate a name for the project.  

  • From the unzip file copy the contents of the index.html file and in Glitch replace the contents of the index file already there with the contents on the unzipped index.html. 

  • Open the Assets folder in Glitch and then click on upload new asset, selected the image from the unzipped file.  

  • Click on the uploaded image and it will give you a long URL press the copy button.  

  • Go back to the index.html find the section that goes <a-imag src="assets/asset.png" replace assets/asset.png with your copied URL from the asset folder.  

  • Go back to the unzipped asset folder and then in Glitch upload the marker.patt and get the URL in the same way as we did with the image again copying the URL for this asset 

  • This time in the section that starts <a-marker replace the assets/marker.patt in  url="assets/marker.patt" with the URL copied from the asset folder for marker.patt 

 

Now we can have fun. Near the top of the screen there is what looks like a pair of sunglasses this lets us test it out. Give permission for the camera to share in the browser (if allowed) and wave the marker in front of the camera. In my case it replace the marker with an image of the planet.  

 

We can now share it with the world. In the Glitch go to share and change the tab to Live App and press copy you should now have copied a new address for example https://shelled-humdrum-rainbow.glitch.me that we can use on a browser including those on mobile devices. A word of warning there can sometimes be a problem with the Glitch approach working on IOS on some devices. 

 

 

 

 

A picture containing coffee, cup, table, sitting

Description automatically generated 

 

Follow on Activities 


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

Remote Data Logging with V1 Microbit

In an earlier post  https://robotsandphysicalcomputing.blogspot.com/2024/08/microbit-v1-datalogging.html  a single microbit was used to log ...