More results...

Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors
post
page
Python IDE Dashboard

Arduino: RGB Gradient

In this challenge we will use the Arduino board to control a RGB LED to create a gradient light effect where the LED will fade from red to purple, to blue, to purple and back to red.

gradient-red-blue-red

You do not need to have access to an Arduino board. Instead you can use the online Arduino simulator from Tinkercad to recreate the electronic circuit and add the code provided below.

Open Tinkercad in new window

RGB Colour Codes


Did you know that every colour on the screen can be represented using an RGB code (Red, Green, Blue) code. This code consists of three numbers between 0 and 255, indicating how much red, green and blue are used to recreate the colour.

For instance the RGB code for:

  • Red is (255,0,0)
  • Green is (0,255,0)
  • Blue is (0,0,255)
  • Yellow is (255,255,0)
  • Orange is (255,165,0)

Check the following RGB Color picker to see how RGB codes work:

Electric Circuit


An RGB LED is a 3-in-1 LED. It consists of a RED LED, a Green LED and a Blue LED all within the same component. It has 3 cathodes (+ pins) that can take different amperages. It has 1 common anode (- pin).
RGB-LED
This is how we will connect our RGB LED to our Arduino board.
arduino-RGB-gradient

The purpose of the resistors is to limit the amperage in the circuit and hence protect the LED from receiving a too strong current (which could damage the LED). The resistors we use here are 100 ohms (Brown Black Brown rings).

C/C++ Code

// Arduino - RGB Gradient - www.101computing.net/arduino-rgb-gradient
int redOut = 13;
int greenOut = 11;
int blueOut = 12;

void setup() {
  pinMode(redOut, OUTPUT);
  pinMode(greenOut, OUTPUT);
  pinMode(blueOut, OUTPUT);
}

void setRGB(int red, int green, int blue)
 {
    analogWrite(redOut, red);
  	analogWrite(greenOut, green);
  	analogWrite(blueOut, blue);
}

void loop() {
  int red = 255;
  int green = 0;
  int blue = 0;
  for (int i = 0; i <= 255; i++) {
    blue = i;
	setRGB(red,green,blue);
    delay(20);
  } 
  for (int i = 0; i <= 255; i++) {
    blue = 255 - i;
	setRGB(red,green,blue);
    delay(20);
  } 
  
}

Your Challenge


Tweak this code to create other gradient animations:
Gradient 1: Cyan, Magenta, Cyan
gradient-cyan-magenta-cyan
Gradient 2: Cyan, Yellow, Cyan
gradient-cyan-yellow-cyan
Gradient 3: Green, Yellow, Magenta, Cyan, Green
gradient-green-yellow-magenta-cyan-green

Arduino Whack a Mole

For this challenge we will create a a game of Whack-A-Mole using an Arduino device/board, three LEDs, three push buttons and a piezo buzzer.

You do not need to have access to an Arduino board. Instead you can use the online Arduino simulator from Tinkercad to recreate the electronic circuit and add the code provided below.

Open Tinkercad in new window

Electronic Circuit


First you will need to recreate the following electronic circuit:
arduino-Whack a Mole

C/C++ Code


Then you will need to use the following code (When using tinkerpad, choose the text option rather than blocks)

// Arduino Whack-A-Mole - www.101computing.net/arduino-whack-a-mole
int red = 0;
int green = 0;
int blue = 0;
int redIn = 5;
int redOut = 11;
int greenIn = 6;
int greenOut = 12;
int blueIn = 7;
int blueOut = 13;
int piezoPin = 10;
int incorrectOut = 10;
int correctOut = 9;
int mole = -1;

void setup()
{
  pinMode(redOut, OUTPUT); 
  pinMode(greenOut, OUTPUT); 
  pinMode(blueOut, OUTPUT); 
  pinMode(redIn, INPUT); 
  pinMode(greenIn, INPUT); 
  pinMode(blueIn, INPUT); 
}

