This is a post about the fxhash collaboration project 'Collage' that I have with Aluan and Jinyao. It's a great honour to be part of this huge project and alongside so many talented artists. We had tons of fun creating this project so we decided to write a little bit about this project.
Inspiration
During the brainstorming session of the project, Aluan comes up with an idea of using our iconic patterns as textures as base of this collaboration. We immediately accept this interesting idea and also think it'll be easier to work with technically, which I'll cover in the later session.
The first ideas come to my mind were these amazing illustrations by Jesse Stone : https://www.instagram.com/stonecollages/
I've been a fan of his work, using big blocks of colours really inspires me and makes me wonder what if I replace the block of colours with our textures ?
First experiments
I started experimenting by taking some screenshots from our projects and putting them together to create a mountain shape.
And surprisingly it worked out ok ! It has some weird parts however we all really like the look of it. Seeing this strengthens our idea of mixing our patterns. This also gives a strong Japanese feeling in it, therefore we start the second round of explorations.
The mountains
We looked for traditional Japanese texture design and found a lot of inspiration in it.
These patterns and textures are so beautiful that I couldn't take my eyes off them. I especially enjoy the different presentation of the curves, that sometimes it is really detailed, sometimes it is really smooth. I started experimenting with these curves to recreate the shape of the mountain and having tons of fun with it :
The flowers
At this point we were really excited about the progress we've made so far. However we were also thinking of adding more elements to the project to have more variations. From the exploration of traditional Japanese pattern and textures, we discover there's another common subject : flowers
We really enjoy these flowers, and decide to give these flower shape a try :
We are quite happy with the different shapes of flowers, it adds a good variation to the whole collection. However we still want to add more.
The Hexagons
Hexagons is another common element that we found in the traditional Japanese patterns. I’ve always interested in hexagon shapes so I’ve decided to including it in this project. And also during the experiment I discover the tetrapod shape which is related to hexagon shape and also tile-able, therefore I decide to add this in for more variation too.
Colour themes
The other big part of the project is about colour. It is a great challenge to mix the colours from the textures of all 3 of us. So at the end we decided that each piece will contain the patterns of all the 3 artists, each artist has a certain number of patterns with different colours. Depending which artist you get, his pattern will be shown as the primary colour theme while the pattern of the other 2 artists turns into grayscale to make the primary pattern with colour stand out.
And also we added some more different background colour into the mix :
Technical
Project setup with multiple p5 instances
As mentioned in the beginning, we decided to use textures as the basis of our project. This is great because it makes it really easy to work with. All I need is a canvas from Aluan and Jinyao then I can start using them to create. All the textures are created in real time when the project starts. Both Aluan and Jinyao are using p5.js to create their texture, in order to have 2 p5 canvas in the same project you have to use p5 instance mode :
And at the end I can get their canvas back, here is an example code :
const generateTexture = (width, height, bg = 20) =>
new Promise((resolve, reject) => {
const s = (p) => {
let count = 0
p.setup = function () {
p.createCanvas(width, height);
p.background(bg);
};
p.draw = function () {
// ... texture generation code goes in here
if(count ++ > 200) {
// once texture is fully generated,
// stop the loop and send the canvas back
p.noLoop();
resolve(this.canvas);
}
};
};
new p5(s);
});
export default generateTexture;With this setup, Aluan and Jinyao can focus on creating the texture without needing to worry how to integrate their work into the project. On the other side, I'll wait until all the textures are being generated then start making the shape and fill in the textures.
Filling shape with textures
Once I get the textures ( as canvas ) , the rest is easy. I'm not using any library but the vanilla javascript canvas. To fill the shape with image texture can be achieved by using the globalCompositeOperation'. First you need to draw the whole texture as a background, to save the trouble from tiling, scaling and position the texture in the right place, we simply generate the texture exactly the same size as the target output. The next step is to set the globalCompositeOperation to "destination-in", then draw the shape that you'd like, this will mask out all the other regions and keep the texture within the shape you drew :
// draw the whole texture
ctx.drawImage(tex, 0, 0);
// set the globalCompositeOperation to "destination-in"
ctx.globalCompositeOperation = "destination-in";
ctx.fillStyle = rgb(255);
ctx.beginPath();
points.forEach((p, i) => {
if (i === 0) {
ctx.moveTo(p.x, p.y);
} else {
ctx.lineTo(p.x, p.y);
}
});
ctx.fill();
// don't forget to set the globalCompositeOperation back to default
ctx.globalCompositeOperation = "source-over";
This technique is the core of this project. You can use this to fill any shape with a texture.
The Final Results
Here are some final results of the project. We decided to keep the features simple. There are 7 different compositions including : Mountain, Lake, Wave, Hexagons, Tetrapods, Chrysanthemums and Lotus. 3 primary artists, 3 different background patterns and a chance to have the golden colour theme :
Fxhash is definitely one of the most unexpected yet exciting events for me last year. I've met so many new talents and discovered so many amazing projects. And to my surprise, it helped me to reconnect to my home country : Taiwan. I've been living in Europe for almost 15 years and lost almost all my connection to Taiwan. And with this journey, I've made so many new connections to Taiwanese artists such as Aluan and Jinyao. That's why this collaboration meant a lot to me.
And because of this ( the Taiwanese team ), we've decided to donate 25% of the primary incomes from this project to the FAB DAO ( Formosa Art Bank.) FAB DAO is a non-profit organisation based in Taiwan that focuses on building a community that includes the features of charity, culture, and art by organising and selling non-profit NFTs. We direct our advocacy towards minting non-profit NFTs, supporting artists in getting involved in web3, and providing blockchain education services. We all really enjoy the sharing and supporting vibe of the tezo community, and now it's our turn. We want to help and support more artists to join us in this great era. So this is it, the big journey from the beginning to the end of this project. We are really grateful for Fxhash inviting us to just this enormous #fxcollab project and proud to be alongside with all the other established artists. Hope you all enjoyed the result and thank you for all the support that you've given me during this whole journey. It's wild and I'm greatly appreciated it, now looking forward for more fxcollab projects to come !