Concept
I was intrigued by one particular artwork in the computer graphics magazine and wanted to similarly create a sketch using a single type of shape:
I was walking along the highline thinking of potential ideas for my sketch when I saw the A3 building and quite liked how the windows were of different widths and colors so I decided to use the building as my inspiration:
Process
I incorporated randomness into my art in multiple ways — in the position and width of the windows, the weight of the strokes, as well as in the choice of colors. I wanted to add interactivity to my sketch this time and after thinking of different ways of incorporating action, I decided to embrace the original inspiration of the A3 building. On a mouse click, if it lands on a window, the corresponding window (home) lights up to give a warm ambience, and if it lands outside of any window, the background changes color to represent the shift from day to night, and vice versa.
Writing the logic for the mouse click action was harder than I expected. I needed to differentiate between a click outside and inside a window (rectangle) to toggle the background, while also checking if the current window being clicked is the same as before to turn the light off.
function mouseClicked() {
let insideWindow = false;
for (let r of rectangles) {
// check if mouse click falls inside a window
if (mouseX >= r.x && mouseX <= r.x + r.w && mouseY >= r.y && mouseY <= r.y + length) {
insideWindow = true;
let newLightPosition = {x: r.x + r.w / 2, y: r.y + length / 6};
if (lightPosition && lightPosition.x === newLightPosition.x && lightPosition.y === newLightPosition.y) {
lightPosition = null;
} else {
lightPosition = newLightPosition;
}
break;
}
}
// if mouse click falls outside a window, toggle the background
if (!insideWindow) {
lightsOff = !lightsOff;
}
}
To draw the light and the illumination, I found a sunshine palette online and sketched multiple circles of varying sizes and colors. I learned that the fill function can take a 4th argument for transparency, which I found to be very useful in creating the illuminated effect.
function lightsUp(x, y) {
noStroke();
// light bulb light
fill(255, 228, 169);
circle(x, y, 10);
fill(255, 218, 138);
circle(x, y, 8);
fill(255, 210, 112);
circle(x, y, 6);
fill(255, 201, 83);
circle(x, y, 5);
fill(255, 191, 62);
circle(x, y, 4);
// light bulb illumination
fill(255, 228, 169, 30);
circle(x, y, 200);
fill(255, 218, 138, 30);
circle(x, y, 300);
fill(255, 210, 112, 30);
circle(x, y, 400);
fill(255, 201, 83, 30);
circle(x, y, 500);
fill(255, 191, 62, 30);
circle(x, y, 850);
}
Reflections & Improvements for Future Work
I am quite happy about how the sketch turned out, especially the way the light is drawn in multiple layers. I also got to incorporate many of the concepts we learned in class into p5.js, including loops, mouse clicks, booleans, global/local variables and arrays. As this sketch is more or less a static work with simple mouse click triggers, I hope to continue exploring randomness and play with transformations to create live continuous actions on the canvas in the next assignments.
