Sizecoding with p5*js

Background

Sizecoding is the art of creating tiny programs. Compressed code is typically 256 bytes or less in size. Programs can produce amazing digital art, playable games, and even music. A lot of sizecoding projects are shared on social media. The entire code is posted along with a video or GIF that shows the output. While many sizecoding artists create their tiny programs in tiny game engines, like PICO-8, we’re going to explore sizecoding capabilities with p5.js library!

NOTE: Sizecoding requires special techniques that do not follow coding best practices. For example, the use of let and const to declare JavaScript variables are not often found in sizecoding projects. Additionally, variables are often just a single letter rather than a meaningful variable name. Spacing around operators and indentation whitespace is also typically omitted.

Your Task

In this project, students will learn about sizecoding techniques and explore some provided p5*js programs. Using some resources and guided instructions, students manipulate the tiny programs to learn how the code impacts the artistic, graphical outputs. After discovering how the code was created with p5*js, students are given challenges to create their own, unique sizecoding work of art!

A Tiny Program

The demo project below uses the following, minified p5*js program. When compressed, the code is just 157 bytes.

t=0;
draw= _=> {
    t || createCanvas(s=360,s);
    background(25,60);
    noStroke();
    fill(5,252,170);
    sinX=120*sin(t);
    cosY=80*cos(t*0.2);
    rect(sinX+155,cosY+155,50,50,10);
    t+=0.1;
}