3d mosaic, with any image from your computer

Developer
Martin Grand
Size
12,990 Kb
Views
38,456
  1. 3d mosaic, with any image from your computer Previews
  2. 3d mosaic, with any image from your computer HTML Codes
  3. 3d mosaic, with any image from your computer CSS Codes
  4. 3d mosaic, with any image from your computer JS Codes

How do I make an 3d mosaic, with any image from your computer?

Drop an image, and use the mouse (drag like google maps) to view around the 3d space, what you will get. Use mousewheel to zoom in / out. Click to home button (right, top) to animate back.. What is a 3d mosaic, with any image from your computer? How do you make a 3d mosaic, with any image from your computer? This script and codes were developed by Martin Grand on 11 August 2022, Thursday.

3d mosaic, with any image from your computer Previews
IQ Test

3d mosaic, with any image from your computer - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>3d mosaic, with any image from your computer</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ /* reset */	html, body { width:100%; height:100% }	html, body, div, span, applet, object, iframe,	h1, h2, h3, h4, h5, h6, p, blockquote, pre,	a, abbr, acronym, address, big, cite, code,	del, dfn, em, img, ins, kbd, q, s, samp,	small, strike, strong, sub, sup, tt, var,	b, u, i, center,	dl, dt, dd, ol, ul, li,	fieldset, form, label, legend,	table, caption, tbody, tfoot, thead, tr, th, td,	article, aside, canvas, details, embed,	figure, figcaption, footer, header, hgroup,	menu, nav, output, ruby, section, summary,	time, mark, audio, video {	margin: 0;	padding: 0;	border: 0;	font-size: 100%;	font: inherit;	vertical-align: baseline; }	article, aside, details, figcaption, figure,	footer, header, hgroup, menu, nav, section { display: block; }	body { line-height: 1; }	ol, ul { list-style: none; }	blockquote, q { quotes: none; }	blockquote:before, blockquote:after,	q:before, q:after {	content: '';	content: none; }	table {	border-collapse: collapse;	border-spacing: 0; }	a:focus,	input:focus,	textarea:focus { outline:none; }
/* /reset */
body{ font-family:Tahoma, Geneva, sans-serif; -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; background: #cecece; background: linear-gradient(to bottom, #FFF 0%, #cecece 100%);
}
#img { position:absolute; left:50%; top:50%; box-shadow:0 0 90px rgba(0,0,0,0.5);	opacity:0;	-webkit-transition:opacity 1s ease;
}
#help,
#help2{	display:none;
}
#drop { position:absolute; bottom:10px; top:10px; left:10px; right:10px; background:#efefef; border:1px dashed #ccc; border-radius:4px; box-shadow: inset 0 0 0 3px #FFF, inset 0 0 100px 5px #dedede, 0 0 40px rgba(0,0,0,0.2); z-index:1;
}
body.loaded #drop { display:none; }
body.loaded #img { opacity:1; }
#drop.dropped { border:1px dashed #787878;
}
#drop.over { background:#fff; border:1px dashed #6C0;
}
#drop.over:after {	color:#dedede;
}
#drop:after { display:block; position:absolute; left:50%; top:50%; width:320px; height:30px; margin:-15px 0 0 -160px; content:'Drop an image here!'; text-shadow:1px 1px 0 #FFF; text-align:center; font-size:18px; line-height:30px; color:#787878;
}
#drop.dropped:after { content:''; background:url(data:image/gif;base64,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) 50% 50% no-repeat;
}
#drop.noimage:after { margin-top:-30px; content:'This is not an image file, please drop an image here!';
}
#space {	-webkit-perspective: 600px;	-webkit-perspective-origin: 50% 50%;	-webkit-transform-style: preserve-3d;	position: absolute; overflow: hidden;	left: 0;	right: 0;	top: 0;	bottom: 0; cursor: url(data:text/plain;base64,AAACAAEAICACAAcABQAwAQAAFgAAACgAAAAgAAAAQAAAAAEAAQAAAAAAAAEAAAAAAAAAAAAAAgAAAAAAAAAAAAAA////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD8AAAA/AAAAfwAAAP+AAAH/gAAB/8AAA//AAAd/wAAGf+AAAH9gAADbYAAA2yAAAZsAAAGbAAAAGAAAAAAAAA//////////////////////////////////////////////////////////////////////////////////////gH///4B///8Af//+AD///AA///wAH//4AB//8AAf//AAD//5AA///gAP//4AD//8AF///AB///5A////5///8=) 4 4, move;
}
body.c-drag #space { cursor: url(data:text/plain;base64,AAACAAEAICACAAcABQAwAQAAFgAAACgAAAAgAAAAQAAAAAEAAQAAAAAAAAEAAAAAAAAAAAAAAgAAAAAAAAAAAAAA////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD8AAAA/AAAAfwAAAP+AAAH/gAAB/8AAAH/AAAB/wAAA/0AAANsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//////////////////////////////////////////////////////////////////////////////////////gH///4B///8Af//+AD///AA///wAH//+AB///wAf//4AH//+AD///yT/////////////////////////////8=) 4 4, move;
}
#space .rotate,
#space .move,
#space .move-origin {	-webkit-transform-style: preserve-3d;	position: absolute;	left: 0;	right: 0;	top: 0;	bottom: 0;
}
#space .rotate {	-webkit-transform: rotateX(0deg);
}
.place {	position: absolute;	left: 50%;	top: 50%;	opacity:0;	-webkit-transition:opacity 1s ease;	-webkit-transform-style: preserve-3d;
}
.place span {	display: block;	position: absolute;	background: #FFF;	-webkit-transition:-webkit-transform 0.5s ease; -webkit-transform-origin:left top; background-image: -webkit-canvas(mosaic_bg);
}
.home { position: absolute; right:20px; top:20px;
}
.home a { display:block; width: 42px; height: 42px; background: #cdcdcd; border-radius: 100%; cursor:pointer; box-shadow:0 0 0 2px rgba(0,0,0,0.33);	-webkit-transition:background 0.5s ease;
}
.home a:hover { background: rgba(255,255,255,0.1);
}
.home:before,
.home:after,
.home a:before,
.home a:after { content: ''; position: absolute; top: 50%; left: 0;	-webkit-transition:border-color 0.5s ease;
}
.home a:before { left:7px; border-style:solid; border-color:transparent; border-width:16px 14px; border-bottom-color:#FFF; margin-top:-32px; background:transparent;
}
.home a:after { left:11px; width:4px; height:8px; border-style:solid; border-color:#FFF #FFF transparent; border-width:6px 8px 0; margin-top:0; background:transparent;
}
.home a:hover:before,
.home a:focus:before,
.home a:active:before { border-bottom-color:#cdcdcd; background:transparent;
}
.home a:hover:after,
.home a:focus:after,
.home a:active:after { border-color:#cdcdcd #cdcdc0 transparent;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <body class="inited">	<style id="stylesheet"></style> <div id="drop"></div> <canvas id="img"></canvas> <canvas id="help"></canvas><canvas id="help2"></canvas>
</body> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

3d mosaic, with any image from your computer - Script Codes CSS Codes

/* reset */	html, body { width:100%; height:100% }	html, body, div, span, applet, object, iframe,	h1, h2, h3, h4, h5, h6, p, blockquote, pre,	a, abbr, acronym, address, big, cite, code,	del, dfn, em, img, ins, kbd, q, s, samp,	small, strike, strong, sub, sup, tt, var,	b, u, i, center,	dl, dt, dd, ol, ul, li,	fieldset, form, label, legend,	table, caption, tbody, tfoot, thead, tr, th, td,	article, aside, canvas, details, embed,	figure, figcaption, footer, header, hgroup,	menu, nav, output, ruby, section, summary,	time, mark, audio, video {	margin: 0;	padding: 0;	border: 0;	font-size: 100%;	font: inherit;	vertical-align: baseline; }	article, aside, details, figcaption, figure,	footer, header, hgroup, menu, nav, section { display: block; }	body { line-height: 1; }	ol, ul { list-style: none; }	blockquote, q { quotes: none; }	blockquote:before, blockquote:after,	q:before, q:after {	content: '';	content: none; }	table {	border-collapse: collapse;	border-spacing: 0; }	a:focus,	input:focus,	textarea:focus { outline:none; }
/* /reset */
body{ font-family:Tahoma, Geneva, sans-serif; -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; background: #cecece; background: linear-gradient(to bottom, #FFF 0%, #cecece 100%);
}
#img { position:absolute; left:50%; top:50%; box-shadow:0 0 90px rgba(0,0,0,0.5);	opacity:0;	-webkit-transition:opacity 1s ease;
}
#help,
#help2{	display:none;
}
#drop { position:absolute; bottom:10px; top:10px; left:10px; right:10px; background:#efefef; border:1px dashed #ccc; border-radius:4px; box-shadow: inset 0 0 0 3px #FFF, inset 0 0 100px 5px #dedede, 0 0 40px rgba(0,0,0,0.2); z-index:1;
}
body.loaded #drop { display:none; }
body.loaded #img { opacity:1; }
#drop.dropped { border:1px dashed #787878;
}
#drop.over { background:#fff; border:1px dashed #6C0;
}
#drop.over:after {	color:#dedede;
}
#drop:after { display:block; position:absolute; left:50%; top:50%; width:320px; height:30px; margin:-15px 0 0 -160px; content:'Drop an image here!'; text-shadow:1px 1px 0 #FFF; text-align:center; font-size:18px; line-height:30px; color:#787878;
}
#drop.dropped:after { content:''; background:url(data:image/gif;base64,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) 50% 50% no-repeat;
}
#drop.noimage:after { margin-top:-30px; content:'This is not an image file, please drop an image here!';
}
#space {	-webkit-perspective: 600px;	-webkit-perspective-origin: 50% 50%;	-webkit-transform-style: preserve-3d;	position: absolute; overflow: hidden;	left: 0;	right: 0;	top: 0;	bottom: 0; cursor: url(data:text/plain;base64,AAACAAEAICACAAcABQAwAQAAFgAAACgAAAAgAAAAQAAAAAEAAQAAAAAAAAEAAAAAAAAAAAAAAgAAAAAAAAAAAAAA////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD8AAAA/AAAAfwAAAP+AAAH/gAAB/8AAA//AAAd/wAAGf+AAAH9gAADbYAAA2yAAAZsAAAGbAAAAGAAAAAAAAA//////////////////////////////////////////////////////////////////////////////////////gH///4B///8Af//+AD///AA///wAH//4AB//8AAf//AAD//5AA///gAP//4AD//8AF///AB///5A////5///8=) 4 4, move;
}
body.c-drag #space { cursor: url(data:text/plain;base64,AAACAAEAICACAAcABQAwAQAAFgAAACgAAAAgAAAAQAAAAAEAAQAAAAAAAAEAAAAAAAAAAAAAAgAAAAAAAAAAAAAA////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD8AAAA/AAAAfwAAAP+AAAH/gAAB/8AAAH/AAAB/wAAA/0AAANsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//////////////////////////////////////////////////////////////////////////////////////gH///4B///8Af//+AD///AA///wAH//+AB///wAf//4AH//+AD///yT/////////////////////////////8=) 4 4, move;
}
#space .rotate,
#space .move,
#space .move-origin {	-webkit-transform-style: preserve-3d;	position: absolute;	left: 0;	right: 0;	top: 0;	bottom: 0;
}
#space .rotate {	-webkit-transform: rotateX(0deg);
}
.place {	position: absolute;	left: 50%;	top: 50%;	opacity:0;	-webkit-transition:opacity 1s ease;	-webkit-transform-style: preserve-3d;
}
.place span {	display: block;	position: absolute;	background: #FFF;	-webkit-transition:-webkit-transform 0.5s ease; -webkit-transform-origin:left top; background-image: -webkit-canvas(mosaic_bg);
}
.home { position: absolute; right:20px; top:20px;
}
.home a { display:block; width: 42px; height: 42px; background: #cdcdcd; border-radius: 100%; cursor:pointer; box-shadow:0 0 0 2px rgba(0,0,0,0.33);	-webkit-transition:background 0.5s ease;
}
.home a:hover { background: rgba(255,255,255,0.1);
}
.home:before,
.home:after,
.home a:before,
.home a:after { content: ''; position: absolute; top: 50%; left: 0;	-webkit-transition:border-color 0.5s ease;
}
.home a:before { left:7px; border-style:solid; border-color:transparent; border-width:16px 14px; border-bottom-color:#FFF; margin-top:-32px; background:transparent;
}
.home a:after { left:11px; width:4px; height:8px; border-style:solid; border-color:#FFF #FFF transparent; border-width:6px 8px 0; margin-top:0; background:transparent;
}
.home a:hover:before,
.home a:focus:before,
.home a:active:before { border-bottom-color:#cdcdcd; background:transparent;
}
.home a:hover:after,
.home a:focus:after,
.home a:active:after { border-color:#cdcdcd #cdcdc0 transparent;
}

