Description

In this final project example we add an interface to Unit 1's final project: a slider allows the user to control the number of rows and columns, and a generate button is added so that the user can see different results without having to reset the page.

Steps Outline

1. Pick project and read code
2. Add a Generate button
3. Add a slider

Step by Step

1) Get project and read code

First, find your final Unit 1 project and decide HTML interface elements you will add, and what they will control. In this example, we picked Unit 1 Final Project, Level 3. Re-read the code and make sure you understand it. Now duplicate the project, or copy the code and paste it into a new project.

2) Add a Generate button

In setup(), let's call the createButton function, and store its result in a variable called generateBtn, which we declare at the top of our sketch. Then we bind the mousePressed event to a function called generate.

var generateBtn;
function setup() {
  //Interface
  generateBtn = createButton('Generate');
  generateBtn.mousePressed(generate);
  

  //Existing setup code goes here...

  
}

Now we need to define the generate function. What we want is for the whole drawing to be re-created and drawn each time we click this button. The code for creating and drawing is now in the draw() loop. We can just cut it from there, and paste it within our new generate function:

function draw() {
  //Cut all the code in the draw loop, 
}

function generate(){
  //And paste it here
}

Now run your sketch, and click on the generate button: it works! But now we don't see a drawing when we first load our page. To fix this, we can just call our generate function from the bottom of our setup() function:

function setup() {
  //Interface
  generateBtn = createButton('Generate');
  generateBtn.mousePressed(generate);

  //Existing setup code goes here...

  generate();

}

3) Add a slider

To create a slider, we call the createSlider function (with arguments for min, max, and initial value), and store the object it returns in a variable called rowsSlider, which we declare on top:

var generateBtn;
var rowsSlider;

function setup() {
  //Interface
  
  rowsSlider = createSlider(1, 8, 2);
  
  generateBtn = createButton('Generate');
  generateBtn.mousePressed(generate);


  //Existing setup code goes here...

  
}

We want our slider to determine the number of rows and columns in our composition. The number of columns is determined in the first line of the generate function, which sets it to a random number:

function generate(){
  var cols = int(random(1, 8)); //choose between 1 and 8 columns, at random
  var rows = cols;

To set the number of rows to the current value of the slider instead, we can replace this call to random with a call to our slider's value() function:

function generate(){
var cols = rowsSlider.value(); //Access the current value of the slider
var rows = cols;

Try it! Move the slider, and then click on Generate to see different compositions. To see the full code, go to the running example page (find the link on top of this page)