0x18b75119…b783sent to0x7c3ea2b7…0b18·#20,678,502·view on Etherscan
let BASE_URL = "https://pinata.brightmoments.io/ipfs";
let CID = "QmaHrqnoqGnkyHzkrku6mjS2gpGQorRfzP9HawHgwHtuE6";
let TOTAL_IMAGES = 100;
const SEED = 29614578;
const fileType=".png";
const pinataGatewayToken= "y2RzmHlL19ONzg0XSiSssf0oiTUA9LEeTyMuds3Jq8KH103TdGHPLW929XibZCrs";
function mulberry32(SEED) {
let state = SEED;
return function() {
state |= 0;
state = (state + 0x6D2B79F5) | 0;
let t = Math.imul(state ^ (state >>> 15), 1 | state);
t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
};
}
function fisherYatesShuffle(SEED, array) {
let currentIndex = array.length;
let temporaryValue, randomIndex;
const rng = mulberry32(SEED);
while (currentIndex !== 0) {
randomIndex = Math.floor(rng() * currentIndex);
currentIndex -= 1;
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
}
function generateIndices(SEED, TOTAL_IMAGES) {
const array = Array.from({ length: TOTAL_IMAGES }, (_, i) => i);
return fisherYatesShuffle(SEED, array);
}
function selectImage(tokenId, TOTAL_IMAGES) {
const indices = generateIndices(SEED, TOTAL_IMAGES);
const selection = indices[Number(tokenId % parseInt(TOTAL_IMAGES))];
return selection;
}
let tokenId = parseInt(tokenData.tokenId, 10);
const selectedImage = selectImage(tokenId, TOTAL_IMAGES);
function createLoadingSVG() {
const svgNS = "http://www.w3.org/2000/svg";
const svg = document.createElementNS(svgNS, "svg");
svg.setAttributeNS(null, "viewBox", "0 0 122.14 122.14");
svg.setAttributeNS(null, "id", "Layer_1");
svg.setAttributeNS(null, "data-name", "Layer 1");
const path = document.createElementNS(svgNS, "path");
path.setAttributeNS(null, "d", "m0,122.14c67.46,0,122.14-54.69,122.14-122.14C54.69,0,0,54.69,0,122.14Zm86.37-35.78h-50.59v-50.59s50.59,0,50.59,0v50.59Z");
path.setAttributeNS(null, "style", "fill: #231f20; stroke-width: 0px;");
svg.appendChild(path);
svg.style.position = "absolute";
svg.style.top = "50%";
svg.style.left = "50%";
svg.style.transform = "translate(-50%, -50%) scale(0.5)"; // Apply scale transformation
svg.style.transformOrigin = "center center"; // Ensure scaling happens from the center
document.body.appendChild(svg);
return svg;
}
// Function to remove SVG
function removeLoadingSVG(svg) {
if (svg && svg.parentNode) {
svg.parentNode.removeChild(svg);
}
}
// Canvas setup
const canvas = document.createElement('canvas');
document.body.appendChild(canvas);
const ctx = canvas.getContext('2d');
// Load image
function cropImageTop(img, cropTopPercent, callback) {
const tempCanvas = document.createElement('canvas');
const tempCtx = tempCanvas.getContext('2d');
tempCanvas.width = img.width;
// Calculate the new height after cropping
const cropHeight = img.height * (1 - cropTopPercent);
tempCanvas.height = cropHeight;
// Draw the original image cropped
tempCtx.drawImage(img, 0, -img.height * cropTopPercent, img.width, img.height);
// Create a new Image object for the cropped image
const croppedImg = new Image();
croppedImg.crossOrigin = "anonymous"; // Ensure CORS is handled for new image as well
croppedImg.onload = function() {
callback(croppedImg); // Use the cropped image in the callback
};
croppedImg.src = tempCanvas.toDataURL();
}
let img = new Image();
img.onload = function() {
cropImageTop(img, 0.00056, function(croppedImg) {
removeLoadingSVG(loadingSVG); // Remove SVG when image is loaded
img = croppedImg; // Use the cropped image for further operations
resizeAndDrawImage();
});
};
// Add loading SVG before image load
let loadingSVG = createLoadingSVG();
img.crossOrigin = "anonymous";
img.src = `${BASE_URL}/${CID}/${selectedImage}${fileType}/?pinataGatewayToken=${pinataGatewayToken}`;
console.log(`selectedImage: ${selectedImage}`);
console.log(img.src);
function resizeAndDrawImage() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
let imgAspectRatio = img.width / img.height;
let newWidth = canvas.width;
let newHeight = newWidth / imgAspectRatio;
if (newHeight > canvas.height) {
newHeight = canvas.height;
newWidth = newHeight * imgAspectRatio;
}
let x = (canvas.width - newWidth) / 2;
let y = (canvas.height - newHeight) / 2;
ctx.drawImage(img, x, y, newWidth, newHeight);
}
window.addEventListener('resize', resizeAndDrawImage);