_sendPixel

_sendPixel is a unique blockchain-based game that seamlessly blends creativity, competition, and crowdfunding. 🌟 The challenge of storing pixel data on-chain can be costly, but _sendPixel introduces an innovative approach to solve this. Instead of directly storing pixel data, each pixel's RGB color values and its coordinates (x, y) are encoded into the amount of native ETH sent to the contract. This design leverages the blockchain's most cost-efficient function: transferring coins. 🎨💡

The structure is simple yet powerful — pixel data is represented in transactions as 0.0......0rgbxy. A backend service then listens for on-chain events, decodes this data back into color and coordinates, and renders it on the frontend canvas. This transforms the experience into a gamified canvas coloring game, where participants can color pixels by sending ETH to a designated Canvas contract address.

Each canvas holds the ETH contributed by players, and the creator of the canvas can set a custom recipient to claim the accumulated funds. This means the project not only fuels collaborative art but also serves as a gamified form of crowdfunding, with creators benefiting from user contributions.

To maximize inclusivity and engagement, _sendPixel is deployed across multiple blockchain networks, allowing users to select their preferred chain. This deployment encourages healthy competition among various Layer 2 solutions, contributing to a dynamic and diverse ecosystem. 🌐🚀

Future Improvements & Use Cases

• Enhanced Encoding Efficiency: While our current method is significantly more efficient than existing storage models, it relies on a straightforward approach of concatenating decimal values of rgbxy due to time constraints. Future updates will optimize this with bit packing for better performance and gas savings.

• Introduce NFT minting for completed canvases, which can be listed on marketplaces. Proceeds from NFT sales would be distributed among the contributors based on their participation in creating the canvas.

• Implement a profit-sharing model where contributors earn a share of the sales revenue proportional to their contribution.

• Explore game modes such as first-come, first-serve, where each pixel can only be colored once. It all depends on you, the app developer, the protocol is the same.

• Introduce 3D plane models by adding a z value to the encoding, enabling more complex and immersive designs.

Frontend: We built the frontend using React with Wagmi to enable smooth wallet and contract interactions.

Backend: We used Express.js with MongoDB, Mongoose, and Viem for direct contract interactions. MongoDB helps reduce the number of blockchain node requests by serving data directly from the database.

Process Overview:

• The CanvasDeployer contract is deployed on each chain using Forge or Remix.
• Users interact with this contract to create canvases, specifying parameters like canvas name, dimensions, funding recipient, and preferred chains. Each canvas is an individual contract deployed by CanvasDeployer, with a function to accept Ether and emit a PixelRegistered event:

  // Function to accept Ether and emit the PixelRegistered event
  receive() external payable {
      emit PixelRegistered(msg.value, msg.sender, address(this));
  }
  

Backend Workflow:

• A dynamic watcher is set up for each CanvasDeployer, which creates watchers for each newly deployed canvas contract. This setup listens for pixel events and stores them in the corresponding chain's canvas.
• The project follows the MVC model. A blockSyncService keeps data synchronized when the server is down. Event handling is managed by eventService, contract watching is done through watcherService, and all canvas-related operations use canvasService.
• Beneficiaries can claim accumulated tokens after 6 hours (currently) by calling canvasService.transferFunds(data).

Overview of registerPixel Function

The registerPixel function validates and decodes ETH amounts to determine pixel position and RGB color for canvas interactions. It performs the following tasks:

1. Dimension Calculations:

   • Calculates the number of digits needed for x and y coordinates based on canvas dimensions.
   • Checks that the amount has enough digits to decode x, y, and RGB values (xDigits + yDigits + 9).

2. Coordinate Extraction:

   • Extracts x and y from the end of the amount string.
   • Verifies that x and y are within canvas bounds.

3. RGB Extraction:

   • Extracts RGB values (last 9 digits before coordinates) and validates they are in the 0-255 range.

4. Pixel Creation:

   • Constructs a unique pixelId using canvasId, x, and y.
   • Checks if a pixel already exists at the given coordinates. If not, it adds the new pixel with the sender and color data.

User Experience: To improve user accessibility and onboarding, we integrated Web3Auth and Privy for social logins, enabling seamless Web2-to-Web3 entry. To ensure canvases are created by real people and not bots, we implemented World ID for human verification.

We deployed CanvasDeployers capable of deploying CanvasContracts to Base Sepolia, Linea Sepolia, Morph Holesky, Scroll Sepolia, Ethereum Sepolia, and Ethereum Holesky. Additionally, we enabled gas price displays to promote healthy competition within the Ethereum ecosystem.

The CanvasDeployer contract addresses: Holesky: https://eth-holesky.blockscout.com/address/0x625eBBBcB0d13a241BF2E8a6a773462193Fa0f4d Sepolia: https://eth-sepolia.blockscout.com/address/0xE53bBe636435402a77a485098a43797894156dA4 Base: https://base-sepolia.blockscout.com/address/0x155bC4207709A0A7BFbDDD47C260B3f40aFD464c Linea: https://explorer.sepolia.linea.build/address/0x2CdD0E57D3609Dc93047794409Ab2f9aAAfA4E4D Scroll: https://sepolia.scrollscan.com/address/0x2CdD0E57D3609Dc93047794409Ab2f9aAAfA4E4D Morph: https://explorer-holesky.morphl2.io/address/0x155bC4207709A0A7BFbDDD47C260B3f40aFD464c

The CanvasDeployer contract addresses: Holesky: https://eth-holesky.blockscout.com/address/0x5a98FDE9E501E2288f0B61eC5eB5Aab24Cc61Ec9?tab=txs Sepolia: https://eth-sepolia.blockscout.com/address/0xE8899Dc1c3af11778FcbaA8EBadb5143539a1B65 Base: https://base-sepolia.blockscout.com/address/0xCe72CF93667Ba644c5C559b21F0d803b419f0B8f Scroll: https://sepolia.scrollscan.com/address/0x11276e5dBf136194E28f9f3f111FA33294ff151c Morph: https://explorer-holesky.morphl2.io/address/0xb2111400c7B8097094CaD6e613D8Ca0462B83B93