[1.0 JS] Introduction to Computational Media
  • Introduction to Computational Media
  • How to Use this Curriculum
  • Submit Feedback
  • Curriculum Extras
    • 🔮Curriculum Extras Overview
    • Imposter Syndrome (pt. 1)
      • Imposter Syndrome (pt 2)
    • Timers in p5.js
    • Time Functions: Crazy Clock Mini Project
    • Using Sliders
    • Getting Sound from Mic
    • Sound Recognition with ml5
  • Unit 1: Drawing, Variables, and Random
    • 🔮Unit 1 Overview
    • U1LA1.1 p5.js Introduction & Deconstruction
    • U1LA1.2 Line Functions and Parameters
    • U1LA1.3: Rectangles, Ellipses, and Layering
    • U1LA1.4 Various Shapes, Stroke, Weight, Fill
    • 🗃️🗃U1LA1 Mini Project: Taijitu Symbol
    • U1LA2.1 Intro to Variables - System Variables
    • U1LA2.2 Custom Variables in p5.js
    • U1LA2.3 Random Function & Variables
    • 🗃️🗃U1LA2 Mini Project: Custom Emoji pt. 1
    • U1LA.3.1 Intro to Color
    • U1LA3.2: RGB vs HSB Color Modes
    • U1LA3.3 Color Palettes & Design
    • 🎨🎨 Unit 1 Final Project: Abstract Album Art
  • Unit 2: Respond & Draw on Canvas
    • 🔮Unit 2 Overview
    • U2LA1.1 - Conditionals and if statements
    • U2LA1.2 - Conditionals and if, else if, else statements
    • U2LA1.3 - Logical Operators And/Or
    • 🗃️🗃U2LA1 Mini Project: Make a Traffic Light 🚦
    • U2LA1.4: Draw with Mouse
    • U2LA1.5: The Map Function
    • U2LA2.1 - Collision with Collide2D
    • U2LA2.2: Mouse Clicks && Shapes As Buttons
    • 🗃️🗃U2LA2 Mini Project: Light Switch Game
    • U2LA3.1: Key Presses && Nested Conditionals
    • 🎨🎨 Unit 2 Final Project: Interactive Drawing App
  • Unit 3: Arrays, Loops, Media
    • 🔮🔮 Unit 3 Overview
    • U3LA1.1: While Loops
    • U3LA1.2: For Loops Pt 1
    • U3LA1.3: Nested For Loops (For Loops pt 2)
    • 🗃️🗃U3LA1 Mini Project: Wallpaper Design
    • U3LA2.1: Introduction to Arrays
    • U3LA.2.2: Arrays with floor() and random()
    • 🗃️🗃U3LA2 Mini Project 1: Fortune Teller
    • U3LA2.3: Loops and Arrays
    • 🗃️🗃U3LA2 Mini Project 2: Random Starfield
    • U3LA3.1: Preload && Images
    • U3LA3.2: Tint && Image Manipulation
    • 🗃️🗃U3LA2 Mini Project 3: Vision Board
    • U3LA3.3: Images and Arrays with ml5
    • U3LA4.1 Fonts && Text Styling
    • 🗃️🗃U3LA4 Mini Project 4: Typography
    • U3LA5.1: Loading & Playing Sound Files
    • 🗃️🗃U3LA5 Mini Project: Keyboard/Patatap
  • 🎨🎨Unit 3 Final Project: Random Meme Generator
  • Unit 4: Motion, Animation, Transformation
    • 🔮🔮 Unit 4 Overview
    • U4LA1.1: Intro to Motion with Flipbooks
    • U4LA1.2: Move In All Directions & Make it Bounce
    • 🗃️🗃 U4LA.1: Make a Floating DVD Logo
    • U4LA2.1: Translation Battleship
    • U4LA2.2: Rotations
    • U4LA3.1: Sine & Oscillating Motion
    • U4LA3.2: Cosine & Circular Motion
    • 🎨🎨 Unit 4 Final Project: Animated Greeting Card/PSA
  • Unit 5: Functions & Abstraction
    • 🔮🔮 Unit 5 Overview
    • U5LA1.1: What is Abstraction?
    • U5LA1.2: Intro to Functions & Function Calls
    • U5LA1.3: Draw with Functions
    • 🗃️🗃 U5LA1 Mini Project: Custom Function Library
    • U5LA2.1: Data Type Scavenger Hunt
    • U5LA2.2: Functions that Return Values
    • U5LA2.3: Functions with Purpose
    • U5LA2.4: Functions with Boolean Returns
    • 🗃️🗃 U5LA2 Mini Project: Build Your Own Challenge
    • 🔮🔮 Unit 5 Final Project: Menu of Options
Powered by GitBook
On this page
  • When to Use This Extra
  • Overview && Teacher Feedback
  • Objectives
  • Suggested Duration
  • NYS Standards
  • Vocabulary
  • Resources
  • Assessments
  • Do-Now/Warm Up
  • Introducing Sliders
  • Sliders & Modern Art Challenge
  • Wrap Up
  • Extensions

Was this helpful?

  1. Curriculum Extras

Using Sliders

