More results...

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

Abstract Syntax Tree Generator

ASTIn computer science, an abstract syntax tree (AST), or just syntax tree, is a tree representation of the high level source code.

The compilation process consists of translating the high level source code (e.g. Java, Python, C++, FORTRAN, etc.) into machine code. This process consists of 4 steps:

  1. Lexical Analysis
  2. Syntax Analysis
  3. Code Generation
  4. Code Optimisation

A list of tokens is generated during the lexical analysis of the compilation process.
An Abstract Syntax Tree (AST) is generated during the syntax analysis of the compilation process.

The following tool enables you to type/import some high level code (Javascript) in the first tab below and generate the list of tokens and the Abstract Syntax Tree corresponding to your code. You can see what the tree looks like using the JSON format (third tab) or as a visual representation (fourth tab).

Source CodeTokens (JSON)TokensAST (JSON)AST Tree

Javascript Code:


Copy and paste your JavaScript code in the textarea below and press the “Generate Abstract Tree” button below to generate the list of tokens (lexical analysis) on tab 2 and the AST tree (syntax analysis) on tab 3 and tab 4.
Generate Abstract Syntax Tree

List of Tokens (JSON format)


The list of tokens is generated from the source code during the lexical analysis stage of the compilation. Notice how, during the lexical analysis, annotations and white spaces are discarded and are hence not included in the list of tokens.

List of Tokens


The list of tokens is generated from the source code during the lexical analysis stage of the compilation. Notice how, during the lexical analysis, annotations and white spaces are discarded and are hence not included in the list of tokens.

Abstract Syntax Tree (JSON format)


The Abstract Syntax Tree is generated using both the list of tokens (from the lexical analysis) and the source code. The AST is generated during the syntax analysis stage of the compilation. Any syntax error would be detected and a syntax error message would then be returned, stopping the compilation process.

Abstract Syntax Tree

Open AST in new window

Did you know?


Rear Admiral Grace Hopper, 1984

Rear Admiral Grace Hopper, 1984

One of the first programming languages to be compiled was COBOL. It was invented in the 1950s based on the work of Grace Hopper (1906 – 1992). Grace Hopper was an American computer scientist and United States Navy rear admiral. she was a pioneer of computer programming who invented the first compiler. While at the time all programs were based on mathematical notations, she believed that a programming language based on English words was possible and would be more accessible to a wider range of programmers. In 1955, she and her team wrote a specification for such a programming language and implemented a prototype: The FLOW-MATIC compiler became publicly available in the late 1950s. Her compiler converted English terms into machine code understood by computers. Her work also focused on the idea of designing machine-independent programming languages, which led to the development of COBOL, an early high-level programming language still in use today.

Grace Hopper had a key role in the development of computer science. She invented the concept of sub-routines to help programmers save time when writing code. Her work on developing high-level languages was also motivated by the need to be able to save time when writing programs, as writing low-level code can be extremely time consuming.

Women in STEM


Listen to what Megan Smith (U.S. Chief Technical Officer) said about Grace Hooper in 2014:
Source: Women in Stem, U.S. Chief Technology Officer Megan Smith / Public domain

The first computer bug!


Nowadays, when we find an error in a computer program, we call this error a bug. While Grace Hopper was working on a Mark II Computer at Harvard University in 1947, her team discovered a moth stuck in a relay. The moth impeded the operation of the relay by creating a short-circuit. The problem was fixed by removing the moth (debugging the relay!). The following picture is a photo of the notes from Grace Hopper and her associates with a picture of the actual moth!
The first computer bug!

The first computer bug!

Source: Naval History and Heritage Command

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: