Programming Intro
This video shows how to setup and submit the Programming Module Project in Replit. We will go over this in class on 11.29.2022
What You Will Need for the Module
- Online Accounts
- GitHub
- CodePen
- Replit
- Computer that has a browser
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
- 11/28 Programming Quick Intro
- 11/30 Programming Project Complete
project and quiz
- 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:
- GitHub Account: https://github.com
- CodePen Sign in using your GitHub Account: https://codepen.io/
- Replit Sign in using your GitHub account: https://replit.com/
- 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
- Prof Stein Codepen Examples
- Collection: https://codepen.io/collection/KpewQg
- Mouse Events: https://codepen.io/profstein/pen/wvXEwdo
- KeyisPressed: https://codepen.io/profstein/pen/qBKMBXN
- Official p5 library website:examples and references
Please feel free to suggest resources that helped you.
Programming Posts
No post found!