Gerard Holden

creative coding

Creative Coding Week 3: Exercise 1 - Colour Picker

A sketch was supplied in the course material that changes colour depending on where the user clicks within the sketch. The program checks where the pointer was when the mouse was clicked and calculates colour values based on the position.

> View source code for preceding sketch.
					
/*
 * Creative Coding
 * Week 3, 01 - using map() to map mouse co-ordinates to background colour 
 * by Indae Hwang
 * Copyright (c) 2014 Monash University
 *
 * This program allows you to change the background color.
 * Press and hold 'left mouse button' to change color.
 * 
 */

float red;
float green;
float blue;


void setup() {
  size(500, 500);

  // initialise the colour variables
  red = 0;
  blue = 0;
  green = 0;
}


void draw() {
  background(red, green, blue);

  if (mousePressed) {
    red = map(mouseX, 0, width, 0, 255);
    green = map(mouseY, 0, height, 0, 255);
    blue = map(mouseX+mouseY, 0, width+height, 255, 0);
    
    println("red: "+red+", green: "+green+", blue: "+blue);
    
  }
}

					
				

My sketch recreated a common colour slider. As a user selects and drags the colour slider to the left or right, the colour sample changes.

> View source code for preceding sketch.
					
/*
 * Creative Coding
 * Week 3, 01 - using map() to map mouse coordinates to a colour value
 * by Gerard Holden
 *
 * The program allows you to change the sample colour by holding down the mouse and moving
 * the colour sliders. Press and hold the left mouse button and drag the slider to 
 * change colour.
 */

// Dimensions of the sample colour rectangle
float border;
float sampleX; 
float sampleY;
float sampleW;
float sampleH;

// Dimensions of colour sliders
float sliderX;
float sliderYRed;
float sliderYGreen;
float sliderYBlue;
float sliderW;
float sliderH;
float lengthRed;
float lengthGreen;
float lengthBlue;

// Dimensions of colour square
float squareX; // Y coordinates are the same as the slider

// Colour values
float red;
float green;
float blue;

void setup() {
  
  size(500, 500);

  border = min(width, height)/10;

  // Calculate dimensions of colour sample rectangle
  sampleX = border;
  sampleY = border;
  sampleW = width - border*2;
  sampleH = (height - border*2) / 2;
  
  // Calculate dimensions of colour sliders
  sliderH = (height - sampleH - border*3)/4;
  sliderW = sampleW - (sliderH * 1.5);

  // Calculate diemnsions of red square and slider
  squareX = border;
  sliderYRed = sampleY + sampleH + border;
  sliderX = squareX + (sliderH * 1.5);
  
  // Calculate dimensions of green square and slider
  sliderYGreen = sliderYRed + (sliderH * 1.5);

  // Calculate dimensions of blue square and slider
  sliderYBlue = sliderYGreen + (sliderH * 1.5);

  // Select a random colour for intitial display
  red = random(256);
  green = random(256);
  blue = random(256);
  
  // Calculate length of sliders for the initial display 
  lengthRed = map(red, 0, 255, 0, sliderW);
  lengthGreen = map(green, 0, 255, 0, sliderW);
  lengthBlue = map(blue, 0, 255, 0, sliderW);

}

void draw() {

  background(0, 0, 0);

  // Draw the sample colour rectangle
  fill(red, green, blue);
  rect(sampleX, sampleY, sampleW, sampleH);  

  // Draw the red square and slider
  fill(255, 0, 0);
  rect(squareX, sliderYRed, sliderH, sliderH);
  rect(sliderX, sliderYRed, lengthRed, sliderH);
  fill(255, 255, 255);
  text(int(red), squareX + 5, sliderYRed + sliderH - 5);  

  // Draw the green square and slider
  fill(0, 255, 0);
  rect(squareX, sliderYGreen, sliderH, sliderH);
  rect(sliderX, sliderYGreen, lengthGreen, sliderH);
  fill(0, 0, 0);
  text(int(green), squareX + 5, sliderYGreen + sliderH - 5);  

  // Draw the blue square and slider
  fill(0, 0, 255);
  rect(squareX, sliderYBlue, sliderH, sliderH);
  rect(sliderX, sliderYBlue, lengthBlue, sliderH);
  fill(255, 255, 255);
  text(int(blue), squareX + 5, sliderYBlue + sliderH - 5);  

}

void mouseDragged() {
  if (mouseX >= sliderX && mouseX <= sliderX + sliderW) {
    if (mouseY >= sliderYRed && mouseY <= sliderYRed + sliderH) {
      red = map(mouseX, sliderX, sliderX + sliderW, 0, 255);
      lengthRed =  map(red, 0, 255, 0, sliderW);
    } 
    else if (mouseY >= sliderYGreen && mouseY <= sliderYGreen + sliderH) {
      green = map(mouseX, sliderX, sliderX + sliderW, 0, 255);
      lengthGreen = map(green, 0, 255, 0, sliderW);
    } 
    else if (mouseY >= sliderYBlue && mouseY <= sliderYBlue + sliderH) {
      blue = map(mouseX, sliderX, sliderX + sliderW, 0, 255);
      lengthBlue = map(blue, 0, 255, 0, sliderW);
    }
  }
}
					
				

Copyright © 2014 Gerard Holden. All rights reserved.