// Object for creation and real-time resize of canvas

// Good function to create canvas and resize functions. I use this in all examples.

const C = {

    loaded: false,

    prop() {return this.height/this.width},

    isLandscape() {return window.innerHeight <= window.innerWidth * this.prop()},

    resize () {

        if (this.isLandscape()) {

          console.log("yes")

            document.getElementById(this.css).style.height = "100%";

            document.getElementById(this.css).style.removeProperty('width');

        } else {

            document.getElementById(this.css).style.removeProperty('height');

            document.getElementById(this.css).style.width = "100%";

        }

    },

    setSize(w,h,p,css) {

        this.width = w, this.height = h, this.pD = p, this.css = css;

    },

    createCanvas() {

        this.main = createCanvas(this.width,this.height,WEBGL), pixelDensity(this.pD), this.main.id(this.css), this.resize();

    }

};

C.setSize(1500,1500,1,'mainCanvas')

​

function windowResized () {

    C.resize();

}

​

//////////////////////////////////////////////////

// The example really starts here

​

// YOU CAN CREATE YOU OWN BRUSHES

brush.add("watercolor", {

    type: "image",       // this is the TIP TYPE: choose standard / spray / marker / custom / image

    weight: 30,          // Base weight of the brush tip

    vibration: 2,        // Vibration of the lines, spread

    definition: 0.5,     // Between 0 and 1

    quality: 8,          // + quality = more continuous line

    opacity: 30,         // Base opacity of the brush (this will be affected by pressure)

    spacing: 5,        // Spacing between the points that compose the brush stroke

    blend: true,         // Activate / Disable realistic color mixing. By default, this is active for marker-custom-image brushes 

    pressure: {

        type: "standard",                       // "standard" or "custom". Use "custom"" for custom pressure curves. Use standard for simple gauss bell curve

        curve: [0.15,0.2],                  // If "standard", pick a and b values for the gauss curve. a is max horizontal mvt of the bell, b changes the slope

        min_max: [0.5,1.2]                    // For both cases, define min and max pressure (reverse for inverted presure)

    },

    // if you select the image type brush, link your image below. If not, you can remove these lines.

    image: {

        src: "./brush_tips/brush.jpg",

    },

    // For "custom" and "image" types, you can define the tip angle rotation here.

    rotate: "random", // "none" disables rotation | "natural" follows the direction of the stroke | "random"

})

​

brush.add("face_brush", {

    type: "image",  

    weight: 90,        

    vibration: 5,       

    definition: 0.5,     

    quality: 8,          

    opacity: 175,        

    spacing: 50,          

    blend: true,         

    pressure: {

        type: "custom",         

        curve: (x) => 1,     // If "custom", define the curve function with a curve equation from x = 0 to x = 1, returning values from 0 to 1

        min_max: [0.5,1.2]

    },

    image: {

        src: "./brush_tips/face_brush.jpg",

    },

    rotate: "natural",

})

​

function preload() {

  brush.preload()

}

​

let palette = ["#7b4800", "#002185", "#003c32", "#fcd300", "#ff2702", "#6b9404"]

​

function setup () {

    C.createCanvas()

    angleMode(DEGREES)

    background("#fffceb")

    translate(-width/2,-height/2)

​

    // Activate the flowfield we're going to use

    brush.field("seabed")

    // Activate the new face brush

    for (let i = 0; i < 3; i++) {

      brush.set("face_brush", random(palette),random(1,3))

      // Draw circle in x,y

      let x = random(width)

      let y = random(height)

      brush.circle(x, y, 500)

      for (let j = 0; j < 10; j++) {

        brush.set("watercolor",random(palette),2)

        brush.flowLine(x,y,500,36 * j)

      }

    }

}