Processing P5.JS Painter Test
This is a test of Processing P5.JS version 0.5 from Oct. 2017. Use the Alpha slider to control the transparency value of the painter.
Alpha:
The P5.JS source code is as follows:
var video;
var vscale = 8;
var particles = []; // MUST DO THIS TO USE AS AN ARRAY
var slider;
function setup() {
var myCanvas = createCanvas(800, 600);
myCanvas.parent('myContainer'); // put the canvas inside the DIV named myCOntainer
for(var i=0; i < 60; i++) {
particles[i] = new Particle(width/2,height/2);
}
noStroke();
slider = createSlider(10,255, 127); // slider for alpha value
slider.parent('bt1');
pixelDensity(1);
video = createCapture(VIDEO);
video.size(width/vscale, height/vscale); // this captures a scaled down version of the video
}
function draw() {
video.loadPixels();
//image(video, 0, 0, 320, 240);
//filter('INVERT');
for(var i=0; i < particles.length; i++) {
particles[i].update();
particles[i].show();
}
}
function Particle(xi,yi) {
this.x = xi + random(-20,10);
this.y = yi + random(-10,20);
this.r = random(2,8);
this.col = [];
this.col[0] = floor(random(255));
this.col[1] = floor(random(255));
this.col[2] = floor(random(255));
this.update = function() {
this.x += random(-4,4);
this.y += random(-4,4);
}
this.show = function() {
var px = floor(this.x / vscale);
var py = floor(this.y / vscale);
var ccc = video.get(px,py);
fill( ccc[0], ccc[1], ccc[2], slider.value() );
//fill( this.col[0], this.col[1], this.col[2], slider.value );
ellipse(this.x, this.y,this.r,this.r);
}
}