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/24 Programming Quick Intro
  2. 11/29 Full Intro and tutorial
  3. 12/1 Finishing Touches if needed

project and quiz

  1. 12/2: Programming Project Due

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

Small web site

Create a simple interactive project using p5js. Your project should include drawing some shapes and interactivity where the user can change part of the project through the mouse or keyboard).

Finally, use Replit to put the entire project on GitHub and then enable GitHub Pages for the project.

REPLIT TEAm and starter project

We will walk through setting this up in class on 11/29. I have also made a post where you can find the invite to the Replit Team and a video walkthrough that includes the GitHub part: Programming Project Setup

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
    • readme.md file (use this to describe your project)
  • p5.js JavaScript Code (in the scripts.js file) that includes
    • visual elements (shapes, text, color)
    • interactivity (something changes based on the user using the mouse or keyboard)
    • at least one custom variable
    • Use comments to describe what your code does
  • The project files are on GitHub
  • GitHub pages used to display files

DUE DATE

Friday, December 2

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: You will submit the following to Blackboard:

  1. URL to GitHub Repository
  2. URL to GitHub Pages

Tutorials and Resources

Please feel free to suggest resources that helped you.

Programming Posts

Leave a Reply