# Query on how effect on processing book created

**URL:** <https://discourse.processing.org/t/query-on-how-effect-on-processing-book-created/24522>\
**Category:** Processing\
**Created:** [October 11, 2020, 5:57pm UTC](https://discourse.processing.org/t/query-on-how-effect-on-processing-book-created/24522 "2020-10-11T17:57:10Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![dragodiv](https://avatars.discourse-cdn.com/v4/letter/d/85f322/32.png) [@dragodiv](https://discourse.processing.org/u/dragodiv)\
**Post date:** [October 11, 2020, 5:57pm UTC](https://discourse.processing.org/t/query-on-how-effect-on-processing-book-created/24522/1 "2020-10-11T17:57:10Z")

</div>

```auto
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?

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [October 11, 2020, 6:26pm UTC](https://discourse.processing.org/t/query-on-how-effect-on-processing-book-created/24522/2 "2020-10-11T18:26:55Z")

</div>

Hello and welcome to the forum!

Great to have you here!

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

view-source:[http://learningprocessing.com/javascripts/sketches/pointillism.js](http://learningprocessing.com/javascripts/sketches/pointillism.js)

Chrisir

```auto

var img;
var smallPoint, largePoint;

var colors = [];
var index = 0;

var angle = 0;

// function preload() {
// img = loadImage("../images/bg.jpg");

// }
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();
  angleMode(RADIANS);
}

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[0],pix[1], pix[2], 52);
    fill(colors[index]);
    ellipse(x, y, pointillize, pointillize);
  }

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

  angle += 0.02;
}

```

---

<div class="post-metadata">

**Author:** ![dragodiv](https://avatars.discourse-cdn.com/v4/letter/d/85f322/32.png) [@dragodiv](https://discourse.processing.org/u/dragodiv)\
**Post date:** [October 11, 2020, 6:38pm UTC](https://discourse.processing.org/t/query-on-how-effect-on-processing-book-created/24522/3 "2020-10-11T18:38:59Z")

</div>

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