xxxxxxxxxx
97
//////////////////////////////////////////////////
// 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)
}
}