For this assignment, I drew inspiration from abstract paintings in general. That’s mostly because abstract paintings are essentially shapes layered on top of shapes, or at least that’s what we initially believed. The audience can learn that there’s more to an abstract artwork than meets the eye. which I attempted to include into my work.
Making this project more realistic in some manner and pushing myself to replicate at least one of Picasso’s paintings would be my best improvements, if there are any. But that will have to wait. The ellipses and circles that emerge when the mouse is clicked, which are larger than the squares themselves, is something I’m proud of.Overall, I’m somewhat proud of the outcome.
// Global variables to store the canvas and arrays of shapes and colors
let canvas;
let shapes = [];
let colors = [];
let numColors = 7; // Number of colors to generate
function setup() {
createCanvas(600, 600);
canvas = createGraphics(800, 600); // Create off-screen graphics buffer
canvas.background(255); // Set background color of off-screen canvas
// Draw background and shapes, generate colors, and apply colors to the off-screen canvas
drawBackground();
drawShapes();
generateColors();
tintColors();
}
// Function to draw the background of the off-screen canvas
function drawBackground() {
canvas.noStroke();
canvas.fill(255);
canvas.rect(0, 0, 600, 600); // Draw white rectangle covering the canvas
}
// Function to randomly generate and draw shapes onto the off-screen canvas
function drawShapes() {
let numShapes = 50; // Number of shapes to draw
let maxSize = 400; // Maximum size of shapes
// Loop to create and draw random shapes
for (let i = 0; i < numShapes; i++) {
let x = random(canvas.width);
let y = random(canvas.height);
let size = random(50, maxSize); // Random size for the shape
// Generate random fill and stroke colors for the shape
let fillColor = color(random(255), random(255), random(255));
let strokeColor = color(random(255), random(255), random(255));
// Creates an object to represent the shape and adds it to the shapes array
let shape = {
x: x,
y: y,
size: size,
fillColor: fillColor,
strokeColor: strokeColor,
shapeType: int(random(3)) // Randomly choose shape type (0: ellipse, 1: rectangle, 2: polygon)
};
shapes.push(shape); // Add the shape object to the shapes array
}
// Loop through shapes array and draw each shape onto the off-screen canvas
for (let shape of shapes) {
canvas.fill(shape.fillColor);
canvas.stroke(shape.strokeColor);
canvas.strokeWeight(2);
// Draw different types of shapes based on their shapeType property
if (shape.shapeType === 0) {
canvas.ellipse(shape.x, shape.y, shape.size, shape.size); // Draw ellipse
} else if (shape.shapeType === 1) {
canvas.rect(shape.x - shape.size / 2, shape.y - shape.size / 2, shape.size, shape.size); // Draws rectangle
} else {
// Draws polygon with random number of vertices
let numVertices = int(random(3, 8)); // Random number of vertices between 3 and 7
let angle = TWO_PI / numVertices; // Angle between vertices
let halfSize = shape.size / 2; // Half the size of the shape
canvas.beginShape(); // Begin drawing a custom shape
for (let a = 0; a < TWO_PI; a += angle) {
let sx = shape.x + cos(a) * halfSize; // Calculate x-coordinate of vertex
let sy = shape.y + sin(a) * halfSize; // Calculate y-coordinate of vertex
canvas.vertex(sx, sy); // Add vertex to the shape
}
canvas.endShape(CLOSE); // End drawing the custom shape
}
}
}
// Function to generate random colors and store them in the colors array
function generateColors() {
colors = []; // Clear the colors array
for (let i = 0; i < numColors; i++) {
colors.push(color(random(255), random(255), random(255))); // Generate random color and add it to the colors array
}
}
// Function to apply tinted colors to the off-screen canvas
function tintColors() {
let colorIndex = 0; // Initialize color index
// Loop through the canvas in a grid pattern
for (let y = 0; y < canvas.height; y += 50) {
for (let x = 0; x < canvas.width; x += 50) {
let c = colors[colorIndex % colors.length]; // Get the color from the colors array
canvas.tint(c); // Apply tint with the color
canvas.image(canvas, x, y); // Draw the off-screen canvas onto itself with the applied tint
colorIndex++; // Increment color index
}
}
}
// Function called when mouse is clicked
function mouseClicked() {
generateColors(); // Regenerate colors
canvas.clear(); // Clear off-screen canvas
drawShapes(); // Redraw shapes on off-screen canvas
tintColors(); // Apply tinted colors
}
// Function called when mouse is moved
function mouseMoved() {
generateColors(); // Regenerate colors
canvas.clear(); // Clear off-screen canvas
drawShapes(); // Redraw shapes on off-screen canvas
tintColors(); // Apply tinted colors
}
// Main draw function to display the off-screen canvas onto the main canvas
function draw() {
image(canvas, 0, 0); // Display off-screen canvas on the main canvas
}
Reading Response:
In the book “The Art Of Interactive Design”, Crawford delves into the concept of interactivity by addressing the misinterpretations of the term “interactivity” itself. He emphasizes the importance of the quality of each subtask for successful interaction, distinguishing between the genuine interactivity and instances where the terms is diluted. Moreover, Crawford introduces the concept of and “interactivity designer,” highlighting the specialized skills and consideration required for designing interactive experiences. The chapter concludes by addressing the resistance faces by interactivity designers.
In essence, this chapter provides a thought-provoking and insightful exploration of interactivity, challenging conventional understandings and advocating for a more comprehensive approach to designing interactive experiences. Crawfords perspective redefines interactivity but also emphasizes the need for a paradigm shift and integration of diverse expertise in the evolving field of interactivity design.