// During the pause all thre moles are hidden, pressing any button would trigger a low pitch noise
void pause() {
  unsigned long current;
  unsigned long end;
  
  mole = -1;
  digitalWrite(redOut, LOW);
  digitalWrite(greenOut, LOW);
  digitalWrite(blueOut, LOW);
  
  int pause = rand() % 500 + 100;
  current = millis();
  end = millis() + pause;
  while  (millis()<end) {
   	red = digitalRead(redIn); 
   	green = digitalRead(greenIn); 
   	blue = digitalRead(blueIn); 
    if (red == HIGH || green == HIGH || blue == HIGH) { 
       tone(piezoPin, 100, 300); //Pin,Frequency,Duration
       delay(300);
    }
  }
}

// Randomly decide which LED to turn on
void displayMole() {
  mole = rand() % 3 + 1;
  if (mole==1) {
    digitalWrite(redOut, HIGH); 
  } else if (mole==2) {
    digitalWrite(greenOut, HIGH);
  }else if (mole==3) {
    digitalWrite(blueOut, HIGH); 
  }
}

// If the user presses a button corresponding to the right LED (Whack a mole) > High pitch noise
// If the user presses the wrong button > Low pitch noise
void whackMole() {
  unsigned long current;
  unsigned long end;
  current = millis();
  end = millis() + 500;
  while  (millis()<end) {
  	red = digitalRead(redIn);  // read input value
  	if (red == HIGH) {         // check if the input is pressed
   		if (mole==1) {
        	// High pitch tone +++
    		tone(piezoPin, 1000, 10); //Pin,Frequency,Duration
    		delay(10);
    	} else {
        	// Low pitch tone ---
        	tone(piezoPin, 100, 300); //Pin,Frequency,Duration
    		delay(300);
   	 	}  
  	}
    green = digitalRead(greenIn);  // read input value
  	if (green == HIGH) {         // check if the input is pressed
   		if (mole==2) {
        	// High pitch tone +++
    		tone(piezoPin, 1000, 10); //Pin,Frequency,Duration
    		delay(10);
    	} else {
        	// Low pitch tone ---
        	tone(piezoPin, 100, 300); //Pin,Frequency,Duration
    		delay(300);
   	 	}  
  	}
    blue = digitalRead(blueIn);  // read input value
  	if (blue == HIGH) {         // check if the input is pressed
   		if (mole==3) {
        	// High pitch tone +++
    		tone(piezoPin, 1000, 10); //Pin,Frequency,Duration
    		delay(10);
    	} else {
        	// Low pitch tone ---
        	tone(piezoPin, 100, 300); //Pin,Frequency,Duration
    		delay(300);
   	 	}  
  	}    
  }  
}

void loop() {
  pause();
  displayMole();
  whackMole();
}
Tagged with:

Arduino Traffic Lights

For this challenge we will create a traffic lights using an Arduino device/board and three LEDs.

We will use C/C++ to create the code to control the Arduino board to reproduce a following traffic lights sequence:
traffic-light-sequence

You do not need to have access to an Arduino board. Instead you can use the online Arduino simulator from Tinkercad to recreate the electronic circuit and add the code provided below.

Open Tinkercad in new window

Electronic Circuit


First you will need to recreate the following electronic circuit:
arduino-traffic-light

C/C++ Code


Then you will need to use the following code (When using tinkerpad, choose the text option rather than blocks)

// Arduino Trafic Lights - www.101computing.net/arduino-traffic-lights

void setup()
{
  pinMode(13, OUTPUT); // Red LED
  pinMode(12, OUTPUT); // Amber LED
  pinMode(11, OUTPUT); // Green LED
}

