p5.js Moire Project

This project involves the creation of a number of p5.js sketches that produce moire effects and random dot patterns.

System overview

This repository contains resources to get started with this activity. Generally, we will refer to this repository each meeting to download and install necessary software, access multimedia content related to our project, and store our project files.

Meeting 1: Introduction, Software Setup, and Code Commenting Activity

Introduction

We'll start out by familiarizing ourselves with moire effects and random dot patterns by exploring the following content:

• Freaky Dot Patterns - Numberphile with Dr. Tadashi Tokieda
• Quanta Magazine Article: Moire Patterns

Software Setup

• Create a GitHub account and install Github Desktop
• Clone this repository within GitHub Desktop:
  • File > Clone Repository
  • Select "URL" tab
  • Under "URL or username/repository" entry, enter https://github.com/dmawer13/p5.js-Moire-Project
  • Under "Local Path" entry, choose a folder to store your files that will stay put for the duration of this project
• Install Atom editor
• Install Teletype package in Atom:
  • Preferences > Install
  • Portal > Authenticate with GitHub account > Get Token
• Install Atom HTML Preview
  • Windows: File > Settings
  • Mac: Atom > Preferences
    • Install > Type "atom-html-preview"

Code Commenting Activity

To start using deictic code commenting, we'll first conduct an activity that introduces deictic comments before implementing them in a pre-existing p5.js sketch.

• I'll walk you through my example p5.js sketch with deictic comments
• Visit the Comment Codebook page for getting started with using deictic comments.
• In Atom:
  • Open a Portal
    • Packages > Teletype > Share Portal (or Join Portal)
  • Browse for the Moire Project repository
    • File > Open Project Folder
  • Open the vertex_spinner_sketch folder
    • Task: Imagine your in-code comments must serve to explain this sketch to a future reader. Review this code together, and using the Comment Codebook, comment the following sketch.
• To run your sketch
  • In Atom:
    • Open sketch index.html file
    • control-Shift-H (with atom-html-preview installed)
  • In an internet browser:
    • File > Open File; browse for index.html file

Wrapup

Let's discuss the commenting activity and schedule meeting 2.

Meeting 2: Defining the problem, Starting to sketch

Defining the problem

How can we use p5.js to simulate dot patterns and moire effects?

• Refresh of Dr. Tokieda's examples
• How might we approach creating the multiple examples outlined by Dr. Tokieda?
• How might we organize the tasks necessary to complete this project?

Starting to sketch

Let's start collaboratively sketching in p5.js using deictic comments as needed.

• In Atom:
  • # to Teletype with your GitHub account
  • Open a Portal
    • Portal > Authenticate with GitHub account > Get Token
    • Packages > Teletype > Share Portal (or Join Portal)
  • Browse for the p5.js files
    • File > Open Project Folder > find your p5.js-Moire-Project folder from Meeting 1
    • Open the p5.js library files
    • The sketch.js file is yours to edit
• To run your sketch
  • In Atom:
    • Open sketch index.html file
    • control-Shift-H (with atom-html-preview installed)
  • In an internet browser:
    • File > Open File; browse for index.html file
• Refer to the Comment Codebook for commenting

Wrapup

Let's debrief and schedule meeting 3.

Meeting 3: Collaboratively Sketching

We'll use this meeting to continue with your p5.js sketches, referring to Dr. Tokieda's examples as needed.

Also refer to the Comment Codebook for commenting, as needed.

Wrapup

Let's debrief and schedule meeting 4.

Meeting 4: Continuing Collaboration, Audiencing Discussion

We'll use this meeting to continue with your p5.js sketches, and discuss how we might share our work with others.

How might we share our p5.js code with an interested audience?

• Refer to Dr. Tokieda's examples as needed.
• Also refer to the Comment Codebook for commenting, as needed.

Wrapup

Let's debrief and schedule meeting 4.

Meeting 5: Pen Plotting

We'll use this meeting to discuss pen plotting.

Pen Plotting example