ICM: HW – Repetition with Variation / Pair-Programming




Screen Shot 2018-09-27 at 3.40.11 AM.png

Full Screen Mode here  / Editor mode here

Team: Gabriella Garcia & Becca Moore

Screen Shot 2018-09-27 at 3.40.03 AM.png


Assignment: Create an interactive artwork that implements the concept of repetition with variation. Use at least one for loop. Your artwork should also incorporate an interactive interface element of your own design. For this assignment, work in pairs.


Screen Shot 2018-09-27 at 4.32.47 AM.png


Gabriella and I started off  by sharing links with each other to projects and patterns that inspired us? I included some color and line studies (Josef Albers, Sol LeWitt, & Vera Molnar)  but mentioned it could be cool to pull inspiration from places beyond formal shape color exploration?

She replied back with some links to Lance Wyman’s amazing work (the designer of all the artwork for the 1968 Mexico City Olympics).  ❤

Screen Shot 2018-09-27 at 4.31.56 AM.png

Gabriella ended up developing an algorithmic repetitive echo pattern – creating a similar op art feel as some of Wyman’s projects (Executed through If/Else conditional logic).


I actually think I may have broken her code with my last iteration?  :((  When adding in a diamond like button and a slider that changes the value of the ripple color. Would love to see if we could get back to her feel from her first pass, where there’s more visual residue of the shape ripples (maybe due to backdrop being in Setup verses Draw? )


Screen Shot 2018-09-20 at 12.08.16 AM.png

Developing a Josef Albers pattern helped me learn more about loops. Although in our latest version, I didn’t include the diamond as a For Loop, I would like to try it / look into how I could fold in the gradient pattern into it as well? I was having difficulty with the gradient color getting overwritten. Also the image above would be more about increasing the alpha/transparency or adding white? Thought for our sketch a red to orange gradient would be nice 🙂  ❤


This week, the two of us went to office hours with the Jasmine, a resident at ITP.  She helped me distill my rectangle grouping into a for loop that I’d like to continue to build off:


Without a Loop:

push ();
rotate(PI / 4.2);
rect(220, 220, 95, 95);
rect(220, 220, 95, 95);
rect(220, 220, 85, 85);
rect(220, 220, 75, 75);
rect(220, 220, 65, 65);
rect(220, 220, 55, 55);



With a For Loop (with no rotation):

Screen Shot 2018-09-27 at 4.58.22 AM.png



for(let s =95; s>50; s-=10){
rect(220, 220, s, s);







After talking with Gabriella, I started to making a simple slider for our sketch. She encouraged us to think about approaching the idea of a button more conceptually. As in what is it’s function (beyond a circle button?) , and what could it look like? Our whole sketch essentially is a button – with a cursor click, the ripples of shapes shift outwards and change.


Screen Shot 2018-09-27 at 4.05.14 AM.png





(Gabriella’s  sketch for background pattern)



Screen Shot 2018-09-27 at 1.25.11 AM






(My sketch for diamond pattern/potential button )







The slider at the bottom is based off of the map() function – and affects the color of the radiating squares and circles.

Screen Shot 2018-09-27 at 4.49.14 AM.png






Helpful Links while working on the assignment:







// Hw#3: Repetition with Variation
// Team: Gabriella Garcia & Becca Moore
// Guidance from Resident Jasmine Soltani
// Color Guide
// Seafoam blue – 179, 255, 244
// Salmon pink – 250,130,100
let d = 20;
let x = 250;
let y = 250;
let s = 343
let col = 0
let invert = false;

function setup() {
createCanvas(500, 500);
function draw() {



if (invert) {

} else {
col = map(mouseX, 0, 400, 200, 255);
fill(179, 255, 244);

if (mouseIsPressed) {
ellipse(x, y, d);

} else {

rect(x, y, d, d);
d = d + 25;

if (d > width) {
d = 20;
invert = !invert;


// Josef Albers Interaction of Color inspired diamond
translate(250, -130, 200, 200);
rotate(PI / 4.);
console.log(mouseX, mouseY);
fill(250, 100, 100, );
// strokeWeight(1);
rect(220, 220, 95, 95);
fill(250, 120, 100);

rect(220, 220, 85, 85);
fill(250, 130, 100);
rect(220, 220, 75, 75);
fill(250, 140, 100);
rect(220, 220, 65, 65);
fill(250, 150, 100);
rect(220, 220, 55, 55);
// For Loop Replacement Example
// could draw the rectangles of diamond using this for loop:
// but unsure how to fold in the gradient shift from orange to red?
// for(let s =95; s>50; s-=10){
//rect(220, 220, s, s);


//background color slider
//slider bar
// strokeWeight(2);
rect(0, 480, 1000, 12);

//slider circle
col = map(mouseX, 0, 400, 200, 250);
fill(250, 130, 100);
ellipse(mouseX, 480, 10, 10);


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s