Predicate - Journey

portfolio building for our older (12+) innovators


Runner - Winter 2017

During the Winter season of 2017, our students learned what it takes to develop a website. We began by learning about the fundamental technologies of the web, including: HTML, CSS, and servers. Then our students developed their own web pages with images, videos, custom elements and styling. Finally, we used the primary programming language of the web, JavaScript, to develop unique and interesting infinite runner games in the browser. Our students were challenged to work both independently and collaboratively in this class.

A plethora of web development topics were covered in our 10 weeks. Here are some highlights:

  • HTML
  • CSS
  • Servers
  • Links
  • Images
  • Videos
  • Divs
  • Classes / IDs
  • Margin / Padding
  • Bootstrap Grid
  • JavaScript
  • Variables / Constants
  • DOM
  • Functions
  • Web APIs
  • Canvas
  • RGB and Hexadecimal Colors
  • Promises
  • Sprites / Animations
  • Delta Time
  • Physics / Simulating Gravity
  • Using GIMP

View Lessons Source Code


Asteroids - Fall 2016

In Fall of 2016, our students learned how to create games in Python using PyGame. While game development is not an easy task, our students grasped the fundamentals of computer graphics, including creating windows, handling events, and drawing to the screen. We then dove deeper and learned how to move shapes/images on screen and bounce balls around. Finally, our students developed their bouncing ball projects into a full asteroids game with many iterations and highly customized features.

We covered many game development topics in this class, including:

  • SDL and Pygame
  • PyGame Surfaces
  • Game Loops
  • Reading Documentation
  • Drawing to a Coordinate Plane
  • RGB Color
  • Moving Shapes
  • Bouncing Balls
  • Classes
  • Frames Per Second
  • Vector Physics
  • Collision Detection
  • Sprites
  • Ball to Ball Collisions
  • Events / Inputs
  • Class Inheritance
  • Basic Asteroids
  • Bug Fixing
  • Sounds
  • Text / Fonts

View Lessons Source Code