void loop()
{
  // Green
  digitalWrite(13, LOW);
  digitalWrite(12, LOW);
  digitalWrite(11, HIGH);
  delay(3000); // Wait for 3000 millisecond(s)
  
  // Amber
  digitalWrite(12, HIGH);
  digitalWrite(11, LOW);
  delay(1000); // Wait for 1000 millisecond(s)

  // Red
  digitalWrite(13, HIGH);
  digitalWrite(12, LOW);
  delay(3000); // Wait for 3000 millisecond(s)

  // Red + Blinking Amber
  digitalWrite(13, HIGH);
  digitalWrite(11, LOW);
  for (int i = 0; i < 3; i++) {
  	digitalWrite(12, HIGH);
    delay(500); // Wait for 500 millisecond(s)
  	digitalWrite(12, LOW);
    delay(500); // Wait for 500 millisecond(s)
  }
}

Lego Traffic Ligths


If you have access to an Arduino board you can create your own traffic lights and you can plug your LEDs on a breadboard or use lego bricks to create your traffic lights.
lego-traffic-light-frontlego-traffic-light-backlego-led

LEDYou will need:

  • 1 arduino board
  • 1 breadboard
  • 3 resistors (220Ω)
  • 3 LEDs (Red, Organe/Yellow, Green)

Make sure that you always connect the cathode of the LED (short leg, flat edge of the LED) to a black wire.

Create your own Sound Effects in Python

zapThe purpose of this challenge is to create your own collection of sound effects to be used a library of assets for your own retro arcade games.

We will use Python code online to create the sound file using EarSketch.

EarSketch?


A Digital Audio Workstation (DAW), is the main tool for producing music on a computer. A DAW is specialised computer software for recording, editing, and playing digital audio files. EarSketch is a DAW which let you place audio clips and effects into a DAW timeline using either Python code or JavaScript code.

Check the following sound effects that we have created using EarSketch. You can re-use and adapt the code for your own video game projects.

Cannon EffectRefill EffectAlternative Cannon Effect
#Cannon Effect by 101Computing.net
from earsketch import *

init()
setTempo(120)
clip = DUBSTEP_BASS_WOBBLE_018
clip = EIGHT_BIT_ATARI_SFX_001

# 0 starts playing a clip, - is a rest/silence, + extends the audio clip into the next sixteenth note sub-beat
beat = "-0+0+-0+0+-0+0+--000000+-000000+"

makeBeat(clip, 1, 1, beat)

finish()
Open sound effect using EarSketch
#Refill/Reload Effect by 101Computing.net
from earsketch import *
init()
setTempo(120)

clip = EIGHT_BIT_ATARI_LEAD_007
beat = "00000000000000000000000000000000"
makeBeat(clip, 1, 1, beat)
setEffect(1, PITCHSHIFT, PITCHSHIFT_SHIFT, 0, 1, 12, 3)

# Finish
finish()
Open sound effect using EarSketch
#Cannon Effect by 101Computing.net
from earsketch import *

init()
setTempo(120)
clip = DUBSTEP_BASS_WOBBLE_018

# 0 starts playing a clip, - is a rest/silence, + extends the audio clip into the next sixteenth note sub-beat
beat = "-00+-00+-00+-00+"
makeBeat(clip, 1, 1, beat)

finish()
Open sound effect using EarSketch

Using Sound Effects with PyGame


To add sound effects, download some wav or mp3 files into a folder called “Sounds” and add the following code when you want to play the sound effect:

effect = pygame.mixer.Sound('Sounds/cannon_effect.mp3')
effect.play()

Create your own music using Python!

retro-musicFor this challenge we will investigate how we can use Python code to create our own background music and sound effects to be used in a retro arcade game.

Most music editing software (e.g. GarageBand, Cubase, FL Studio, Logic Pro etc.), are Digital Audio Workstations (DAW) and let you create your own music by adding audio clips, virtual instruments and effects to a multi-track timeline. Editing and mixing your music is done through a Graphical User Interface.

On occasions, you may try a different approach to control the DAW through code. Websites such as EarSketch let you create your code online using either Python or JavaScript and import it to a DAW to visualise your timeline and play it.

Digitial Audio Workstation

Digitial Audio Workstation

In the example below, we are using Python code with basic audio clips from the “Eigthbit” library to recreate some retro arcade game music to be used on a game intro / splash screen.

It demonstrates some of the key basic features of EarSketch:

  • Set the tempo
  • Import audio clips (on different tracks and at specified times)
  • Add audio clips to the timeline
  • Add effects (including fade in, fade out and delay effects)
  • Use a loop to repeat a clip

Python Code

#		python code
#		script_name: Game_Intro.py
#
#		author: 101Computing
#		description: Background music for intro 
#

from earsketch import *

init()
setTempo(120)

clip1 = EIGHT_BIT_ATARI_SFX_004
clip2 = EIGHT_BIT_ATARI_LEAD_011
clip3 = EIGHT_BIT_ATARI_LEAD_010

pointA = 1.75
repeat = 3
pointD = pointA + repeat 

#fitMedia(Clip,Track,StartMeasure,EndMeasure)
fitMedia(clip1,1,1,2)
for i in range(0,repeat):
  fitMedia(clip2,2,pointA + i,pointA + i + 1)

fitMedia(clip3,3,pointA,pointD + 1)

#setEffect(Track,effect,parmeter,value)
setEffect(3, VOLUME, GAIN, -10)

#setEffect(Track,effect,parmeter,value,start measure,value,end measure)
#Fade in
setEffect(1, VOLUME, GAIN, -40, 1, 0, 1.75)
#Delay Effect
setEffect(1, DELAY, DELAY_TIME, 250)
setEffect(2, DELAY, DELAY_TIME, 250)
#Fade Out
setEffect(3, VOLUME, GAIN, -10, pointD, -60, pointD+1)

finish()

Test this code on EarSketch


You can test this code on EarSketch.

Adding Background Music with PyGame


To add a background soundtrack, download a wav file or mp3 file into a folder called “Sounds”.

At the start of your code (main.py), after importing the pygame library, add the following lines of code:

pygame.mixer.pre_init(frequency=44100, size=-16, channels=2, buffer=4096)
pygame.mixer.music.load('Sounds/soundtrack.mp3')
pygame.mixer.music.play(-1) #-1 means loops for ever, 0 means play just once)

Note that you can stop the music at any time using the following instruction:

pygame.mixer.music.stop()

You may prefer to pause the music:

pygame.mixer.music.pause()

… or unpause the music:

pygame.mixer.music.unpause()

Adding Sound Effects using PyGame


To add sound effects, download some wav or mp3 files into a folder called “Sounds” and add the following code when you want to play the sound effect:

effect = pygame.mixer.Sound('Sounds/beep.wav')
effect.play()

Scratch -Take the Quiz!

Answer these 10 questions to test your understanding of Block Programming when using Scratch.

Take the Quiz! (open full screen)


Check that you understand the different types of validation checks by completing this quiz:

Extension Task


Use the scratch website to recreate some of the scripts used in this quiz.

Tagged with: , ,

Flowchart Prediction Tables

For each of the following flowcharts complete the matching prediction table to work out the expected output based on the given input values.

Flowchart #1Flowchart #2Flowchart #3
flowchart-guess-the-output-1

Input Values Expected Output
X Y
10 15
8 6
16 12
10 5
Check my answers!
flowchart-guess-the-output-2

Input Values Expected Output
X Y
4 3
5 4
-5 3
0 10
Check my answers!
flowchart-guess-the-output-3

Input Values Expected Output
X Y
0 3
10 8
0 2
10 0
Check my answers!


unlock-access

Solution...

The solution for this challenge is available to full members!
Find out how to become a member:
➤ Members' Area

Computer Graphics Crossword

crosswordAre you confident with your understanding of computer graphics? Can you explain the difference between bitmap graphics and vector-based graphics?


Computer GraphicsOpen Crossword Puzzle in a New Window

unlock-access

Solution...

The solution for this challenge is available to full members!
Find out how to become a member:
➤ Members' Area
Tagged with:

