ArtGenerative ArtPen PlottingProjectsWatercolor

Hard Edge Watercolor Over Generative Art Pen Plots With p5.js and the Silhouette Cameo – Video Post & Source Code

Generative Art Hard Edge Watercolor Paint Pen Plots

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

Leave a Reply

0 Comments
Inline Feedbacks
View all comments