ICM: HW – Repetition with Variation / Pair-Programming

 

 

 

Full Screen Mode here  / Editor mode here

Team: Gabriella Garcia & Becca Moore

 

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.

 

 

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).  ❤

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? )

 

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 ();
translate(250,-115,200,200);
rotate(PI / 4.2);
fill(250,100,100,50);
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);
noFill();
pop();
}

 

 

With a For Loop (with no rotation):

 

 

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

}

 

 

 

 

 

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.

 

 

 

 

 

(Gabriella’s  sketch for background pattern)

 

 

 

 

 

 

 

(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.

 

 

 

 

 

Helpful Links while working on the assignment:

• The map() function 
• Variables in P5.JS (MouseX, MouseY);
• While and For Loops 
• Mouse Interactions with Objects 
• Interacting with the Dom, using Sliders,
• http://genekogan.com/code/p5js-transformations/

 

 

 

 

 

Code 

// 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);
background(‘white’);
frameRate(20);
}
function draw() {

//

ellipseMode(CENTER);
rectMode(CENTER);
strokeWeight(3);
noFill();

if (invert) {
stroke(col);

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

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
push();
translate(250, -130, 200, 200);
rotate(PI / 4.);
console.log(mouseX, mouseY);
rectMode(CORNER);
fill(250, 100, 100, );
// strokeWeight(1);
noStroke(3);
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);
pop();
// 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);
//fill(250,100,100,50);

 

//background color slider
//slider bar
push();
// strokeWeight(2);
fill(245);
noStroke();
rect(0, 480, 1000, 12);
pop();

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

}