Creating Stunning Generative Collages

Table of Contents

1. Introduction
2. Experimenting with Images and Sprites
3. Uploading Images to the Sketch
4. Creating an Array of Assets
5. Populating the Sprites Array
6. Associating Images with Agents
7. Rendering Agents with Images
8. Creating Collage-like Compositions
9. Adjusting the Number of Agents
10. Adding Color to the Images
11. Playing with Background Erasure
12. Using Tint to Color Images
13. Exploring Different Effects
14. Conclusion

Introduction

In this lesson, we will be building upon the previous agent painter example. However, instead of using primitives to draw our agents, we will be experimenting with the use of images and sprites. We will draw inspiration from artists like Joshua Davis, who create compositions using a mix of randomly generated elements and hand-drawn elements. Let's take a look at how we can achieve this effect in our sketch.

Experimenting with Images and Sprites

To begin, we will remix our previous sketch and rename it "Sprites". We will then upload the images we want to use as sprites in our sketch. These images should have a transparent background and can be obtained from free vector drawing websites or created by ourselves. Once we have our images, we can proceed to upload them to our sketch.

Uploading Images to the Sketch

To upload the images, we will add them as assets in our sketch. We can do this by selecting the option to add a file and then navigating to the location of the images on our desktop. Since we need to upload each image individually, this process can be a bit tedious. However, once we have uploaded all the images, we can proceed to the next step.

Creating an Array of Assets

In our sketch, we will create an array called assets. This array will contain the URLs of the uploaded images. We cannot directly refer to the images by their file names since they are hosted on a different folder within glitch. Therefore, we need to refer to them by their respective URLs. We will populate this array with the URLs of all the images we uploaded.

Populating the Sprites Array

Next, we will create another array called sprites. This array will contain the actual image objects that we will be using as sprites. We will use the preload section to load the images from the assets array and push them into the sprites array. By doing this, we only need to load the images once before the sketch starts, ensuring efficient use of resources.

Associating Images with Agents

Now that we have our array of image objects, we can associate each agent with a random sprite. Every time we want to add more detail to our agents, we can simply add another variable to the new agent object for assigning an image. Selecting a random image from the sprites array is as easy as picking a random image object.

Rendering Agents with Images

To render the agents with images, we need to make a few changes in the render agent function. We will use the image mode center instead of rectangle mode and comment out the line that draws a line. Instead of drawing a line, we will now draw the image associated with the agent's position. We can do this by using the agent.sprite and setting its position as (0, 0).

Creating Collage-like Compositions

With the ability to use images as sprites, we can create more visually appealing compositions. By combining the generative systems underneath with pre-created assets, we can create collage-like compositions. The possibilities are endless, and we are not limited to using circles, dots, and lines anymore.

Adjusting the Number of Agents

If the composition becomes too cluttered or overwhelming, we can adjust the number of agents to create a more balanced layout. By reducing the number of agents, we can create a less twitchy and chaotic behavior. Finding the right balance is key to achieving the desired visual effect.

Adding Color to the Images

By utilizing the tint function, we can add color to our black and white sprites. Before drawing the image, we can use the tint function and pass in the agent's color. This will apply the specified color to the image, allowing for more vibrant and diverse compositions.

Playing with Background Erasure

We can choose whether to erase the background or leave it visible in our compositions. Each choice creates a different effect. If we don't erase the background, the sprites will leave trails behind them, filling the space in a captivating way. Experimenting with different background options can yield unique outcomes.

Using Tint to Color Images

While using the tint function to color the images, it's essential to note that it may slow down the sketch's performance. However, incorporating color into the images can produce visually stunning results. By applying the color palette used in the previous example, we can create compelling compositions.

Exploring Different Effects

With the ability to generate infinite images based on the collage-like arrangement of assets, we can explore various compositions by adjusting different parameters. By changing the number of agents, the background erasure, and the color palette, we can discover unique and interesting visual outcomes.

Conclusion

In this lesson, we have learned how to use images and sprites to create visually appealing compositions. By uploading image assets, associating them with agents, and rendering them in our sketch, we have expanded the possibilities for generating intricate visual effects. The ability to experiment with different parameters allows for endless creativity and the creation of captivating compositions.

Highlights

• Experiment with using images and sprites instead of primitives
• Upload images as assets and refer to them by their URLs
• Populate an array with image objects for use as sprites
• Associate images with agents to add more detail and variety
• Render agents using their associated images
• Create collage-like compositions by combining generative systems and pre-created assets
• Adjust the number of agents to achieve the desired visual effect
• Add color to the images using the tint function
• Explore different background erasure options for unique outcomes
• Discover diverse effects by adjusting parameters such as number of agents, background erasure, and color palette

FAQ

Q: Can I use my own images for the sprites? A: Yes, you can use your own images as long as they have a transparent background.

Q: How do I adjust the number of agents? A: You can change the number of agents by modifying the code that creates the agents. Simply adjust the parameters to your desired value.

Q: Can I change the color of the images? A: Yes, by using the tint function, you can apply different colors to the images. Experiment with different color palettes to achieve the desired effect.

Q: What happens if I don't erase the background? A: If you choose not to erase the background, the sprites will leave trails behind them, creating a visually interesting effect.

Q: Can I combine different generative systems with the images? A: Yes, by combining generative systems with pre-created assets, you can create unique compositions. Experiment with different systems and assets to achieve captivating visual outcomes.