• Black Vimeo Icon


First Pattern Control

Updated: Oct 28, 2019

Abi and I came up with this idea of using a dot that follows the mouse to control the pattern in the back.

We tried to decide a pattern first, and we landed on this from http://sasj.nl/ .

It was probably a wrong choice as I could not recreate it on my sketch. I first made a row of circle, and moved them down, and then bounced back when they reach the edge of both sides. Later, I generated a screen filled with circles using For Loop, then I tried to make the circles move down, planning on addressing on the size change afterwards. However, I just could not make the circle pattern move by using the same If equation I used to make the single row move earlier. I wondered if For Loop and If equation cannot be used together. Hence, I tried to create the circle pattern by using Array, Class and If equation, and it still did not work. I reached to the most frustrating point of my ICM learning journey so far. I felt horrible that Abi paired up with me because she thought I made cool project without having a programming background, but then we spent 4 hours, and I could not contribute by making anything work...

Abi eventually made a circle pattern with a dot that follows the mouse to control the width and height of the circles. I modified it so that the pattern does not break while the dot was being moved. And then we tried to make the dot more like a circle button that you could drag to control the shape and size of the circles after you click, but we could not make the dragging of the circle work. I was super frustrated. So far, I could usually try to make what I intended work, or close to what I wanted, but it was the first time that I spent 4 hours but only get the patterns to not break and contribute to nothing else. I told Abi, I would definitely try to make it work the way we wanted when I work on it later.

The night of the same day, I came home, filled with all the desire of wanting to redeem myself, I sat down and started delving into the codes. I tried to break down each logic. First, getting the rollover set up, make the dragging work. While I was dragging the dot to control the size of the circles, besides deciding on not changing the width and height ratio based of the mouse to make the pattern cleaner, I also found out that at certain point, the circle pattern could be seen as in reverse color. Therefore, I constrained the range of the size of the circle to make set the pattern. Moreover, I created a boundary for the dot to be in as a matrix, and mapped the range of x axis of the dot to the constrained range of the size of the circles. After finally got to where we wanted it to be, I wanted to make it a bit more elaborate, so I added the diagonal lines, and turn them 90 degrees according to the constrained range of the y axis of the dot, and there it goes, our first pattern control! And my confidence is back!

  • Move the red dot in the middle up and down to change the angle of the diagonal lines

  • Move the red dot left and right to change the size of the circles, the background color of the pattern, and the color of the diagonal lines


let dragging = false;

let rollover = false;

let cx, cy, cr;

let x, y, r;

let lx, ly, angle, lcol;

let offsetX, offsetY;

function setup() {

createCanvas(600, 600);

cx = width / 2;

cy = height / 2;

cr = 25;

r = 0;

offsetX = 0;

offsetY = 0;

lcol = 255;




function draw() {


if (dist(mouseX, mouseY, cx, cy) < cr) {

rollover = true;

} else {

rollover = false;


for (x = 0; x <= width; x += width / 20) {

for (y = 0; y <= height; y += height / 20) {




// changes size of ellipse according to mouseX, mouseY

ellipse(x, y, r);




for (lx = -width; lx <= width * 2; lx += width / 20) {

for (ly = -height; ly <= height * 2; ly += height / 20) {


translate(width/2, height/2);



line(lx, ly + width / 20, lx + width / 20, ly);




if (dragging) {

cx = constrain(mouseX + offsetX, width / 2 - cr * 4, width / 2 + cr * 4);

cy = constrain(mouseY + offsetY, height / 2 - cr * 4, height / 2 + cr * 4);

r = constrain(map(mouseX, width / 2 - cr * 5, width / 2 + cr * 5, 0, width/15), 0, width/15);

angle = constrain(map(mouseY, height / 2 - cr * 5, height / 2 + cr * 5, 0, 90), 0, 90);

lcol = map(mouseX, width / 2 - cr * 5, width / 2 + cr * 5, 255, 50);


stroke(180, 50, 80);


fill(180, 50, 80, 25);

rect(width / 2, height / 2, cr * 10, cr * 10);


if (dragging) {

fill(225, 100, 150);

} else if (rollover) {

fill(225, 50, 100);

} else {

fill(180, 50, 80);


ellipse(cx, cy, cr * 2);


function mousePressed() {

if (dist(mouseX, mouseY, cx, cy) < cr) {

dragging = true;

offsetX = cx - mouseX;

offsetY = cy - mouseY;



function mouseReleased() {

dragging = false;


#ITP #ICM #pattern #circles #diagonal #lines #matrix #control