# Hard Edge Watercolor Over Generative Art Pen Plots With p5.js and the Silhouette Cameo – Video Post & Source Code One of the things I like to do with p5.js is sit down with a loose idea of something to explore. When I do that and add in some randomness and noise the outcome is usually more interesting than something I could have figured out up front.

In this video we use Curve Vertex and Bezier in p5.js to draw some organic shapes. We take those shapes, plot them using the Silhouette Cameo, and then paint the shapes with watercolor paint. The original p5.js image was cool, but I like the physical outcome even better. Enjoy!

Note: You can find the p5.js source code for this project just below the video.

#### Code Block #1 p5.js Bezier

```// curves.js
let pts = 0;
const control_os = 150;
const stop = 13;
const colors = [
'rgba(71,81,189,.3)',
'rgba(75,128,183,.3)',
'rgba(54,191,192,.3)',
'rgba(245,137,69,.3)',
'rgba(255,202,53,.3)'
];

function setup() {
createCanvas(450, 600, SVG);
randomSeed(11); // 11, 13
}

function draw() {

stroke(20);
noFill();
// fill(colors[parseInt(random(colors.length))]);

//point one and control points
let x1 = random(width);
let y1 = random(height);
let cx1 = random(x1 - control_os, x1 + control_os);
let cy1 = random(y1 - control_os, y1 + control_os);

// point two and control points
let x2 = random(width);
let y2 = random(height);
let cx2 = random(control_os - pts, control_os + pts);
let cy2 = random(control_os - pts, control_os + pts);

bezier(x1, y1, cx1, cy1, x2, y2, cx2, cy2);

pts += 1;

if (pts > stop) {
noLoop();
// save('curves_11.svg');
}
}```

#### Code Block #2 p5.js Curve Vertex

```// curveVertex.js
let pts = 0;
let control_os = 150;
const stop = 7;
const colors = [
'rgba(71,81,189,.3)',
'rgba(75,128,183,.3)',
'rgba(54,191,192,.3)',
'rgba(245,137,69,.3)',
'rgba(255,202,53,.3)'
];

function setup() {
createCanvas(450, 600);
randomSeed(13); // 13, 14, 18
}

function draw() {

beginShape();
stroke(20);
noFill();
fill(colors[parseInt(random(colors.length))]);

//point one
let x1 = random(width);
let y1 = random(height);
curveVertex(x1, y1);

//point two
let cx1 = random(x1 - control_os, x1 + control_os);
let cy1 = random(y1 - control_os, y1 + control_os);
curveVertex(cx1, cy1);

// point three
let x2 = random(width);
let y2 = random(height);
curveVertex(x2, y2);

// point four
let cx2 = random(control_os - pts, control_os + pts);
let cy2 = random(control_os - pts, control_os + pts);
curveVertex(cx2, cy2);

curveVertex(x1, y1); // close the shape
endShape(CLOSE);

control_os = random(50, width);

pts += 1;
if (pts > stop) {
noLoop();
// save('vertex_13.svg');
}
}```
0 0 vote
Article Rating