Skip to content

Background Grid Controls

Run the Background Grid Control Demo

Key Points

  1. The simulations have two regions
  2. The plot region holds the animation
  3. The controls region holds the interactive controls

Sample Code

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
// Standard sizes for Smartboard with controls at the bottom
let canvasWidth = 600;
let canvasHeight = 600;

let plotWidth = canvasWidth;
let plotHeight = 500;
let plotMargin = 50;

let controlWidth = canvasWidth;
let controlHeight = 100;

let thicknessSlider, spacingSlider;
let gridThickness = 1;
let gridSpacing = 50;

function setup() {
  createCanvas(canvasWidth, canvasHeight);  // Set the canvas size

  // Create thickness slider (range from 1 to 10)
  thicknessSlider = createSlider(.1, 1.25, .25, .05);
  thicknessSlider.position(190, plotHeight + 20);
  thicknessSlider.size(canvasWidth / 2);

  // Create spacing slider (range from 5 to 100, step of 5)
  spacingSlider = createSlider(5, 100, 25, 5);
  spacingSlider.position(190, plotHeight + 50);
  spacingSlider.size(canvasWidth / 2);

  // Call the function to draw the grid initially
  drawGrid();
}

function draw() {
  noStroke();
  fill("DodgerBlue");  // DodgerBlue background
  rect(0,0,canvasWidth, plotHeight)
  drawGrid(25);  // Call the drawGrid function with a grid spacing of 25

  // Draw the Controls Area
  fill('cornsilk')
  stroke(1);
  strokeWeight(1);
  rect(0,plotHeight,canvasWidth,controlHeight)

  // Get values from sliders
  gridThickness = thicknessSlider.value();
  gridSpacing = spacingSlider.value();

  // Draw grid using the current slider values
  drawGrid();

  // Display slider labels and values
  fill('black');
  noStroke();
  textSize(16);
  textAlign(LEFT, CENTER);
  text("Grid Thickness: " + gridThickness, 10, plotHeight + 30);
  text("Grid Spacing: " + gridSpacing, 10, plotHeight + 60);
}

function drawGrid() {
  for (let x = 0; x < plotWidth; x += gridSpacing) {
    if (x % 100 === 0) {
      strokeWeight(gridThickness * 4);  // Adjust thickness for every 100th line
    } else if (x % 50 === 0) {
      strokeWeight(gridThickness * 2);  // Adjust thickness for every 50th line
    } else {
      strokeWeight(gridThickness);  // Standard line thickness
    }
    stroke(255);  // Set the grid color to white
    line(x, 0, x, plotHeight);  // Draw vertical grid lines within the plot area
  }

  for (let y = 0; y < plotHeight; y += gridSpacing) {
    if (y % 100 === 0) {
      strokeWeight(gridThickness * 4);  // Adjust thickness for every 100th line
    } else if (y % 50 === 0) {
      strokeWeight(gridThickness * 2);  // Adjust thickness for every 50th line
    } else {
      strokeWeight(gridThickness);  // Standard line thickness
    }
    stroke(255);  // Set the grid color to white
    line(0, y, plotWidth, y);  // Draw horizontal grid lines within the plot area
  }
}