3d mosaic, with any image from your computer - Script Codes JS Codes

var Site = { fallback : false, canvas : {}, ctx : {}, canvasHelp : {}, ctxHelp : {}, canvasHelp2 : {}, ctxHelp2 : {}, ctxHelp3 : {}, rotateStart : {x:0, y:0}, rotatePos : {x:0, y:0, ax:0, ay:0}, prefix : '', lightMax : 0, darkMax : 255, settings : { perspective : 600,	grid : 15,	maxWidth : 600,	maxHeight : 400,	rotateIntensitiy : 10, zoomLevel : 40, lighterBg : false,	zIntensity : 10, goHomeTime : 4	}, init: function () { if (window.File && window.FileList && window.FileReader) { Site.amorphizr(); Site.attachr(); Site.canvas = $('#img')[0]; Site.ctx = Site.canvas.getContext('2d'); Site.canvasHelp = $('#help')[0]; Site.canvasHelp2 = $('#help2')[0]; Site.ctxHelp = Site.canvasHelp.getContext('2d'); Site.ctxHelp2 = Site.canvasHelp2.getContext('2d'); Site.ctxHelp3 =/* document.getCSSCanvasContext('2d', 'mosaic_bg', Site.settings.maxWidth, Site.settings.maxHeight);*/	Site.css();	} else { site.fallback = true; } }, amorphizr: function () { $('#stylesheet').append('#space{' + Site.prefix + 'perspective:' + Site.settings.perspective + 'px;}'); $('#stylesheet').append( 'body.reset-home .move,' + 'body.reset-home .move-origin,' + 'body.reset-home .rotate {' + Site.prefix + 'transition:' + Site.prefix + 'transform ' + Site.settings.goHomeTime + 's ease;}'); }, attachr: function () { $('#drop') .on('dragover dragenter', function (e) { e.preventDefault(); e.stopPropagation(); $(this).attr('class', 'over'); })	.on('dragleave', function (e) { e.preventDefault(); e.stopPropagation(); $(this).attr('class', ''); }) .on('drop', function (e) { e.preventDefault(); e.stopPropagation(); $(this).attr('class', 'dropped'); var files = e.originalEvent.dataTransfer.files || e.originalEvent.dataTransfer.files; if(files.length > 0) { Site.upload(files[0]); } else { $('#drop').attr('class', 'noimage'); } }); }, upload: function (file) { var reader = new FileReader(); reader.onload = function (e) { var img = new Image(); img.onload = function () { var MAX_WIDTH = Site.settings.maxWidth; var MAX_HEIGHT = Site.settings.maxHeight;	var GRID = Site.settings.grid; var width, owidth, height, oheight; width = img.width; height = img.height; if (width > height) { if (width > MAX_WIDTH) { height *= MAX_WIDTH / width; width = MAX_WIDTH; } } else { if (height > MAX_HEIGHT) { width *= MAX_HEIGHT / height; height = MAX_HEIGHT; } } owidth = width; oheight = height; width = Math.floor(width/GRID) * GRID; height = Math.floor(height/GRID) * GRID; Site.canvas.width = width; Site.canvas.height = height; Site.canvasHelp.width = width/GRID; Site.canvasHelp.height = height/GRID; Site.canvasHelp2.width = (width/GRID)*2; Site.canvasHelp2.height = (height/GRID); var ix = Math.round(((owidth-width)*(img.width/width))/2); var iy = Math.round(((oheight-height)*(img.height/height))/2); var iw = img.width - (ix*2); var ih = img.height - (iy*2); Site.ctx.drawImage(img, ix, iy, iw, ih, 0, 0, width, height); Site.ctxHelp.drawImage(img, ix, iy, iw, ih, 0, 0, width/GRID, height/GRID); Site.ctxHelp2.drawImage(img, ix, iy, iw, ih, 0, 0, (width/GRID)*2, (height/GRID)); Site.loadedImage(); }	img.onerror = function(e) { $('#drop').attr('class', 'noimage');	}; img.src = e.target.result; } reader.readAsDataURL(file); }, loadedImage : function () { $('#img').css({ 'margin-left' : -$('#img').width()/2, 'margin-top' : -$('#img').height()/2, })	$('body').attr('class', 'loaded'); Site.drawGrid(); }, drawGrid : function() { var pd = 0.5;	var GRID = Site.settings.grid; for(var i = 0; i< Site.canvas.width/GRID; i++) { Site.ctx.moveTo(i*GRID+pd, 0+pd); Site.ctx.lineTo(i*GRID+pd, Site.canvas.height+pd); } for(var i = 0; i< Site.canvas.height/GRID; i++) { Site.ctx.moveTo(0+pd, i*GRID+pd); Site.ctx.lineTo(Site.canvas.width+pd, i*GRID+pd); } Site.ctx.lineWidth = 1; Site.ctx.strokeStyle = "rgba(127,127,127,0.3)"; Site.ctx.stroke();	setTimeout(Site.calculateColors, 1); }, calculateColors : function () {	var GRID = Site.settings.grid;	var $img = $('#img');	var $help = $('#help');	var $place = $('<div class="place" />'); var corner = [0,0];	$place.css({	width	: $img.width(),	height	: $img.height(),	margin	: $img.css('margin')	});	for (var x = 0; x < $help.width(); x++) {	for (var y = 0; y < $help.height(); y++) { var $elem = $('<span />');	var d = Site.ctxHelp.getImageData(x, y, 1, 1).data;	var rgb = 'rgb(' + d[0] + ',' + d[1] + ',' + d[2] + ')'; var transform = 'translate3d(' + x * GRID + 'px,' + y * GRID + 'px,0)'; var lightness = Site.getLightness(d[0], d[1], d[2]); $elem .data('z', lightness) .data('left', x*GRID).data('top', y*GRID) .attr('style', Site.prefix + 'transform:' + transform + ';background-color:' + rgb); if (lightness > Site.lightMax) Site.lightMax = lightness; if (lightness < Site.darkMax) Site.darkMax = lightness; if (d[3] < 255 && d[3] > 0) $elem.css('opacity', d[3]/255);	if (d[3] > 0) $elem.appendTo($place); if (x == 0 && (y == 0 || y == $help.width()-1)) { corner[0] += Site.getLightness(d[0], d[1], d[2]); } else if (x == $help.height()-1 && (y == 0 || y == $help.width()-1)) { corner[1] += Site.getLightness(d[0], d[1], d[2]); } // for mosaic color profiles: var ax = x*2;	var c1 = Site.ctxHelp2.getImageData(ax, y, 1, 1).data;	var c2 = Site.ctxHelp2.getImageData(ax+1, y, 1, 1).data; Site.addColorProfile(rgbToHex(c1[0],c1[1],c1[2]),rgbToHex(c2[0],c2[1],c2[2]),x,y);	}	} Site.settings.lighterBg = !!(corner[0] <= corner[1]);	var $space = $('<div id="space" />');	var $moveOrigin = $('<div class="move-origin" />');	var $rotate = $('<div class="rotate" />');	$space.append($('<div class="move" />').append($rotate.append($moveOrigin)));	$place.appendTo($moveOrigin);	$space.insertAfter($img); $('<div class="home"><a>&nbsp;</a></div>').insertAfter($space);	setTimeout(function(){	$place.css('opacity',1);	setTimeout(function(){	$img.css('opacity',0);	Site.put3d(); setTimeout(Site.addMosaic, 1);	}, 1);	}, 1); },	put3d : function(){ var alphaX = Math.atan((Site.canvas.width/2) / Site.settings.perspective); var alphaY = Math.atan((Site.canvas.height/2) / Site.settings.perspective); var tanaX = Math.tan(alphaX); var tanaY = Math.tan(alphaY); var zXor = 255 / (Site.lightMax-Site.darkMax); var w = Site.canvas.width; var h = Site.canvas.height;	$('.place span').each(function(i,el){ var z = (parseInt($(el).data('z')) - Site.darkMax) * zXor; var l = parseInt($(el).data('left')); var t = parseInt($(el).data('top')); if(!Site.settings.lighterBg) { z = 255-z }	z *= Site.settings.zIntensity; var difX = tanaX * z; var difY = tanaY * z; var ratioW = (w + (difX*2)) / w; var ratioH = (h + (difY*2)) / h; var fix = 1; l = (l*ratioW) - difX; t = (t*ratioH) - difY;	var transform = 'translate3d(' + l + 'px,' + t + 'px,' + (-z) + 'px) scale(' + ratioW + ',' + ratioH + ')';	$(el).attr('style', Site.prefix + 'transform:'+transform+ ';background-color:' + $(el).css('background-color') + ';background-position:-' + $(el).data('left') + 'px -' + $(el).data('top') + 'px');	});	$('body').addClass('inspace'); Site.rotateAttach(); Site.setZOriginDepth(5);	},	css : function() {	var GRID = Site.settings.grid;	$('#stylesheet').append('.place span{width:' + GRID + 'px;height:' + GRID + 'px;}');	}, rotateAttach : function () { $('#space').on('mousedown', function(e){ if(!$('body').hasClass('reset-home')) { $('body').addClass('c-drag'); Site.rotateStart.x = e.pageX; Site.rotateStart.y = e.pageY; $(this).on('mousemove', Site.onRotate); } }).on('mouseup mouseleave', function(e){ if(!$('body').hasClass('reset-home')) { $('body').removeClass('c-drag'); $(this).off('mousemove', Site.onRotate); Site.rotatePos.x = Site.rotatePos.ax; Site.rotatePos.y = Site.rotatePos.ay; } }).on('mousewheel', Site.onZoom); $('.home a').on('click', function(){ $('body').addClass('reset-home'); setTimeout(function(){ $('#space .rotate').attr('style', Site.prefix + 'transform:rotateY(0deg) rotateX(0deg);'); $('#space .move').attr('style', Site.prefix + 'transform:translateZ(' + $('#space .move').data('init-z') + 'px);').data('z', $('#space .move').data('init-z')); $('#space .move-origin').attr( 'style', Site.prefix + 'transform:translateZ(' + $('#space .move-origin').data('init-z') + 'px);') .data('z', $('#space .move-origin').data('init-z')); Site.rotatePos.x = 0; Site.rotatePos.y = 0; setTimeout(function(){ $('body').removeClass('reset-home'); }, Site.settings.goHomeTime*1000); }, 1); }); }, onRotate : function(e){ if(!$('body').hasClass('reset-home')) { var x = e.pageX - Site.rotateStart.x; var y = Site.rotateStart.y - e.pageY; var rx = Site.rotatePos.x + (x/Site.settings.rotateIntensitiy); var ry = Site.rotatePos.y + (y/Site.settings.rotateIntensitiy); Site.rotatePos.ax = rx; Site.rotatePos.ay = ry; $('#space .rotate').attr('style', Site.prefix + 'transform:rotateY(' + rx + 'deg) rotateX(' + ry + 'deg);'); } }, onZoom : function (e) { if(!$('body').hasClass('reset-home')) { var delta = e.originalEvent.wheelDelta || -e.originalEvent.detail; var $mover = $('#space .move'); if (typeof $mover.data('z') == 'undefined') { $mover.data('z', 0); } var distance = $mover.data('z') + ((delta > 0 ? 1 : -1)*Site.settings.zoomLevel); $mover.data('z', distance); $mover.attr('style', Site.prefix + 'transform:translateZ(' + distance + 'px);'); } }, getLightness : function (r, g, b) { return (0.299*parseInt(r) + 0.587*parseInt(g) + 0.114*parseInt(b)); }, setZOriginDepth : function(prec){ var $mover = $('#space .move'); var $originMover = $('#space .move .move-origin'); var dataZ = $mover.data('z'); if (typeof dataZ == 'undefined') { $mover.data('z', 0); dataZ = 0; } dataZ = parseInt(dataZ); var distance = ((255 * Site.settings.zIntensity) / 100) * prec; $mover.data('z', dataZ + distance); $mover.attr('style', Site.prefix + 'transform:translateZ(' + (dataZ + distance) + 'px);').data('init-z', (dataZ + distance)); $originMover.attr( 'style', Site.prefix + 'transform:translateZ(' + (-distance) + 'px);').data('init-z', (-distance)); }, colorObj : {}, addColorProfile : function (c1,c2,x,y) { var id = (parseInt(c1, 16) > parseInt(c2, 16)) ? c1 + ':' + c2 : c2 + ':' + c1; if (c1 == c2) { id = c1; } if(typeof Site.colorObj[id] == 'undefined') { Site.colorObj[id] = [] } Site.colorObj[id].push({'x':x, 'y':y}); }, addMosaic : function () { /*Site.canvasHelp3.width = $('#space .place').width(); Site.canvasHelp3.height = $('#space .place').height(); console.log(Site.colorObj);*/ /* $.ajax({ type : 'POST', url : 'api.php', dataType : 'json', data : {'data' : JSON.stringify(Site.colorObj)}, success : function(data){ console.log(data); Site.drawMosaic(data); }, erorr : function(a,b,c) { console.error(a,b,c); } });*/ }, drawMosaic : function (data) { for (i in data) { for (j in data[i].src) { Site.drawAndPutImg(data[i]['src'][j], data[i]['coordinates'][j]['x'], data[i]['coordinates'][j]['y']); } } }, drawAndPutImg : function(_src, _x, _y) { var img = new Image(); img.onload = function (x, y) { var timer; timer = setInterval(function(img, x, y) { if (img.width > 0 && img.height > 0) { var GRID = Site.settings.grid; var width = img.width; var height = img.height; var ix,iy,iw,ih; if (width > height) { ix = (width - height) / 2; iy = 0; iw = ih = height; } else { if (width < height) { iy = (height - width) / 2; ix = 0; iw = ih = width; } else { ix = iy = 0; iw = ih = width; } } //console.log(img, iy, iy, iw, ih, (x*GRID), (y*GRID), GRID, GRID); Site.ctxHelp3.drawImage(img, iy, iy, iw, ih, (x*GRID), (y*GRID), GRID, GRID); clearInterval(timer); } }, 10, img, x, y, timer); }(parseInt(_x), parseInt(_y)); img.onerror = function(e) { //img.src = 'img.php?v=' + Math.random() + '&img=' + img.src.split('img=')[1]; } img.src = 'img.php?img=' + _src; }
}
$(document).ready(Site.init);
function rgbToHex(r, g, b) { return componentToHex(r) + componentToHex(g) + componentToHex(b);
}
function componentToHex(c) { var hex = c.toString(16); return hex.length == 1 ? "0" + hex : hex;
}
3d mosaic, with any image from your computer - Script Codes
3d mosaic, with any image from your computer - Script Codes
Home Page Home
Developer Martin Grand
Username martingrand
Uploaded August 11, 2022
Rating 3
Size 12,990 Kb
Views 38,456
Do you need developer help for 3d mosaic, with any image from your computer?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Martin Grand (martingrand) Script Codes
Name
Pure css rain
Switch
Pure css christmas tree
Clock
BEM class name preprocess
Birthday Cake
Pure css loader
Glitch animation generator
Seconds counter
Animated captcha concept
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!