Skip to main content

Dune Project: Generating Art from Dune Quotes 🏜️✨

00:02:03:30

Inspired by my love for the Dune universe, I built a quirky yet fun project that generates quote artwork and prepares it for publishing on Redbubble. While it might seem a little useless at first glance, this project combines creative automation and coding to deliver unique, visually stunning pieces of art.

📌 What Does It Do?

The Dune Project takes a random quote from the Dune series, merges it with a breathtaking Unsplash image, and stylizes it with cool fonts and layouts. Here’s how the magic happens:

  1. Fetches a Quote: Pulls a random Dune quote via API.
  2. Generates Artwork: Uses the Bruzu API to create a poster-worthy image.
  3. Saves Locally: Saves the high-resolution image ready for upload to platforms like Redbubble.

🛠️ Tools and Stack

  • Node.js: The backbone of the application.
  • Bruzu API: Handles image generation.
  • Unsplash: Provides beautiful background images.
  • Tailwind CSS: For lightweight, clean styles.
  • Express.js: Powers the server.

🚀 How It Works

Step 1: Fetching the Quote

The app retrieves a random quote using an external API:

javascript
const axios = require("axios");

const getQuote = async () => {
  const response = await axios.get("https://api.dune-quote-service.com/random");
  return response.data.quote;
};

Step 2: Generating the Artwork

Using Bruzu API, the project transforms the quote into an eye-catching visual:

javascript
axios
  .get(
    encodeURI(
      `https://img.bruzu.com/?apiKey=${process.env.BRUZU_API_KEY}&backgroundImage=${imageURL}&a.text=${quote}&a.color=white`
    ),
    { responseType: "stream" }
  )
  .then((response) => {
    response.data.pipe(fs.createWriteStream("output.png"));
  });

Step 3: Viewing the Result

Once generated, the image is saved locally and can be previewed on your local server at localhost:3000/quote.

🤔 Challenges and Solutions

Customizing the API Calls

The Bruzu API offers extensive customization, but tweaking parameters for ideal font sizes, colors, and positions took some trial and error.

Solution: I created reusable helper functions to adjust layouts dynamically.

Automating Publishing

While not yet implemented, automating uploads to Redbubble presents unique challenges with authentication and image specifications.

🧠 Lessons Learned

  1. Creative Coding: Combining APIs for both text and visuals can produce delightful outcomes.
  2. Experimentation Pays Off: Exploring APIs like Bruzu expanded my understanding of dynamic content creation.
  3. Building for Fun: Projects don’t always need to be serious—quirky ideas can showcase technical skills just as well.

What’s Next?

  1. Automate the publishing process to Redbubble.
  2. Add support for custom quotes and user-provided backgrounds.
  3. Explore additional layout styles for more variety.

Check out the full code here: Dune Project on GitHub