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