For this assignment, the goal was to combine various elements such as text, background scenery, and interactive components to create a visually appealing and engaging composition.
In this particular assignment, the background consists of a gradient sky with clouds, which provides a serene and calming atmosphere. The addition of colorful butterflies adds a touch of whimsy and liveliness to the scene. The choice of background and butterflies was made to create a harmonious and cohesive composition that aligns with the theme of nature and tranquility. Additionally, using a similar background pattern as the previous assignment helps create a consistent visual theme across multiple assignments, reinforcing the idea of a recurring pattern or motif.
1. Setup Function:
– Initializes the canvas and creates arrays to hold instances of butterflies, clouds, and flowers.
– Generates multiple instances of butterflies, clouds, and flowers with random positions on the canvas.
2. Draw Function:
– Renders the background with a gradient sky and clouds.
– Updates and displays each cloud’s position on the canvas.
– Updates and displays each butterfly’s position and appearance.
– Displays each flower on the canvas.
3. Butterfly Class:
– Represents a butterfly object with properties such as position, velocity, color, and size.
– The `update()` method updates the butterfly’s position and may change its direction randomly.
– The `display()` method renders the butterfly’s wings with a specified color pattern.
4. Cloud Class:
– Represents a cloud object with properties such as position, velocity, and size.
– The `update()` method updates the cloud’s position, ensuring it moves across the screen.
– The `display()` method renders the cloud as a set of ellipses representing its shape.
5. Flower Class:
– Represents a flower object with properties such as position, size, and color.
– The `display()` method renders the flower as an ellipse representing its center and a smaller red ellipse above, representing its stigma.
6. Interactivity:
– The `mouseClicked()` function triggers a change in butterfly colors when the mouse is clicked. This adds an interactive element to the artwork, allowing users to alter the visual composition dynamically.
let butterflies = [];
let clouds = [];
let butterflyColors = [
[255, 20, 147], // Pink
[128, 0, 128], // Purple
[255, 255, 0] // Yellow
];
let currentColorIndex = 0;
function setup() {
createCanvas(700, 500);
// Create a flock of butterflies
for (let i = 0; i < 10; i++) {
let butterfly = new Butterfly(random(width), random(height), currentColorIndex);
butterflies.push(butterfly);
}
// Create some clouds
for (let i = 0; i < 5; i++) {
let cloud = new Cloud(random(width), random(height));
clouds.push(cloud);
}
}
function draw() {
// Draw gradient sky background
background(135, 206, 250); // Light blue
for (let y = 0; y < height; y++) {
let inter = map(y, 0, height, 0, 1);
let c = lerpColor(color(135, 206, 250), color(255, 255, 255), inter);
stroke(c);
line(0, y, width, y);
}
// Display and update clouds
for (let cloud of clouds) {
cloud.display();
cloud.update();
}
// Update and display each butterfly
for (let i = 0; i < butterflies.length; i++) {
butterflies[i].update();
butterflies[i].display();
}
// Display "Hamdah" text
textSize(80);
textAlign(CENTER, CENTER);
fill(0); // Black color
text("Hamdah", width / 2, height / 2);
}
function mouseClicked() {
// Change butterfly colors on mouse click
currentColorIndex = (currentColorIndex + 1) % butterflyColors.length;
for (let i = 0; i < butterflies.length; i++) {
butterflies[i].changeColor(currentColorIndex);
}
}
class Butterfly {
constructor(x, y, colorIndex) {
this.position = createVector(x, y);
this.velocity = createVector(random(-1, 1), random(-1, 1));
this.colorIndex = colorIndex;
this.size = random(20, 40);
this.angle = random(TWO_PI);
}
update() {
// Update position
this.position.add(this.velocity);
// Change direction randomly
if (random() < 0.01) {
this.velocity.rotate(random(-PI / 4, PI / 4));
}
// Wrap around screen
this.position.x = (this.position.x + width) % width;
this.position.y = (this.position.y + height) % height;
}
display() {
// Draw butterfly wings with pattern
fill(0); // Black
noStroke();
ellipse(this.position.x, this.position.y, this.size, this.size / 2);
let wingOffset = this.size / 4;
let wingSize = this.size / 2;
push();
translate(this.position.x, this.position.y);
rotate(this.angle);
fill(butterflyColors[this.colorIndex][0], butterflyColors[this.colorIndex][1], butterflyColors[this.colorIndex][2]); // Butterfly color
ellipse(-wingOffset, 0, wingSize, wingSize * 2);
ellipse(wingOffset, 0, wingSize, wingSize * 2);
fill(0); // Black
ellipse(-wingOffset, 0, wingSize / 2, wingSize);
ellipse(wingOffset, 0, wingSize / 2, wingSize);
pop();
}
changeColor(colorIndex) {
this.colorIndex = colorIndex;
}
}
class Cloud {
constructor(x, y) {
this.position = createVector(x, y);
this.velocity = createVector(random(-0.5, 0.5), 0);
this.size = random(50, 100);
}
update() {
this.position.add(this.velocity);
if (this.position.x > width + this.size) {
this.position.x = -this.size;
}
if (this.position.x < -this.size) {
this.position.x = width + this.size;
}
}
display() {
noStroke();
fill(255);
ellipse(this.position.x, this.position.y, this.size * 1.5, this.size);
ellipse(this.position.x - this.size / 3, this.position.y - this.size / 4, this.size, this.size * 0.8);
ellipse(this.position.x + this.size / 3, this.position.y - this.size / 4, this.size, this.size * 0.8);
}
}
Reading Response:
In his seminal work, “The Design of Everyday Things,” Don Norman meticulously dissects the intricate relationship between design and user experience, shedding light on the fundamental principles that govern successful product interaction. Norman’s exploration of affordances resonates deeply with my own understanding of design, emphasizing the pivotal role of intuitive functionality in fostering seamless user-product relationships.
Consider, for instance, the ubiquitous smartphone interface. A well-designed interface intuitively guides users through its myriad functions, leveraging affordances and signifiers to streamline interactions. Icons and gestures serve as visual cues, effortlessly communicating their intended actions. When users tap an icon, they anticipate launching an app; when they swipe, they expect to navigate between screens. These intuitive interactions not only reduce the cognitive burden on users but also enhance their overall satisfaction with the device.
However, the efficacy of design extends beyond mere functionality; it encompasses a nuanced understanding of users’ evolving needs and technological literacy. As technology continues to evolve, so too does the language of interactive design. Novel features such as facial recognition and fingerprint identification, once considered exotic, have now become commonplace, ingrained within the lexicon of modern devices. Yet, the assimilation of these innovations into the user experience requires careful consideration of contextual factors and prior familiarity.
For instance, imagine a scenario where a user encounters a new smart home device equipped with voice recognition capabilities. To a tech-savvy individual accustomed to interacting with virtual assistants, such as Siri or Alexa, the process may feel intuitive, akin to conversing with a familiar friend. However, for someone less acquainted with these technologies, the experience may prove bewildering, necessitating a more gradual onboarding process to bridge the gap between novelty and comprehension.
This underscores the dynamic nature of interactive design, which continually adapts to accommodate emerging technologies and diverse user demographics. As designers, we must strive not only to anticipate users’ needs but also to cultivate inclusive and accessible interfaces that resonate across varying levels of technological proficiency. By embracing this iterative approach and prioritizing intuitive design, we can forge meaningful connections between users and products, enriching lives and experiences in the process.
