# Query on how effect on processing book created

``````Hi

How is the effect on below page achieved ?

http://learningprocessing.com/

Had checked on the javascript part of source, but didnt understand how it was achieved and if it could be done on processing?
``````

Hello and welcome to the forum!

Great to have you here!

when you look at the source code of the page, search pointillism

Chrisir

``````
var img;
var smallPoint, largePoint;

var colors = [];
var index = 0;

var angle = 0;

// }
var alph = 10;

function setup() {
var canvas = createCanvas(windowWidth, windowHeight);
canvas.id('sketch-container');
colors.push(color(255, 200, 0, 6));
colors.push(color(237, 70, 47, 1));
//colors.push(color(123, 123, 98, alph));
// colors.push(color(64, 64, 64, alph));
smallPoint = 20;
largePoint = 60;
imageMode(CENTER);
noStroke();
clear();
}

function draw() {

for (var i = 0; i < 15; i++) {
var v = p5.Vector.random2D();

var wave = map(sin(angle), -1, 1, 0, 4);

v.mult(random(1, 20*wave));
var pointillize = random(smallPoint, largePoint);
var x = mouseX + v.x;//floor(random(img.width));
var y = mouseY + v.y;//floor(random(img.height));
//var pix = img.get(x, y);
//fill(pix,pix, pix, 52);
fill(colors[index]);
ellipse(x, y, pointillize, pointillize);
}

if (random(1) < 0.01) {
index = (index + 1) % colors.length;
}

angle += 0.02;
}
``````
2 Likes

woah…thanks for responding so fast…will go through this and see…this is amazing!!

1 Like