This will forever be recorded as one of the most exciting events to participate in for my whole life. I've never been this happy and excited before. It is fun and intriguing just to be able to explore and draw a bunch of pixels into a public canvas just like grabbing squares (pixels) and putting it into a giant block of land (the canvas) to draw art with.

Great job! 😃

On a side note, I would say this is the very first time I have ever experienced a live canvas event like this, I learned about the mechanism of placing pixels and everything. I'm pretty glad I was brought to Lemmy then headed out my job to it (creating an account etc.) and then brought to the canvas event, I got excited when @[email protected] first told me about the event. I've been interested to do this kind of stuff, and overall, that was pretty exciting after all! 😃

I'm also filling a bunch of small available blank spaces with mini abstract/custom flags

So excited!! 🤩

The Great Dreamscape of Serene Imagination

Since it's freestyle, I've decided to go on an image that represents a state of mindful yet limitless imagination that brings into the greatest and the most wonderful sides of the world. Here's what it's turned out.

::: spoiler Details Generated with: txt2image-generator

Prompt: A young man ((floating with his paint kit largely spilling everywhere)), painting an abstract art on a huge canvas ((at an excellently phenomenal, fresh, vibrant orange sunset background with the large sun, mountains and lakes.)) (((Papers, pencils, brushes, (light bursts, and drops of exploding paint) broadly flying and scattering everywhere from the man))), creating a perfect scene that resonates into the doomed reality, excellent artwork, freestyle, conceptual, majestic photo, creative, 4K, ultra-clear quality, huge light leaks, phenomenal light burst, vibrant color grading, dramatic angle, perfectly aligned, ((colorful, extreme angle shot, vibrant color grading))

Negative Prompt: floating on a lake, paint cans, low quality, bad image, watermark :::

Good ranking!

Using some analysis tools, my template has 1356 pixels to draw. I spent parts of pixels on my drawing, and the rest on everything else. Thought I was only placing around ~1000 pixels during the event.

I also love how everything is getting more complete on its own. I always look around when I'm waiting for the pixel cooldown.

Cool update!! 😃 I didn't know there will be this customization option because of the new navigation bar (I noticed that yesterday). For some reason, my user style made it look like the little tab buttons for me (and I kind of wanted to keep it for now). I do still need that "resources" link, so you might probably want to link it somewhere in the welcome page so I can access it from there instead.

After some digging, I found that the error was caused by the hub event card's Perchance data compiler. The indentation error rooted from this community event post on Casual Perchance (expand the "Perchance Data" section). This error is unrelated to the generators page itself.

Can you fix this @[email protected]?

For me though, Perchance is really just a foundation for me to actually create things I like and engage with other creations since I discovered it back in 2022 when it's just plain simple (there was no hub, very simple welcome page, fewer plugins, simpler comments plugin UI, etc.) and there wasn't any AI image stuff or t2i generators yet. And that's the reason why the Generator Manager (my generator hub page) is here. I started to like it so much that I published my first own creation even published here on this platform. Love to see how it evolves, though, and glad this was explained in this Lemmy community!

In addition, I'm quoting from what I wrote in the News & Updates section of my generator hub page:

But, in the end, I was able to put all of them together, a piece of history of my entire generator-making journey, into a part of a large collaborative canvas event! It was also really fun and I was able to interact with people from across the entire Fediverse, and it was also the very first time I experienced such things like that.

You can check out the Perchance FAQ which talks about a question about open source Perchance and more, but here's an explanation:

Will there be an open-source Perchance library for programmers? Ideally, yes. The only reason there isn't one already is because Perchance was built in a very "MVP" manner. (Talking to the programmers here,) I've altered the prototypes of inbuilt objects (Array, String, etc.), inadvisably hacked together Proxys and with statements to construct fake scopes and execution chains, simulated operator overloading by playing with valueOf and well-known Symbols, used eval unreservedly, and, in general, summoned every other JavaScript demon needed in order to get the Perchance DSL's syntax to work nicely (all code inside square brackets is executed as plain JavaScript, for those who missed that). So currently Perchance isn't in a state where it's easy to pull out the engine, throw it into an NPM module and call it a day (until this proposal becomes a reality, that is). If you're okay with the aforementioned mess, then you can pretty much just grab the .js files that are used in the iframe, include them in your project and use them the same way they're used in the iframe html (you just pass createPerchanceTree your a string of perchance code and it returns the "root" of the tree, which you can then use to call the sublists).

— Perchance FAQ

