Pointillism
By Dan Shiffman. Mouse horizontal location controls size of dots. Creates a simple pointillist effect using ellipses colored according to pixels in an image.
To run this example locally, you will need an image file, and a running local server.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
let img;
let smallPoint, largePoint;
function preload() {
img = loadImage('assets/moonwalk.jpg');
}
function setup() {
createCanvas(720, 400);
smallPoint = 4;
largePoint = 40;
imageMode(CENTER);
noStroke();
background(255);
img.loadPixels();
}
function draw() {
let pointillize = map(mouseX, 0, width, smallPoint, largePoint);
let x = floor(random(img.width));
let y = floor(random(img.height));
let pix = img.get(x, y);
fill(pix, 128);
ellipse(x, y, pointillize, pointillize);
}
