Skip to content

Module 5: Programming

What We’ll Learn

PROGRAMMING BASICS

We will learn the basics of how to write code. This includes how to set things up in Replit (similar to what we did for the Web Design Module), and some programming basics like:

  • variables
  • functions
  • events (responding to mouse and keyboard)

We will use p5.js library to help us. It is in the JavaScript language and adds more visual and in some ways simpler ways to add visual and interactive elements to a web page.

Classes

  1. 11/28 Programming Quick Intro
  2. 11/30 Programming Project Complete

project and quiz

  1. 12/5: Programming Project Due

You just have to do the project in replit.

no quiz for this module

Setup and Materials

software: BROWSER

We will use the same accounts we had for Web Design. The main difference is that I made a Team in Replit with a project starter template for you.

To use these you will need the same accounts we used for Web Design:

  1. GitHub Account: https://github.com
  2. CodePen Sign in using your GitHub Account: https://codepen.io/
  3. Replit Sign in using your GitHub account: https://replit.com/
    1. There is now a mobile app that you can also use in a pinch but it’s easier on a computer with a keyboard. 

Module Media Project

Simple Scene

Create a simple scene using p5js. Your project should include drawing some shapes and code that makes something on the page move (or be interactive, which we will not cover fully in class).

We will have a replit repository that you will use to start for the project.

REPLIT TEAm and starter project

We will walk through everything in class on 11/30. If you miss the class watch the recording.

Requirements

  • p5.js Project
    • index.html file that includes the p5js library and script.js file (should be done automatically for you)
    • script.js file
  • p5.js JavaScript Code (in the scripts.js file) that includes
    • visual elements (shapes, text, color) These should be arranged in some kind of scene (we used a landscape with trees and sun in class).
    • Programmatic movement or interaction. Use code to make part of your scene move.
    • at least one custom variable
    • Use comments to describe what your code does

DUE DATE

Tuesday, December 5

Turning it in

There are two parts.

PART 1: Submit in Replit

  • Click the Submit button on your project in Replit (you have to have followed the directions to start the project through the Team we created)

PART 2: Submit to Blackboard.

Submit in Blackboard. You can put a link to your repl in the comments.

Tutorials and Resources

Please feel free to suggest resources that helped you.

Programming Posts

No post found!

Leave a Reply