Set drawing style in one function

p5.js Coding Questions
1

Hey there

What do you guys think about the idea of a all-in-one function to set the drawing style.
I created such a function as a shortcut and find it very handy.

  • Is there already a similar behavior which i missed?
  • Do you have ideas for improvement i.e performance wise?
  • How would you name such a function?
  • Which defaults would you set?
// Set the drawing style: fill, stroke, strokeWeight
function setStyle(fc, sc = null, sw = null) {
    fc ? fill(fc) : noFill();
    sc ? stroke(sc) : noStroke();
    sw ? strokeWeight(sw) : 0;
}

Thanks for your input.

3 Likes
2

Name setDrawingProperties
setDrawProps

Default red / 111 / 1

1 Like
3

Interesting. Would it also map the things that are controlled with textStyle?

https://p5js.org/reference/#/p5/textStyle

Possibly related: In processing (not p5.js), PStyle is an object with almost all the possible style properties, and you interact with the pushStyle / popStyle stack (like with p5.js push pop) in terms of those objects.

https://processing.github.io/processing-javadocs/core/processing/core/PStyle.html

1 Like
4

a different idea ( here use JAVA ) could be to work with prepared THEMEs

void setup() {
  size(200, 200);
  set_Theme(1, 1, 0);                  // Theme 1, fill ON, stroke OFF
}

void draw() {
  background(bg);
  translate(width/2, height/2);
  circle(0, 0, 50);

  // temporary change color ( tc (text color) from theme OR any other color )
  fill(tc); // fill(color(200,0,200));
  text("sun", -25, 50);
  reset_Style();              //instead wrap it into pushStyle popStyle, or recall set_Theme(), just reset to theme
}


//_________________________________________________________________________________ RESET to THEME settings
void reset_Style() {
  strokeWeight(sw);                // set the line width
  if ( bfill   == 1)   fill(fc); 
  else                 noFill();
  if ( bstroke == 1)   stroke(sc); 
  else                 noStroke();
}

// ________________________________________________________________________________ THEME IDEA
color bg, fc, sc, tc;   // color: background / fill / stroke / text /
int bfill=1, bstroke=1; // yes i want that global too
float sw=1, ts = 15;    // stroke Weight / text size /
PFont myFont;

void set_Theme(int itheme, int b_fill, int b_stroke) {  // Set the drawing style: fill, stroke, strokeWeight...
  boolean diagp = true;
  String name="";
  bfill = b_fill;                                       // copy to global theme vars
  bstroke = b_stroke;
  //printArray(PFont.list());

  switch(itheme) {
  case 0: 
    name = "theme default";
    bg = color(200, 200, 0);
    fc = color(0, 200, 0);
    sc = color(0, 0, 200);
    tc = color(200, 0, 0);
    sw = 1.5;
    myFont = createFont("Georgia", 20);
    ts = 12;
    break;
  case 1: 
    name = "theme night sky";
    bg = color(0, 0, 80);
    fc = color(255, 255, 0);
    sc = color(127);
    tc = color(255);
    sw = 0.5;
    myFont = createFont("Yu Gothic Bold", 20);
    ts = 25;
    break;
  }

  reset_Style();                    // set fill stroke strokeWeight

  // set the by theme used text
  textFont(myFont);
  textSize(ts);                    

  // prepared options for disable ...
  rectMode(CENTER);

  if ( diagp ) println(name+", with fill "+bfill+", with stroke "+bstroke);
}




/*
// https://discourse.processing.org/t/set-drawing-style-in-one-function/13254
 
 // Set the drawing style: fill, stroke, strokeWeight
 function setStyle(fc, sc = null, sw = null) {
 fc ? fill(fc) : noFill();
 sc ? stroke(sc) : noStroke();
 sw ? strokeWeight(sw) : 0;
 }
 
 */
2 Likes