Having trouble with a simple drawing program in p5.js

p5.js Coding Questions
1

Okay, so I am working on a very basic drawing program that so far has drawing, erasing, color picking, stroke weight, etc. However, I am now trying to make an eyedropper tool. How I want it to work is: You click on the eyedropper button, and then the next time you click, it gets the color of the pixel at your mouse’s location and changes the color picker’s color to that color.

I have tried making a button in the mousePressed event and checking when that was pressed, but it just moved the problem. I have no clue on how to go about this, because I’ve tried making multiple click events, the new button and countless other things. Here is a link to my p5.js sketch, any help would be appreciated! https://editor.p5js.org/avocad0/sketches/XN1jjraSU

2

Hi @alligatorpears,

The idea is the same as your eraserOn variable. You simply need to have a way to store the state of your program.

For that, you can add a eyeDropperOn variable and set it to true when you clicked on the button. Then you handle the color picking in a mouseClicked event without forgetting to set back the eyeDropperOn variable to false since the color picking has been done.

Here’s a partial solution. It is not preventing the user to draw while in the color picking mode AND it does not really color pick, it simply write a message in the console:

const outsideColor = [127,127,127];
const bgColor = [0,0,0];
const padding = 50;

let penSize = 1;

let colorPicker;

let jankyBtn;
let tracking = false;
let clickAmnt = 0;

let eraserOn = false;
let eyeDropperOn = false;

function setup() {
  createCanvas(750, 700);
  let saveBtn = createButton("Save your work of art!");
  saveBtn.size(padding*4,padding);
  saveBtn.position(0,0);
  saveBtn.mousePressed(function() {
    save(); // I have it in this form just in case I want to add more code here
  });
  
  let resetBtn = createButton("Reset your art!");
  resetBtn.size(padding*2,padding);
  resetBtn.position(width-padding*2,0);
  resetBtn.mousePressed(function() {
    background(bgColor); // I have it in this form just in case I want to add more code here
  });
  
  let eyeDropper = createButton("Eyedropper");
  eyeDropper.size(padding*2,padding);
  eyeDropper.position(width-padding*4,0);
  eyeDropper.mousePressed(eyeDrop);
  
  let eraserCheckbox = createCheckbox("Eraser", false);
  eraserCheckbox.size(padding,padding*2);
  eraserCheckbox.position(0,padding);
  eraserCheckbox.changed(function() {
    eraserOn = this.checked();
  });
  
  colorPicker = createColorPicker("white");
  colorPicker.size(padding,padding);
  colorPicker.position(0,height-padding);
  
  
  background(bgColor);
}

function draw() { 
  if (tracking) {
    jankyBtn.position(mouseX - 10, mouseY - 10);
    if (mouseIsPressed) {
      loadPixels();
      jankyBtn.hide();
      print(pixels[mouseX * mouseY]);
      updatePixels();
    }
  }
  
  let inBounds = (mouseX < width - padding &&
                  mouseX > padding) && 
                 (mouseY < height - padding &&
                  mouseY > padding);
  
  //drawing functionality
  strokeWeight(penSize);
  stroke(colorPicker.color());
  if (mouseIsPressed && inBounds) {
    if (eraserOn) {
      stroke(bgColor);
    }
    line(mouseX, mouseY, pmouseX, pmouseY);
  }
  noStroke();
  
  // border rectangles
  fill(outsideColor);
  rect(0, 0, padding, height);
  rect(0, 0, width, padding);
  rect(width - padding, 0, padding, height);
  rect(0, height - padding, width, padding);
  
  /* 
    for preview circle in bottom right, 
    maybe i'll change this later to just an outlined circle
    around the cursor's position
  */
  
  fill(colorPicker.color());
  circle((width - (padding / 20) - padding / 2),
         (height - (padding / 20) - padding / 2),
         (penSize));
}

function clamp(num, min, max) {
  return num <= min ? min : num >= max ? max : num;
}

//changing penSize
function mouseWheel(event) {
  penSize -= event.delta / 5;
  penSize = clamp(penSize, 2, padding);
}

function mouseClicked() {
  if(eyeDropperOn) {
    print("Get your color here");
    eyeDropperOn = false;
  }
}

function keyTyped() {
  if (key === 'f') {
    floodFill();
  }
}

function floodFill() {
  print("😢😢😢😢");
}

function eyeDrop() {
  eyeDropperOn = true;
}
2 Likes
3

clicking on eyedropper needs to activate a flag. When the flag is active mousePressed calls getPixelColor(). Then on mouseReleased flags are reset.

2 Likes
4

The problem with that is that when I click on the eyedropper button, the mousePressed() event gets called right after eyeDrop(), so the color would get picked when the user clicks the eyedrop button, rather than the next time the user clicks. I tried this idea too but I forgot to mention it in the original post, sorry :slightly_frowning_face:

5 
boolean mdown = false,flag = false,flag2 = false;
void draw(){
if(!mousePressed) 
mdown = false;
If(!mousePressed&&flag2){
flag = false;
flag2 = false;
}
}
void mousePressed(){

If(!mdown&&!flag){
Eyedropper();
Mdown = true;
flag = true;
}

If (flag&&!mdown){
getColor();
flag2 = true;
mdown = true;
}
}
6

Last post should provide the functionality you need.