Bitmap vs. Vector Based Graphics

It’s almost impossible to discuss graphics software without first establishing an understanding of the differences between the two major graphic types: bitmap and vector images.

The following “fill in the blank” activities will test your understanding of the characteristics of both types of graphics.

Bitmap/Raster GraphicsVector Based Graphics

Bitmap/Raster Graphics


pixels
Raster
(0,0,0)
million
tiny dots
resolution
PNG
Green
digital
8 mega pixels
(0,185,185)
scanner
bitmap-pixelsBitmap images (also known as images) are made up of in a grid. Pixels are picture elements; of individual colour that make up what you see on your screen. Pixels are defined by 2 properties: their position on the picture/grid and their colour value. These properties are stored in a bitmap file for every single pixel in the picture.

The colour value of each pixel is determined by the RGB colour code. (Red Blue). Each colour is made of a mix of these 3 primary colours. Each of these 3 colour have a value between 0 and 256. Hence a bitmap can have up to 256* 256 * 256 = 16 possible shades.

Red: (255, 0, 0) Purple: (85,0,85)
Yellow: (255,255,0) White: (255,255,255)
Cyan: Black:

When you use a camera or a or a graphic tablet you create bitmap pictures.

Bitmap pictures come under different file extensions: BMP, GIF, JPEG, , TIFF.

The quality of a bitmap file is determined by its which tells you how many pixels the bitmap is made of. For instance a digital camera can have an resolution.


pixel-art-old-school
Pixel art graphics used in retro arcade games are a good example of bitmap pictures. You can create your own pixel art online using piskelapp.com

Vector Based Graphics


thickness
compressed
geometric shapes
processing
CAD drawings
grouped
pixelate
gallery
vector-based-graphic
Vector Based graphics (also known as object-orientated graphics) are made up of many individual . Each of these shapes can be defined by mathematical/geometric statements and has individual properties assigned to it such as colour, fill, and size, , ...

All these geometric based data is saved in a vector based graphics as instructions such as:
DrawLine Red, 1 pixel wide, 10 pixels long From position x=20 y=40

When editing a vector based graphics each object can be edited individually. Objects can also be to be moved/resized/rotated together.

Cliparts from the clipart tend to be vector based. are also vector based.

Vector based graphics do not loose quality or pixelate when they are resized as opposed to bitmap graphics which do or become blurry when they are enlarged or resized. Vector based cannot be as opposed to bitmap files which can be compressed (by loosing some quality)

Vector based files tend to take up less disk space than bitmaps. However Vector based graphics requires more power to be displayed on the screen.


pen-vectorCreate your own vector graphics online using vecteezy.com
Tagged with:

Data Validation Quiz

When programming a computer system, it is good practice to include a range of validation checks in the code to check if the data being inputted by the end-user follows some basic rules.

The aim of validation checks is to ensure that data used or stored by computer systems is valid. Invalid data may indeed make the system crash or may provide inaccurate information back to the user.

Validation checks cannot confirm if the data is correct or not but they can filter out a lot of invalid data.

There are different types of checks that can be implemented in your code such as:

  • Presence Check: When a field has to be filled in (mandatory field) and cannot be left blank/empty. (e.g username field when you sign in to a new system)
  • Length Check: When a field has to contain a set number of characters (e.g. a password is at least 8 characters long, a credit card number contains 16 digits).
  • Type Check: When a field has be of a certain data type (integer, float/real, etc.).
  • Range Check: When a field has be within a range, or greater or lower than given value. (e.g. A percentage value has to be between 0 and 100)
  • Lookup Check: When a field can only accept a certain set of values from a list (e.g. A title field can be either Mr, Mrs, Ms or Dr)
  • Character Check: When a field has to contain a specific character or type of characters. (e.g. An e-mail address should contain an “@” sign)

Take the Quiz! (open full screen)


Check that you understand the different types of validation checks by completing this quiz:

Tagged with: