P5.js

P5.js is a JavaScript client-side library for creating graphic and interactive experiences. Lily was the Teaching Assistant to Professor Arthur Shapiro for the pilot of a lower-level Computer Science course using it (CSC 121 “Creative Coding”) at American University in Fall 2018. The course has since been integrated into the Computer Science department’s regular course offerings and approved to satisfy a General Education requirement for the university (Quantitative Literacy I). Lily helped test the course curriculum, wrote curriculum for a lesson on the World Wide Web and integrating P5.js with HTML/CSS into a Github Pages site, and wrote midterm and final revision sheets. She also used the Java version of P5.js, Processing, integrated with the SPRI lab’s Virtual Reality running room into a lesson on VR for Professor Shapiro’s Spring 2019 first year seminar “Reality: Distorted, Augmented, or Otherwise” where she was the course Program Leader.

CSC 121: Creative Coding Final Project

Final Project (Portfolio Site) Templates for CSC 121 – Creative Coding, Fall 2018, American University, Taught by Dr. Arthur Shapiro. Templates and lesson plan written by Teaching Assistant, Lily Donaldson.

Goal: Students will create a portfolio website to showcase the sketches they have made throughout the course and their final project sketch.

Learning Outcomes:

  • Students will learn the basics of website building.
  • Students will learn how the big three web programming languages (HTML, CSS, and JavaScript) work together to build websites.
  • Students will review how to transpose their p5.js code into JavaScript with HTML.
  • Students will learn how websites run with hosts, CMSs, and SSS languages.
  • Students will learn the basics of git with Github and Github pages.

Process: Students will fork one of the templates or create their own repository. Students will edit HTML to include their name and bio. Students will add their favorite P5.js sketches to the site. Student will fork the bio P5.js sketch and edit it. Students will practice using Github. Students may stylize their site with custom CSS.

Portfolio Final Project with Github Pages and P5.JS 

Miscellaneaous P5.js Modules

Geometric and Arithmetic Sequences and Series

Predictive Policing Module

An Example of Average Kerneling and Heat Mapping for use with Predictive Policing in P5.js

How it works:

  1. Crime data is taken in and cleaned for use. For this example, open source crime data from Cary, North Carolina was used. The data was stripped to crime and latitudinal and longitudinal location.
  2. The crime data is scaled to the drawing canvas and plotted by location.
  3. An averaging kernel algorithm is run. Each kernel is a ‘square’ which measures how many data points are within its boundaries. The kernels overlap (in this case an 80px by 80px kernel is placed every 10px on both the x and y axes to allow for detailed overlap). Each kernel’s display color is scaled based on the number of data points it contains. This display kernel has a low alpha value so that where the kernels overlap, an average crime rate (or color) is produced. This is a heat map.
  4. The user may create another averaging kernel by clicking on the screen. The user’s kernel checks each pixel’s color in the 30px by 30px box the user selects and averages the color (or crime rate) for the entire box. This color is displayed (sans the alpha value) in the box.
  5. The crime rate from within the user’s kernel is calculated and compared to the average crime rate for the entire map (the percent difference from the average). Negative values indicate a crime rate lower than the average crime rate, and positive values indicate a crime rate higher than the average crime rate. If the percent difference is lower than -105%, this means that the user’s kernel’s crime rate is insignificant or that the user’s kernel is out of bounds of Cary, and an error message is displayed.

Future work could include a method for separating based on crime type, ability to go by street/block level, and integration with a mapping API. This project was submitted for Dr. Bill Davies’ (Justice, Law, and Criminology)  Spring 2019 Honors course, “The Legal Imagination,” which focused on law in works of fiction. The final project for the course was an essay or work of fiction on or inspired by one of the course materials. This project was submitted as an alternative to a written work (with Dr. Davies blessing) using “Minority Report” and the surrounding materials on predictive policing as its chosen course materials. P5.js was used because it is inherently graphics based and simple to understand in terms of programming languages; this was important because the project audience was a non-CS professor and a class of mostly non-STEM majors.