Okay I just found a trick to make the comments plugin use different appropriate custom styles that matches to the light/dark mode configuration. (There's an alternate solution down below)

Now, I see in the ai-chat-modern generator there isn't a variable that detects whether the dark mode is on or off, so to create one put this in the list code:

isDarkMode = [document.body.classList.contains("dark")]

And then you can make a default themes list that consists of the items light and dark accordingly, and then move all the style configurations (except the Defautwidth, Defautheight and DefaultloadFonts) as the child items on your generator like this:

DefaultThemes
  light
    DefautlmessageBubbleStyle = font-family: "Work Sans"; font-size: 13.5px; background: #f9f9f9; color: #191713; border-radius: 10px; padding: 10px; margin: 10px; margin-block: 25px; border: 1px solid #c1bcb9; margin: 0;
    DefautmessageFeedStyle = background-color: #f8f8f8; background-size: contain, cover; background-repeat: no-repeat; background-position: center, center; overflow-x: auto; display: flex; flex-direction: column-reverse; gap: 10px; padding: 10px; 
    ...
  dark
    DefautlmessageBubbleStyle = font-family: "Work Sans"; font-size: 13.5px; background: #1e1f20; color: #e6e8ec; border-radius: 10px; padding: 10px; margin: 10px; margin-block: 25px; border: 1px solid #313638; margin: 0;
    DefautmessageFeedStyle = background-color: #070707; background-size: contain, cover; background-repeat: no-repeat; background-position: center, center; overflow-x: auto; display: flex; flex-direction: column-reverse; gap: 10px; padding: 10px; 
    ...

(I've already made the full code for the DefaultThemes list that you can take a look here)

And from here you can replace the [Defautl...Style] variable blocks in the chat options to follow with the light/dark mode configuration. If that'd be too tedious to find and replace each of them manually, I've built a set of regex that can be entered in the find and replace field (press Ctrl+H) of the list code only once:

Replace: /\[(Defaut.*Style)\]/g

With: [DefaultThemes[isDarkMode ? "dark" : "light"].$1]

So the chat options should now look like this:

chatOne
  replacedDuringUpdate = true
  messageBubbleStyle = [DefaultThemes[isDarkMode ? "dark" : "light"].DefautlmessageBubbleStyle]
  messageFeedStyle = [DefaultThemes[isDarkMode ? "dark" : "light"].DefautmessageFeedStyle]
  inputAreaStyle = [DefaultThemes[isDarkMode ? "dark" : "light"].DefautinputAreaStyle]
  submitButtonStyle = [DefaultThemes[isDarkMode ? "dark" : "light"].DefautsubmitButtonStyle]
  containerStyle = [DefaultcontainerStyle]
  fullscreenButtonStyle = [DefaultThemes[isDarkMode ? "dark" : "light"].DefautfullscreenButtonStyle]
  settingsButtonStyle = [DefaultThemes[isDarkMode ? "dark" : "light"].DefautsettingsButtonStyle]
  ...

Oh, and we also need the comments plugin to match to the appropriate mode right when the mode is switched, so we're going to make a function that updates the chat frames:

reloadChatFrames() =>
  for (let cpel of document.querySelectorAll("#chat, #custom-chat")) {
    update(cpel);
  }

And then, moving on to HTML code panel, assign the light/dark mode toggle event so that the function runs after the darkMode() like this:

<button onclick="darkmode(); reloadChatFrames()">
  <i class="fa-solid fa-moon" aria-hidden="true"></i>
  <i class="fa-solid fa-sun" aria-hidden="true"></i>
</button>

Also, if you want the loading screen to also match with the mode, you can add this into the CSS style:

  .__perchance-comments-loading-facade-12345 {
    background: var(--vanilla-velour) !important;
  }
  .dark .__perchance-comments-loading-facade-12345 {
    background: #181818 !important;
  }

I might create a new example out of this that not only demonstrates this behavior that is applicable to all generators, but also shows that you can have multiple different styles inside the comments plugin, not just light and dark mode custom styles.

I changed the censoredWords and bannedNicknameWords variables in the list code editor, and the content warning is no longer there. Thank you! :)

Edit: Another thing I noticed is that Perchance seems to automatically set the generator to private once it detects that it has inappropriate content like this; I had to set it back to public in order to make it appear in the recently updated generators page again.

These are really good points. Also, I'd like to be able to also get a variable of an array of saved images from the gallery (i.e. the result object from the onFinish() but with the generated images that are from the gallery).

Thanks! I'd also suggest the Go to Event and Go to Post buttons to be a bit larger, so it'll be easier and more noticeable for people to find and click on it.

@[email protected] Looking for some potentials, I think this would be great to implement this as an actual Perchance feature.

https://perchance.org/power-rain-plugin

Just made a decorative plugin that adds a rainy effect into your generator. You can also make snowy effects with this, and also any kind of rain effects as well. 🌧️

Thanks Dev! Now there aren't any warnings in the generator anymore. 👍

I also don't regret making my Random Mixed-up Flag Image Generator as well as the Counter Lab, which is pretty much some of the only generators with AI plugins that I've ever made.

(Not to mention The Super Long Name and Chat in the Smartwatch also have a text-to-image-plugin built into it!)