// 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

​

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

​

function setup () {

    C.createCanvas()

    angleMode(DEGREES)

    background("#fffceb")

​

    // Scale brushes to adapt to canvas size

    brush.scaleBrushes(1.5)

​

    // Activate the flowfield we're going to use

    brush.field("seabed")

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

    brush.pick("marker2")

    // Test different fields to see what happens

    brush.field("curved")

    //brush.noField()

    // We're going to draw some spirals now

​

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

        // We pick a color from the palette

        brush.stroke(random(palette))

        // We begin our spiral selecting the type = "curve", and random x and y positions for the starting point

        // The function is: brush.beginStroke(type, x0, y0)

        brush.beginStroke("curve", width * random(0.1,0.9), height * random(0.1,0.9));

        // We define a rotation angle to get some variety

        let init_angle = random(0, 360);

        // Now we are going to add a series of segments to the stroke

        for (let i = 0; i < Math.floor(random(20,110)); i++) {

          // In order to create a spiral, we need to basically define a circle that gets bigger and bigger each time

          // We will make a circle as a sum of four arcs.

          // For each of these arcs, we will gradually increase the segment length,

          // which means that the circle won't close and will become a spiral when repeated many times

          // The function is: brush.segment(angle, length, tip_pressure)

          // The first arc starts at an angle 0 (left to right)

          brush.segment(0 + init_angle, 0 + i * 25, random(0.6, 1.6))

          // The second arc starts at an angle 90 (bottom to top)

          brush.segment(90 + init_angle, 8 + i * 25, random(0.6, 1.6))

          // The third arc starts at an angle 180 (right to left)

          brush.segment(180 + init_angle, 13 + i * 25, random(0.6, 1.6))

          // The second arc starts at an angle 270 (top to bottom)

          brush.segment(270 + init_angle, 18 + i * 25, random(0.6, 1.6))

        }

        // Finally, we end the stroke with the last angle (which should be 0 again), and tip pressure

        // brush.endStroke(final_anglem, final_tip_pressure)

        brush.endStroke(0 + init_angle,1)

​

    }

}