Assignment 04: Cellular Automata

making generative patterns from simple rules

Due Friday, 02/24 by 11:59 pm

Overview

For this assignment, you will write a JavaScript program that is capable of simulating any given cellular automaton on any given input. You will then use your program to make a web-page that employs a cellular automaton to create generative graphics. Before you begin the assignment, be sure to read the cellular automata notes carefully.

Purpose

The main purpose of this of this assignment is for you to synthesize what you’ve learned so far about HTML, CSS, and JavaScript to create a web-page that incorporates generative design. Through the assignment, you will have the opportunity to explore the patterns generated by cellular automata.

Specification

Your website should contain at least three files:

  • index.html
  • style.css
  • cellular-automata.js

All of the files must be plain HTML/CSS/JavaScript (respectively) with no included libraries or frameworks.

The main technical requirement is that cellular-automata.js must include a method called applyRule(config, rule) that correctly implements a single step of a given rule applied to a configuration, config. More specifically:

  • config is an array containing values (states) that are 0 or 1, where config[i] is the state of cell i.

  • rule is an integer between 0 and 255, interpreted as the rule number as described in the cellular automata notes.

  • applyRule(config, rule) returns a new array of 0-1 values corresponding to the updated states upon applying Rule rule to config.

The rule should be applied with “periodic boundary conditions.” That is, if n = config.length, then right neighbor of the config[n-1] is config[0], and the left neighbor of config[0] is config[n-1].

Non-Specification

The specification above prescribes the behavior of the applyRule method in cellular-automata.js. It is up to you how to use this functionality in your website. Your website must include some visualization of a cellular automaton’s output, but the assignment does not specify how you should do this.

You can use cellular-automata.js to generate space-time diagrams like those depicted in the cellular automata notes, but feel free to find other creative uses. If your visualization includes space-time diagrams, be sure to put some thought/experimentation into which rule(s) you visualize, your color choice, and the initial conditions.

Assessment

20 points total

  • 5 points: valid HTML, CSS, and JavaScript submitted
    • valid HTML syntax can be checked with an html validator
    • valid CSS syntax can be checked with a css validator
    • JavaScript loads and executes without issuing any errors or warnings
  • 10 points: cellular-automaton.js correctly implements all cellular automaton rules
    • this will be checked by ca-tester.js (see below for instructions)
  • 5 points: The site incorporates a significant visualization of the output of a cellular automaton.

Going Farther

  • Make your cellular automata page interactive! Some interactions might include:
    • The user can click cells in the top row to change their state. When a state changes, the subsequent rows update according to the new initial configuration.
    • The user can specify which rule they would like to see simulated.

Testing Your Program

To test the correctness of your implementation, please download ca-tester.zip. To use the tester:

  1. Add this line to the bottom of your cellular-automata.js file: module.exports = { applyRule };
  2. Download and install Node.js
  3. Open up the Terminal application if you’re on a Mac, or Command Prompt if you’re on Windows. If you’re using VS Code, you can also go to Terminal > New Terminal.
  4. Here is a basic summary of how to use these terminal applications. Read through the section called cd or change directory.
  5. Now, in your terminal window, use the cd command to navigate to the folder where your code lives. You might want to start with cd ~ to navigate to your home directory.
  6. Once you are in that directory correctly, you can type ls to make sure you see all the files.
  7. Run the command node ca-tester.js to actually run your code!

Note. For this testing framework, any variables referencing the HTML DOM in your cellular-automata.js file can ONLY be initialized INSIDE OF A FUNCTION (and not the applyRule function)-—they cannot be initialized at the global level, since Node will not know how to handle the DOM.