Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

273
Views
How to paint in p5.js with switching the paint brushes?

I want to paint with two brushes, one is circle and one is rectangle. I have some preset colours for painting and now I want to create different type of brushes. Is that I need to setup more variables? How can I display the brushes type and use it for painting?

var brushColor;


function setup() {
 createCanvas(600, 600);
 strokeWeight(4);
 background(255)
 brushColor = color(50);


}

function draw() {
 if (mouseIsPressed) {
   if (mouseX <= 50) {
     if (mouseY <= 50) {
       brushColor = color(0, 0, 255);
     } else if (mouseY <= 100) {
       brushColor = color(66, 244, 194);
     } else if (mouseY <= 150) {
       brushColor = color(255, 0, 199);
     } else if (mouseY <= 200) {
       brushColor = color(249, 99, 0);
     }
   }
   stroke(brushColor)
   line(mouseX, mouseY, pmouseX, pmouseY);
 }

 //noStroke();
 //start coding for your color squares here!
 stroke(color(0));
 fill(0, 0, 255);
 rect(0, 0, 50, 50);
 fill(66, 244, 194);
 rect(0, 50, 50, 50);
 fill(255, 0, 199);
 rect(0, 100, 50, 50);
 fill(249, 99, 0);
 rect(0, 150, 50, 50)
 print(brushColor);

}`

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

I added a slider for stroke weight and changed the strokeCap is this what you meant? documentation for strokeCap is here

var brushColor;
let slider;
let strokeType //= ROUND;

function setup() {
 createCanvas(600, 600);
 strokeWeight(4);
 background(255)
 brushColor = color(50);
  slider = createSlider(0, 10, 1);
  slider.position(50, 10);
  slider.style('width', '80px');
  strokeType = ROUND;

}

function draw() {
 if (mouseIsPressed) {
   if (mouseX <= 50) {
     if (mouseY <= 50) {
       brushColor = color(0, 0, 255);
     } else if (mouseY <= 100) {
       brushColor = color(66, 244, 194);
     } else if (mouseY <= 150) {
       brushColor = color(255, 0, 199);
     } else if (mouseY <= 200) {
       brushColor = color(249, 99, 0);
     } else if (mouseY <= 250) {
       strokeType = PROJECT;
     } else if (mouseY <= 300) {
       strokeType = ROUND;
    }
   }
   strokeCap(strokeType)
   push();
   strokeWeight(slider.value())
   stroke(brushColor)
   line(mouseX, mouseY, pmouseX, pmouseY);
   pop();
 }

 //noStroke();
 //start coding for your color squares here!
 stroke(color(0));
 fill(0, 0, 255);
 rect(0, 0, 50, 50);
 fill(66, 244, 194);
 rect(0, 50, 50, 50);
 fill(255, 0, 199);
 rect(0, 100, 50, 50);
 fill(249, 99, 0);
 rect(0, 150, 50, 50)

 fill(255);
 rect(0,200,50,50)
  fill(brushColor);
 rect(12.5,212.5,25,25)
fill(255);
 rect(0,250,50,50)
  fill(brushColor);
 ellipse(25,275,25,25)
 print(brushColor);

}
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!