Games, Animation and Arts – Introduction of the Tools

Uncategorized

When running my Games, Animation and Arts class, I am using three programming tools:

  1. P5.js, this is a Javascript library based on the Processing language.
  2. Alice 3, a program to tell stories and make small games in 3D, using a block based programming languag. You can also code Alice in Java, but this is not covered here.
  3. Micro:bit controller using external hardware as LEDs, Neopixel bands as well as other sensors and actors, programmed in Blockly, Python or C.

P5.js

P5.js is a library for the programming language Javascript. Javascript is very popular for web programming. We will use this language to learn the basics of coding. P5.js provides a lot of functions that allow us to create artwork. Here is one example:

P_4_3_1_02-150x150

Have a look at generative-gestaltung and look at the section “Sketches”. By clicking on the portfolio images, you can use them. When you are interested to see how they are working, click on the “Open in P5.js Editor” link. This coding environment is the primary tool in the activity.

Furthermore, you find a nice introduction to Javascript based on a derivative of p5.js called processing.js on Khanacadamy.

Alice 3

Alice is a platform that lets you to tell a story with animated 3D figures and sound. A scene editor provides you with plenty of characters and props to set up the scenes of your story.

181002 AliceUfoSpot1

A code editor allows you to control the flow of the story by selecting, arranging and configuring blocks. It’s a bit like Scratch, but you can do more things. The program when started controls the flow of your story.

181002 AliceIntroCode1

A nice introduction is following an Hour of Code activity described here.

Alice 3 is not available on the web browser, but you can freely download the program here and install it on your computer. If you want to transfer your projects between school and class, just load them on your Google Drive or on an USB stick. For more advanced coders, you can also program. Alice scenes with Java. A description can be found on the Alice homepage.

The micro:bit

The micro:bit microcontroller is a simple to use platform that allows you to control many different devices as LEDs, Neopixel bands, level meters, basically all sorts of sensors and activators. The program needs to be written on a PC, some tools run on a browser others require you to install an application on your computer. Once you have finished your program, you compile and download it on the micro:bit, either by USB cable or by Bluetooth. This depends on the tool. Here is an example of a program controlling a Neopixel band.

Here is the setup of the hardware.

IMG_1373

Code sample

The following code is written in Python and uses an editor and compiler you can access with the web browser. The browser will compile you an executable file, a program, that you can upload to the micro:bit with a USB cable.

This first example changes the colour of the Neopixels one after another and leaves each pixel on until it is refreshed in a different colour.

"""
Repeatedly displays random colours onto the Neopixels.
Works for Neopixel strips of 30.
"""

from microbit import *
from neopixel import NeoPixel
from random import randint

# Setup the Neopixel strip on pin0 with a length of 30 pixels
np = NeoPixel(pin0, 30)
while True:
#Iterate over each LED in the strip
for pixel_id in range(0, len(np)):
red = randint(0, 60)
green = randint(0, 60)
blue = randint(0, 60)
# Assign the current LED a random red, green and blue value between 0 and 60
np[pixel_id] = (red, green, blue)
# Display the current pixel data on the Neopixel strip
np.show()
sleep(100)

Here is another example with a different lighting pattern:


"""
Adafruit example, modified to run with 30 LED strip.
see at
https://learn.adafruit.com/pages/11472/elements/2981640/download
for the basic version with one running neopixel
180815 Modified the original version, but not yet debugged.
181001 Debugged and running!
"""

from microbit import *
from neopixel import NeoPixel

num_pixels = 30
foreground = [255, 0, 0] # Int color - red, green and blue
foreground2 = [0, 255, 0]
background = [16, 16, 16]

ring = NeoPixel(pin0, num_pixels)

while True:
# red/green dot circles around a white background (for 30 neopixel strip)
for i in range(0, num_pixels-1):
ring[i] = foreground # set pixel i to foreground
ring[i+1] = foreground2
ring.show() # actually display it
sleep(50) # milliseconds
ring[i] = background # set pixel to background before moving on
ring[i+1] = background
ring.show()
# implement the closing of the circle for last and first element.
ring[num_pixels-1] = foreground
ring[0] = foreground2
sleep(50)
ring[num_pixels-1] = background
ring[0] = background

With the micro:bit you can create interactive artefacts, that’s what we are aiming for in this course.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.