Ancient Brain
Introduction Features
Definitions Principles The AI model
Teaching Register a class
Getting started P5 tutorial Three.js tutorial
Coding course Coding course II Coding for kids WebGL course AI exercises
Starter Worlds
Editor's Choice Showcase Worlds Multi-user Worlds Random Worlds
Advanced search
Docs API docs
Register Forgot password
  
 
Code viewer for World: Slider (clone by Vaidas Buzas) 

// Cloned by Vaidas Buzas on 29 Nov 2022 from World "Slider" by P5 porting demo 
// Please leave this clone trail here.
 
/*https://editor.p5js.org/p5/sketches/Dom:_Slider
 * @name Slider
 * @description Move the sliders to control the R, G, B values of the background.
 */
 
 
    AB.removeRunHeader();    // div in foreground interferes with slider elements 
    
    
    
let rSlider, gSlider, bSlider;

function setup() {
  // create canvas
  createCanvas(710, 400);
  textSize(15);
  noStroke();

  // create sliders
  rSlider = createSlider(0, 255, 100);
  rSlider.position(20, 20);
  gSlider = createSlider(0, 255, 0);
  gSlider.position(20, 50);
  bSlider = createSlider(0, 255, 255);
  bSlider.position(20, 80);
}

function draw() {
  const r = rSlider.value();
  const g = gSlider.value();
  const b = bSlider.value();
  background(r, g, b);
  text('red', rSlider.x * 2 + rSlider.width, 35);
  text('green', gSlider.x * 2 + gSlider.width, 65);
  text('blue', bSlider.x * 2 + bSlider.width, 95);
}