How can I use sliders to control elements of my program?

When to Use This Extra

This is a brief lesson that can be used anytime after students have created variables. If you make an easy-to-follow guide, this can even be something that could be used as an extension or sub lesson when you want students to explore but are not necessarily available to offer guidance.

  • Earliest/Most Aligned: After U1LA2.2: Custom Variables in p5.js

Overview && Teacher Feedback

This lesson is going to be a very brief overview of sliders that will allow students to start engaging with an HTML DOM element very early on. They don't need to understand every single piece to get the basics and get their slider working!

As mentioned above, this is fairly straightforward, and it could easily be given as an extension or sub lesson if you create a guide that is easy for students to follow. Essentially, keep this one in your back pocket and feel free to pull it out whenever your students need a little something extra to keep their interest!

Objectives

Students will be able to:

  • Create sliders to control values in their program

  • Understand the basic functionality of sliders

Suggested Duration

~1 Period (45 Minutes)

NYS Standards

9-12.CT.4 Implement a program using a combination of student-defined and third-party functions to organize the computation.

Vocabulary

sliders - an HTML element you can add to your page to control values of a variable by clicking/dragging the dot on the slider.

Resources

Assessments

Slider Art Assignment (Formative)

Do-Now/Warm Up

Display on board: Describe how we have set and changed variable values in the past. Are there interactions we may want to allow users to have that could change the value of different variables?

Allow students time to think and brainstorm and clarify as necessary that this could be clicking, typing, etc - have them think to ways they have interacted with other apps and websites!

Introducing Sliders

Today, we are introducing a new thing that we can use in our sketches to help control values in our programs: the slider! Sliders are technically an HTML element that we use to control parts of our JavaScript code. (This is part of the HTML Document Object Model, or HTML DOM, that we may explore at various points in the year.)

Sliders look a bit like this:

We are going to recreate essentially this example to control the background of a sketch together, so let's open up a blank editor so we can get started. NB: You are basically recreating the example from the reference sheet, so feel free to use that as guidance!

Sliders always have three parts:

  1. Defining a variable and setting it to a slider. This can have ANY name!

  2. Giving the slider a (x,y) position on your page.

  3. Declaring a variable in your program that takes the value from the slider. Ideally, we do this in draw because it is always running and thus always updating based on new slider values.

Once students have their blank editor open, begin coding along this example of making a slider that controls just the red value of their background:

var redSlider

function setup() {
  createCanvas(400, 400);
  redSlider = createSlider(0, 255, 50)
  redSlider.position(10,10)
}

function draw() {
  r = redSlider.value()
  
  background(r, 220, 220);
}

Now let's think about what's happening:

  1. On line 1, we create a variable to hold our slider.

  2. On line 5, we create our slider and save it in the variable redSlider.

  3. The (0, 255, 50) stand for the LOWEST value of the slider, the HIGHEST possible value of the slider, and the STARTING value of the slider. Ask students to change some of these values - starting with the STARTING value - to see how it changes things. Make sure students understand that THESE sliders go from 0 - 255 because that's our color number range - if the slider controlled something else, the range could look different!

  4. On line 6, we are giving a position to the slider. Without this, you will notice the slider exists under the canvas. Similar to step 3, ask students to change these values to move the slider around the page.

  5. And finally, on line 10, we make a variable to capture the value of the slider and use that variable in our background (on line 12).

Tah-dah! Now, ask students to create two more sliders. They can either do this independently or, ideally, they can work with a partner where each will take turns creating a slider while the other navigates them. The two remaining sliders should work to control the green and blue values of the background. When they are done, they should have three distinct sliders on their screen.

Sliders & Modern Art Challenge

Look at the fine art examples below. Try to recreate one in p5.js - then, try to make it interactive using the slider AND other elements that you have learned about! (Each slide shows several different works - try to think about just ONE work from an artist, or think about your favorite elements of each that you could combine)

Note: We have used sliders to control color, but they can control anything with a numeric value. What could you have them control that isn't a color? How could this affect your final product?

Wrap Up

Conclude with a gallery walk activity in which students circulate and get a chance to play with as many projects as possible by manipulating the sliders. Ask students to leave feedback either as code comments or on post its lefts near the computers.

Extensions

Sol Le Witt is an artist famous for large installations, but many of them were not actually created by the artist - rather, the artist created instructions and would send the instructions to museums for them to recreate. (Now that he is deceased, this is the only way to recreate his work!)

Ask students to follow a Sol Le Witt tutorial from one of the following resources, or to try to create their own Sol Le Witt style tutorial in pseudocode that other students could follow:

PreviousTime Functions: Crazy Clock Mini ProjectNextGetting Sound from Mic

Last updated 3 years ago

Was this helpful?

(Reference Sheet)

(Youtube Video)

Alexander Calder Art
Mary Corse Art
Olafur Eliasson Art
Dan Flavin Art
Carmen Herrera Art
Vassily Kandinksy Art

HTML Sliders
Interacting with DOM using Sliders
Whitney Kid's Tutorial
SF MoMA Tutorial
National Gallery of Art Tutorial
Three sliders labeled red, green, blue at different levels on a lavender screen.