Watercolor Workshop

/*/////////////////////////////////////////////

// Code by Unknowable                        //

// unknowableart.github.io                   //

//                                           //

// Original code link:                       //

// https://openprocessing.org/sketch/1176509 //

/////////////////////////////////////////////*/

​

var np = 300;

var startcol;

​

var posX;

var posY;

​

var openprocessing = true;

var paper;

var paperlike = true;

​

function createpaper(){

  paper = createGraphics(width, height);

  paper.fill("#F6F2E9")

  paper.rect(0,0,width,height)

  paper.noStroke();

  paper.fill(255,50);

  for (let i = 0; i < 500000; i++) {

    let x = random(paper.width);

    let y = random(paper.height);

    paper.circle(x, y, random(0.5,2));

  }

}

​

​

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  background(255);

  noiseSeed(random(100));

  startcol = random(255);

  noStroke();

  if(paperlike){

    createpaper()

  }

  if(openprocessing){

  //OPC.slider(variableName, defaultValue, [min], [max], [step]);

  OPC.slider('RValue', 200, 0, 255, 0.1);

  OPC.slider('GValue', 200, 0, 255, 0.1);

  OPC.slider('BValue', 200, 0, 255, 0.1);

  OPC.slider('SValue', 0.5, 0.1, 1 , 0.1);

​

​

  }

  else{

    var RValue;

    var GValue;

    var BValue;

    var SValue;

​

    RColor = createSlider(0, 255, 100, 0.1);

    RColor.position(30, 30);

​

    GColor = createSlider(0, 255, 100, 0.1);

    GColor.position(30, 50);

​

    BColor = createSlider(0, 255, 100, 0.1);

    BColor.position(30, 70);

​

    FScale = createSlider(0.1, 1, 0.5, 0.01);

    FScale.position(30, 90);

  }

  if(paperlike){

    image(paper,0,0);

  }

}

​

function draw() {

  if(!openprocessing){

  RValue = RColor.value();

  GValue = GColor.value();

  BValue = BColor.value();

  SValue = FScale.value();

  }

  fill(RValue,GValue,BValue,5);

  rect(0, 0, width/8, height);  

}

​

function drawshape(){

  posX = mouseX;

  posY = mouseY;

  fill(RValue,GValue,BValue,5);

  beginShape();

  var sx, sy;

  for(var i = 0; i < np; i++) {

    var angle = map(i, 0, np, 0, TWO_PI);

    var cx = posX

    var cy = posY

    var xx = 100 * cos(angle + cx / 10);

    var yy = 100 * sin(angle + cx / 10);

    var v = createVector(xx, yy);

    xx = (xx + cx) / 150; yy = (yy + cy) / 150;

    v.mult(1 + 1.5 * noise(xx, yy));

    v.mult(SValue);

    vertex(cx + v.x, cy + v.y);

    if(i == 0) {

      sx = cx + v.x;

      sy = cy + v.y;

    }

  }

  vertex(sx, sy);

  endShape();

}

​

function mouseDragged() {

drawshape();

}

​

function mousePressed() {

drawshape();

}