CONCEPT:

For this assignment, I wanted to create generative art that involved text. While searching for inspiration, I came across Scott Garner’s work on Creative Blog, where he used p5.js to create an art piece with stars forming text against a night sky backdrop. This inspired me to explore how stars, randomness, and interaction could be combined to form dynamic, visually engaging text. For my piece, I will create stars that will scatter and form text shapes based on user interaction, blending order and randomness, just like Garner’s example. Ill also make it a space theme while exploring Gaussian distribution to add in the art background.

EMBEDDED SKETCH:

HIGHLIGHT OF MY CODE:

The best part of my code is the interactive switching feature that lets people switch between an arranged text and scattered stars. When you click on a button, this interaction starts. It’s a dynamic, responsive experience where stars move from randomly scattering to making a word. This is how the code works:

// Function to scatter the white dots randomly across the canvas
function scatterDots(canvasWidth, canvasHeight) {
  whiteDots.forEach(dot => {
    dot.currentX = random(canvasWidth);  // Set random x position within canvas width
    dot.currentY = random(canvasHeight);  // Set random y position within canvas height
  });
}

// Function to reset the white dots and stop forming the text
function resetDots() {
  formingText = false;  // Stop forming the text
  scatterDots(500, 500);  // Scatter the dots randomly across the canvas again
}

// Detect mouse presses and trigger button actions
function mousePressed() {
  buttons.forEach(button => {
    if (button.isClicked(mouseX, mouseY)) {  // Check if the button is clicked
      button.action();  // Execute the action tied to the button
    }
  });
}

In the code snippet shown above, I used three key functions to create interactivity and movement:

1. scatterDots(): This function scatters the white dots randomly across the canvas by assigning each dot a random x and y position within the canvas width and height. It adds randomness, simulating stars in the sky.
2.  resetDots(): This function resets the dots to scattered mode by setting ‘formingtext’ to false and calling again scatterDots().
3. mousePressed(): This function detects mouse presses and triggers button actions when the user clicks on the canvas, adding interactivity.

I used these functions to let users switch between random scatter mode and text formation mode based on button clicks. I figured out how to implement these by looking back at class PowerPoints and just experimenting until I got it right.

REFLECTION:

When I think back on this assigment, I like how the stars and the shooting star worked together to make a lively and interactive visual experience. The way the stars scattered and formed the text was just the right mix of randomness and order, just the way I imagined it would be. It looked more real and unpredictable because the shooting star moved in a Gaussian way.

For future updates, I’d like to look into adding more complex interactions. For example, users could drag to control how the stars or shooting stars move. In addition, improving the shooting star trail could make it look more real by making it fade more smoothly over time.

REFRENCES:

Garner, S. (2016, August 10). Explore creative code with p5.js. Creative Bloq. https://www.creativebloq.com/how-to/explore-creative-code-with-p5js.