Isometric Text

Developer
Sakri Rosenstrom
Size
8,538 Kb
Views
22,264
  1. Isometric Text Previews
  2. Isometric Text HTML Codes
  3. Isometric Text CSS Codes
  4. Isometric Text JS Codes

How do I make an isometric text?

Type some text, see it rendered in an isometric space. Reads out the pixels of canvas text, then arranges them into isometric cubes.. What is a isometric text? How do you make a isometric text? This script and codes were developed by Sakri Rosenstrom on 13 September 2022, Tuesday.

Isometric Text Previews
IQ Test

Isometric Text - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Isometric Text</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="canvasContainer"></div>
<span id="textInputSpan"> Enter your name (max 6 chars) : <input id="textInput" maxlength="6" type="text" width="150" value="SAKRI" /> <button onclick="changeText()">GO!</button><a id="tweetLink" href="https://twitter.com/sakri/status/454617714435559424" target="_blank">Retweet!</a>
</span> <script src="js/index.js"></script>
</body>
</html>

Isometric Text - Script Codes CSS Codes

html, body{ margin : 0px; width : 100%; height : 100%; overflow: hidden; background-color: #FFFFFF;
}
#canvasContainer{ margin : 0px; width : 100%; height : 100%;
}
#textInputSpan{ position: absolute; font-family: sans-serif;
}
#tweetLink{ margin-left: 10px;
}

Isometric Text - Script Codes JS Codes

(function (window){
var Sakri = window.Sakri || {};
window.Sakri = window.Sakri || Sakri;	Sakri.MathUtil = {};	//used for radiansToDegrees and degreesToRadians	Sakri.MathUtil.PI_180 = Math.PI/180;	Sakri.MathUtil.ONE80_PI = 180/Math.PI;	//precalculations for values of 90, 270 and 360 in radians	Sakri.MathUtil.PI2 = Math.PI*2;	Sakri.MathUtil.HALF_PI = Math.PI/2;	Sakri.MathUtil.PI_AND_HALF = Math.PI+ Math.PI/2;	Sakri.MathUtil.NEGATIVE_HALF_PI = -Math.PI/2; //keep degrees between 0 and 360 Sakri.MathUtil.constrainDegreeTo360 = function(degree){ return (360 + degree % 360) % 360;//hmmm... looks a bit weird?! }; Sakri.MathUtil.constrainRadianTo2PI = function(rad){ return (Sakri.MathUtil.PI2 + rad % Sakri.MathUtil.PI2) % Sakri.MathUtil.PI2;//equally so... }; Sakri.MathUtil.radiansToDegrees = function(rad){ return rad*Sakri.MathUtil.ONE80_PI; }; Sakri.MathUtil.degreesToRadians = function(degree){ return degree * Sakri.MathUtil.PI_180; };	//return number between 1 and 0	Sakri.MathUtil.normalize = function(value, minimum, maximum){	return (value - minimum) / (maximum - minimum);	};	//map normalized number to values	Sakri.MathUtil.interpolate = function(normValue, minimum, maximum){	return minimum + (maximum - minimum) * normValue;	};	//map a value from one set to another	Sakri.MathUtil.map = function(value, min1, max1, min2, max2){	return Sakri.MathUtil.interpolate( Sakri.MathUtil.normalize(value, min1, max1), min2, max2);	}; Sakri.MathUtil.clamp = function(min,max,value){ if(value < min){ return min; } if(value > max){ return max; } return value; };
}(window));
//has a dependency on Sakri.MathUtil
(function (window){ var Sakri = window.Sakri || {}; window.Sakri = window.Sakri || Sakri;	Sakri.Geom = {}; //================================================== //=====================::POINT::==================== //================================================== Sakri.Geom.Point = function (x,y){ this.x = isNaN(x) ? 0 : x; this.y = isNaN(y) ? 0 : y; }; Sakri.Geom.Point.prototype.clone = function(){ return new Sakri.Geom.Point(this.x,this.y); }; Sakri.Geom.Point.prototype.update = function(x, y){ this.x = isNaN(x) ? this.x : x; this.y = isNaN(y) ? this.y : y; }; Sakri.Geom.Point.prototype.add = function(x, y){ this.x += isNaN(x) ? 0 : x; this.y += isNaN(y) ? 0 : y; }; Sakri.Geom.Point.prototype.equals = function(point){ return this.x==point.x && this.y==point.y; }; Sakri.Geom.Point.prototype.toString = function(){ return "{x:"+this.x+" , y:"+this.y+"}"; }; Sakri.Geom.Point.interpolate = function(pointA, pointB, normal){ return new Sakri.Geom.Point(Sakri.MathUtil.interpolate(normal, pointA.x, pointB.x) , Sakri.MathUtil.interpolate(normal, pointA.y, pointB.y)); }; Sakri.Geom.Point.distanceBetweenTwoPoints = function( point1, point2 ){ //console.log("Math.pow(point2.x - point1.x,2) : ",Math.pow(point2.x - point1.x,2)); return Math.sqrt( Math.pow(point2.x - point1.x,2) + Math.pow(point2.y - point1.y,2) ); }; Sakri.Geom.Point.angleBetweenTwoPoints = function(p1,p2){ return Math.atan2(p1.y-p2.y, p1.x-p2.x); }; Sakri.Geom.mirrorPointInRectangle = function(point,rect){ return new Sakri.Geom.Point(rect.width-point.x,rect.height-point.y); }; Sakri.Geom.randomizePoint = function(point,randomValue){ return new Sakri.Geom.Point(-randomValue+Math.random()*randomValue+point.x,-randomValue+Math.random()*randomValue+point.y); }; //================================================== //=====================::Point3d::==================== //================================================== Sakri.Geom.Point3d = function (x,y, z){ this.x = isNaN(x) ? 0 : x; this.y = isNaN(y) ? 0 : y; this.z = isNaN(z) ? 0 : z; }; Sakri.Geom.Point3d.prototype.clone = function(){ return new Sakri.Geom.Point3d(this.x, this.y, this.z); }; Sakri.Geom.Point3d.prototype.copyValuesTo = function(point3d){ point3d.x = this.x; point3d.y = this.y; point3d.z = this.z; }; Sakri.Geom.Point3d.prototype.updateValues = function(x,y,z){ this.x = x; this.y = y; this.z = z; }; Sakri.Geom.Point3d.prototype.equals = function(point){ return this.x==point.x && this.y==point.y && this.z==point.z; }; Sakri.Geom.Point3d.prototype.toString = function(){ return "{x:"+this.x+" , y:"+this.y+" , z:"+this.z+"}"; };	//==================================================	//===================::RECTANGLE::==================	//==================================================	Sakri.Geom.Rectangle = function (x, y, width, height){	this.update(x, y, width, height);	};	Sakri.Geom.Rectangle.prototype.update = function(x, y, width, height){	this.x = isNaN(x) ? 0 : x;	this.y = isNaN(y) ? 0 : y;	this.width = isNaN(width) ? 0 : width;	this.height = isNaN(height) ? 0 : height;	}; //TODO : doesn't work Sakri.Geom.Rectangle.prototype.inflate = function(x, y){ this.x -= isNaN(x) ? 0 : x; this.y -= isNaN(y) ? 0 : y; this.width += isNaN(x) ? 0 : x * 2; this.height += isNaN(y) ? 0 : y * 2; };	Sakri.Geom.Rectangle.prototype.updateToRect = function(rect){	this.x = rect.x;	this.y = rect.y;	this.width = rect.width;	this.height = rect.height;	};	Sakri.Geom.Rectangle.prototype.scaleX = function(scaleBy){	this.width *= scaleBy;	};	Sakri.Geom.Rectangle.prototype.scaleY = function(scaleBy){	this.height *= scaleBy;	};	Sakri.Geom.Rectangle.prototype.scale = function(scaleBy){	this.scaleX(scaleBy);	this.scaleY(scaleBy);	};	Sakri.Geom.Rectangle.prototype.getRight = function(){	return this.x + this.width;	};	Sakri.Geom.Rectangle.prototype.getBottom = function(){	return this.y + this.height;	}; Sakri.Geom.Rectangle.prototype.getCenter = function(){ return new Sakri.Geom.Point(this.getCenterX(), this.getCenterY()); }; Sakri.Geom.Rectangle.prototype.getCenterX = function(){ return this.x + this.width/2; }; Sakri.Geom.Rectangle.prototype.getCenterY=function(){ return this.y + this.height/2; }; Sakri.Geom.Rectangle.prototype.containsPoint = function(x, y){ return x >= this.x && y >= this.y && x <= this.getRight() && y <= this.getBottom(); }; Sakri.Geom.Rectangle.prototype.containsRect = function(rect){ return this.containsPoint(rect.x, rect.y) && this.containsPoint(rect.getRight(), rect.getBottom()); };	Sakri.Geom.Rectangle.prototype.isSquare = function(){	return this.width == this.height;	};	Sakri.Geom.Rectangle.prototype.isLandscape = function(){	return this.width > this.height;	};	Sakri.Geom.Rectangle.prototype.isPortrait = function(){	return this.width < this.height;	};	Sakri.Geom.Rectangle.prototype.getSmallerSide = function(){	return Math.min(this.width, this.height);	};	Sakri.Geom.Rectangle.prototype.getBiggerSide = function(){	return Math.max(this.width,this.height);	};	Sakri.Geom.Rectangle.prototype.clone = function(){	return new Sakri.Geom.Rectangle(this.x, this.y, this.width, this.height);	};	Sakri.Geom.Rectangle.prototype.toString = function(){	return "Rectangle{x:"+this.x+" , y:"+this.y+" , width:"+this.width+" , height:"+this.height+"}";	};
}(window));
/** * Created by sakri on 27-1-14. * has a dependecy on Sakri.Geom * has a dependecy on Sakri.BitmapUtil */
(function (window){ var Sakri = window.Sakri || {}; window.Sakri = window.Sakri || Sakri; Sakri.CanvasTextUtil = {}; //========================================================================================= //==============::CANVAS TEXT PROPERTIES::==================================== //======================================================== Sakri.CanvasTextProperties = function(fontWeight, fontStyle, fontSize, fontFace){ this.setFontWeight(fontWeight); this.setFontStyle(fontStyle); this.setFontSize(fontSize); this.fontFace = fontFace ? fontFace : "sans-serif"; }; Sakri.CanvasTextProperties.NORMAL = "normal"; Sakri.CanvasTextProperties.BOLD = "bold"; Sakri.CanvasTextProperties.BOLDER = "bolder"; Sakri.CanvasTextProperties.LIGHTER = "lighter"; Sakri.CanvasTextProperties.ITALIC = "italic"; Sakri.CanvasTextProperties.OBLIQUE = "oblique"; Sakri.CanvasTextProperties.prototype.setFontWeight = function(fontWeight){ switch (fontWeight){ case Sakri.CanvasTextProperties.NORMAL: case Sakri.CanvasTextProperties.BOLD: case Sakri.CanvasTextProperties.BOLDER: case Sakri.CanvasTextProperties.LIGHTER: this.fontWeight = fontWeight; break; default: this.fontWeight = Sakri.CanvasTextProperties.NORMAL; } }; Sakri.CanvasTextProperties.prototype.setFontStyle = function(fontStyle){ switch (fontStyle){ case Sakri.CanvasTextProperties.NORMAL: case Sakri.CanvasTextProperties.ITALIC: case Sakri.CanvasTextProperties.OBLIQUE: this.fontStyle = fontStyle; break; default: this.fontStyle = Sakri.CanvasTextProperties.NORMAL; } }; Sakri.CanvasTextProperties.prototype.setFontSize = function(fontSize){ if(fontSize && fontSize.indexOf && fontSize.indexOf("px")>-1){ var size = fontSize.split("px")[0]; fontProperites.fontSize = isNaN(size) ? 24 : size;//24 is just an arbitrary number return; } this.fontSize = isNaN(fontSize) ? 24 : fontSize;//24 is just an arbitrary number }; Sakri.CanvasTextProperties.prototype.clone = function(){ return new Sakri.CanvasTextProperties(this.fontWeight, this.fontStyle, this.fontSize, this.fontFace); }; Sakri.CanvasTextProperties.prototype.getFontString = function(){ return this.fontWeight + " " + this.fontStyle + " " + this.fontSize + "px " + this.fontFace; };
}(window));
/** * Created by sakri on 07-04-14. */
(function (window){ //=========================::ABSTRACT ISOMETRIC SPACE::============================ var AbstractIsometricSpace = function(stageWidth, stageHeight, width, height, depth) { //console.log("AbstractIsometricSpace.constructor()",stageWidth, stageHeight, width, height, depth); this.frontLeftTop = new Sakri.Geom.Point(); this.frontLeftBottom = new Sakri.Geom.Point(); this.backLeftTop = new Sakri.Geom.Point(); this.backLeftBottom = new Sakri.Geom.Point(); this.frontRightTop = new Sakri.Geom.Point(); this.frontRightBottom = new Sakri.Geom.Point(); this.backRightTop = new Sakri.Geom.Point(); this.backRightBottom = new Sakri.Geom.Point(); this.stageWidth = stageWidth; this.stageHeight = stageHeight; this.width = width; this.height = height; this.depth = depth; this.updatePoints(); }; AbstractIsometricSpace.prototype.updateStage = function (stageWidth, stageHeight) { this.stageWidth = stageWidth; this.stageHeight = stageHeight; this.updatePoints(); }; AbstractIsometricSpace.prototype.updateSpaceContainer = function (width, height, depth) { this.width = width; this.height = height; this.depth = depth; this.updatePoints(); }; AbstractIsometricSpace.prototype.updatePoints = function () { console.error("AbstractIsometricSpace.updatePoints() ERROR : subclasses must override this method"); }; //only used to for calculation in the project method AbstractIsometricSpace.prototype.frontLeft = new Sakri.Geom.Point(); AbstractIsometricSpace.prototype.backLeft = new Sakri.Geom.Point(); AbstractIsometricSpace.prototype.frontRight = new Sakri.Geom.Point(); AbstractIsometricSpace.prototype.backRight = new Sakri.Geom.Point(); AbstractIsometricSpace.prototype.leftZ = new Sakri.Geom.Point(); AbstractIsometricSpace.prototype.rightZ = new Sakri.Geom.Point(); AbstractIsometricSpace.prototype.project = function (point3d, point) { //console.log("AbstractIsometricSpace.project() point3d:" + point3d + " , point : " + point); this.frontLeft.x = this.frontLeftBottom.x; this.frontLeft.y = Sakri.MathUtil.interpolate(point3d.y, this.frontLeftBottom.y, this.frontLeftTop.y); //console.log("\tfrontLeft:" + this.frontLeft); this.backLeft.x = this.backLeftBottom.x; this.backLeft.y = Sakri.MathUtil.interpolate(point3d.y, this.backLeftBottom.y, this.backLeftTop.y); //console.log("\tthis.backLeft:" + this.backLeft); this.frontRight.x = this.frontRightBottom.x; this.frontRight.y = Sakri.MathUtil.interpolate(point3d.y, this.frontRightBottom.y, this.frontRightTop.y); //console.log("\tthis.frontRight:" + this.frontRight); this.backRight.x = this.backRightBottom.x; this.backRight.y = Sakri.MathUtil.interpolate(point3d.y, this.backRightBottom.y, this.backRightTop.y); //console.log("\tthis.backRight:" + this.backRight); this.leftZ.x = Sakri.MathUtil.interpolate(point3d.z, this.frontLeft.x, this.backLeft.x); this.leftZ.y = Sakri.MathUtil.interpolate(point3d.z, this.frontLeft.y, this.backLeft.y); //console.log("\tthis.leftZ:" + this.leftZ); this.rightZ.x = Sakri.MathUtil.interpolate(point3d.z, this.frontRight.x, this.backRight.x); this.rightZ.y = Sakri.MathUtil.interpolate(point3d.z, this.frontRight.y, this.backRight.y); //console.log("\tthis.rightZ:" + this.rightZ); point.x = Sakri.MathUtil.interpolate(point3d.x, this.leftZ.x, this.rightZ.x); point.y = Sakri.MathUtil.interpolate(point3d.x, this.leftZ.y, this.rightZ.y); //console.log("\tpoint:" + point); }; AbstractIsometricSpace.prototype.renderWireframe = function (context, strokeStyle) { context.strokeStyle = strokeStyle==undefined ? SimpleGeometry.getRgbaStyleString(0xFF,0x00,0x00,.3) : strokeStyle; context.lineWidth = 1; context.beginPath(); context.moveTo(this.frontLeftTop.x, this.frontLeftTop.y); context.lineTo(this.frontLeftBottom.x, this.frontLeftBottom.y); context.lineTo(this.backLeftBottom.x, this.backLeftBottom.y); context.lineTo(this.backLeftTop.x, this.backLeftTop.y); context.lineTo(this.frontLeftTop.x, this.frontLeftTop.y); context.closePath(); context.stroke(); context.beginPath(); context.moveTo(this.frontRightTop.x, this.frontRightTop.y); context.lineTo(this.frontRightBottom.x, this.frontRightBottom.y); context.lineTo(this.backRightBottom.x, this.backRightBottom.y); context.lineTo(this.backRightTop.x, this.backRightTop.y); context.lineTo(this.frontRightTop.x, this.frontRightTop.y); context.stroke(); context.closePath(); context.moveTo(this.backLeftTop.x,this.backLeftTop.y); context.lineTo(this.backRightTop.x,this.backRightTop.y); context.stroke(); context.moveTo(this.backLeftBottom.x,this.backLeftBottom.y); context.lineTo(this.backRightBottom.x,this.backRightBottom.y); context.stroke(); context.moveTo(this.frontLeftTop.x,this.frontLeftTop.y); context.lineTo(this.frontRightTop.x,this.frontRightTop.y); context.stroke(); context.moveTo(this.frontLeftBottom.x,this.frontLeftBottom.y); context.lineTo(this.frontRightBottom.x,this.frontRightBottom.y); context.stroke(); }; window.AbstractIsometricSpace = AbstractIsometricSpace; //=========================::ISOMETRIC SPACE LEFT::============================ var IsometricSpaceLeft = function (stageWidth, stageHeight, width, height, depth) { AbstractIsometricSpace.call(this, stageWidth, stageHeight, width, height, depth); //call super constructor. //console.log("IsometricSpaceLeft constructor", stageWidth, stageHeight, width, height, depth); }; //subclass extends superclass IsometricSpaceLeft.prototype = Object.create(AbstractIsometricSpace.prototype); IsometricSpaceLeft.prototype.constructor = AbstractIsometricSpace; IsometricSpaceLeft.prototype.updatePoints = function () { var middle = Sakri.MathUtil.map(this.depth, 0, (this.width + this.depth), 0, this.stageWidth); var isometricFrontLength = -middle / Math.cos(Sakri.MathUtil.degreesToRadians(150)); var isometricMappingUnit = Sakri.MathUtil.map(1, 0, this.depth, 0, isometricFrontLength); var isometricHeightLength = isometricMappingUnit * this.height; var isometricSideLength = isometricMappingUnit * this.width; this.backLeftTop.x = middle; this.backLeftTop.y = 0; this.backLeftBottom.x = middle; this.backLeftBottom.y = isometricHeightLength; this.frontLeftTop.x = 0; this.frontLeftTop.y = isometricFrontLength * Math.sin(Sakri.MathUtil.degreesToRadians(150)); this.frontLeftBottom.x = 0; this.frontLeftBottom.y = this.frontLeftTop.y + isometricHeightLength; this.backRightTop.x = middle + isometricSideLength * Math.cos(Sakri.MathUtil.degreesToRadians(30)); this.backRightTop.y = isometricSideLength * Math.sin(Sakri.MathUtil.degreesToRadians(30)); this.backRightBottom.x = this.backRightTop.x; this.backRightBottom.y = this.backRightTop.y + isometricHeightLength; this.frontRightTop.x = isometricSideLength * Math.cos(Sakri.MathUtil.degreesToRadians(30)); this.frontRightTop.y = this.frontLeftTop.y + isometricSideLength * Math.sin(Sakri.MathUtil.degreesToRadians(30)); this.frontRightBottom.x = this.frontRightTop.x; this.frontRightBottom.y = this.frontRightTop.y + isometricHeightLength; }; window.IsometricSpaceLeft = IsometricSpaceLeft; //=========================::ISOMETRIC PLANE::============================ var IsometricPlane = function(context, space, pointA, pointB, pointC, pointD) { if (typeof pointA === "undefined") { pointA = null; } if (typeof pointB === "undefined") { pointB = null; } this.lineWeight = 1; this.lineColor = "#000000"; this.lineAlpha = 1; this.fillAlpha = 1; this.context = context; this.space = space; this.pointA = pointA ? pointA : new Sakri.Geom.Point3d(); this.pointB = pointB ? pointB : new Sakri.Geom.Point3d(); this.pointC = pointC ? pointC : new Sakri.Geom.Point3d(); this.pointD = pointD ? pointD : new Sakri.Geom.Point3d(); this.points = [this.pointA, this.pointB, this.pointC, this.pointD]; }; IsometricPlane.prototype.setStyles = function (fillColor, fillAlpha, lineColor, lineWeight, lineAlpha) { if (typeof fillAlpha === "undefined") { fillAlpha = 1; } if (typeof lineColor === "undefined") { lineColor = "#000000"; } if (typeof lineWeight === "undefined") { lineWeight = 1; } if (typeof lineAlpha === "undefined") { lineAlpha = 1; } this.fillColor = fillColor; this.fillAlpha = fillAlpha; this.lineColor = lineColor; this.lineWeight = lineWeight; this.lineAlpha = lineAlpha; }; IsometricPlane.renderPoint = new Sakri.Geom.Point();//only used inside render(), optimization rather than creating a local variable everytime IsometricPlane.prototype.render = function () { this.prepareRender(); this.context.beginPath(); for(var i=0;i<4;i++){ this.space.project(this.points[i], IsometricPlane.renderPoint); //console.log("\tIsometricPlane.renderPoint : " + IsometricPlane.renderPoint); if(i==0){ this.context.moveTo(IsometricPlane.renderPoint.x, IsometricPlane.renderPoint.y); }else{ this.context.lineTo(IsometricPlane.renderPoint.x, IsometricPlane.renderPoint.y); } } this.context.closePath(); this.context.fill(); this.context.stroke(); }; IsometricPlane.prototype.prepareRender = function () { if(this.fillAlpha > 0) { this.context.fillStyle = this.fillColor; } if(this.lineAlpha > 0) { this.context.strokeStyle = this.lineColor; this.context.lineWidth = this.lineWeight; } }; window.IsometricPlane = IsometricPlane; //=========================::ISOMETRIC SQUARE::============================ var IsometricSquare = function(context, space, x, y, z, width, height, depth){ this.context = context; this.space = space; this.x = x; this.y = y; this.z = z; this.width = width; this.height = height; this.depth = depth; this.planeLeft = new IsometricPlane(context, space); this.planeRight = new IsometricPlane(context, space); this.planeTop = new IsometricPlane(context, space); this.updatePlanes(); }; IsometricSquare.prototype.updatePlanes = function(){ this.planeLeft.pointA.updateValues(this.x, this.y, this.z); this.planeLeft.pointB.updateValues(this.x+this.width, this.y, this.z); this.planeLeft.pointC.updateValues(this.x+this.width, this.y+this.height, this.z); this.planeLeft.pointD.updateValues(this.x, this.y+this.height, this.z); this.planeRight.pointA.updateValues(this.x+this.width, this.y, this.z); this.planeRight.pointB.updateValues(this.x+this.width, this.y, this.z+this.depth); this.planeRight.pointC.updateValues(this.x+this.width, this.y+this.height, this.z+this.depth); this.planeRight.pointD.updateValues(this.x+this.width, this.y+this.height, this.z); this.planeTop.pointA.updateValues(this.x, this.y+this.height, this.z); this.planeTop.pointB.updateValues(this.x, this.y+this.height, this.z+this.depth); this.planeTop.pointC.updateValues(this.x+this.width, this.y+this.height, this.z+this.depth); this.planeTop.pointD.updateValues(this.x+this.width, this.y+this.height, this.z); } IsometricSquare.prototype.setLeftPlaneStyle = function (fillColor, fillAlpha, lineColor, lineWeight, lineAlpha) { this.planeLeft.setStyles(fillColor, fillAlpha, lineColor, lineWeight, lineAlpha); }; IsometricSquare.prototype.setRightPlaneStyle = function (fillColor, fillAlpha, lineColor, lineWeight, lineAlpha) { this.planeRight.setStyles(fillColor, fillAlpha, lineColor, lineWeight, lineAlpha); }; IsometricSquare.prototype.setTopPlaneStyle = function (fillColor, fillAlpha, lineColor, lineWeight, lineAlpha) { this.planeTop.setStyles(fillColor, fillAlpha, lineColor, lineWeight, lineAlpha); }; IsometricSquare.prototype.setLineColor = function (lineColor) { this.planeLeft.lineColor = lineColor; this.planeRight.lineColor = lineColor; this.planeTop.lineColor = lineColor; }; IsometricSquare.prototype.setHeight = function(value){ this.height = value; this.updatePlanes(); } IsometricSquare.prototype.render = function(){ this.planeLeft.render(); this.planeRight.render(); this.planeTop.render(); }; window.IsometricSquare = IsometricSquare;
}(window));
window.requestAnimationFrame = window.__requestAnimationFrame || window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || (function () { return function (callback, element) { var lastTime = element.__lastTime; if (lastTime === undefined) { lastTime = 0; } var currTime = Date.now(); var timeToCall = Math.max(1, 33 - (currTime - lastTime)); window.setTimeout(callback, timeToCall); element.__lastTime = currTime + timeToCall; }; })();
var readyStateCheckInterval = setInterval( function() { if (document.readyState === "complete") { clearInterval(readyStateCheckInterval); init(); }
}, 10);
//========================
//general properties for demo set up
//========================
var canvas;
var context;
var canvasContainer;
var htmlBounds;
var bounds;
var minimumStageWidth = 250;
var minimumStageHeight = 250;
var maxStageWidth = 1000;
var maxStageHeight = 800;
var resizeTimeoutId = -1;
function init(){ canvasContainer = document.getElementById("canvasContainer"); window.onresize = resizeHandler; commitResize();
}
function getWidth( element ){return Math.max(element.scrollWidth,element.offsetWidth,element.clientWidth );}
function getHeight( element ){return Math.max(element.scrollHeight,element.offsetHeight,element.clientHeight );}
//avoid running resize scripts repeatedly if a browser window is being resized by dragging
function resizeHandler(){ context.clearRect(0,0,canvas.width, canvas.height); clearTimeout(resizeTimeoutId); clearTimeoutsAndIntervals(); resizeTimeoutId = setTimeout(commitResize, 300 );
}
function commitResize(){ if(canvas){ canvasContainer.removeChild(canvas); } canvas = document.createElement('canvas'); canvas.style.position = "absolute"; context = canvas.getContext("2d"); canvasContainer.appendChild(canvas); htmlBounds = new Sakri.Geom.Rectangle(0,0, getWidth(canvasContainer) , getHeight(canvasContainer)); if(htmlBounds.width >= maxStageWidth){ canvas.width = maxStageWidth; canvas.style.left = htmlBounds.getCenterX() - (maxStageWidth/2)+"px"; }else{ canvas.width = htmlBounds.width; canvas.style.left ="0px"; } if(htmlBounds.height > maxStageHeight){ canvas.height = maxStageHeight; canvas.style.top = htmlBounds.getCenterY() - (maxStageHeight/2)+"px"; }else{ canvas.height = htmlBounds.height; canvas.style.top ="0px"; } bounds = new Sakri.Geom.Rectangle(0,0, canvas.width, canvas.height); context.clearRect(0,0,canvas.width, canvas.height); if(bounds.width<minimumStageWidth || bounds.height<minimumStageHeight){ stageTooSmallHandler(); return; } var textInputSpan = document.getElementById("textInputSpan"); textInputSpan.style.top = htmlBounds.getCenterY() + (bounds.height/2) - 30 +"px"; textInputSpan.style.left = (htmlBounds.getCenterX() - getWidth(textInputSpan)/2)+"px"; startDemo();
}
function stageTooSmallHandler(){ var warning = "Sorry, bigger screen required :("; context.font = "bold normal 24px sans-serif"; context.fillText(warning, bounds.getCenterX() - context.measureText(warning).width/2, bounds.getCenterY()-12);
}
//========================
//Demo specific properties
//======================== var animating = false; var currentText; var characterBlockSets; var fontProperties = new Sakri.CanvasTextProperties(Sakri.CanvasTextProperties.NORMAL, null, 10); var bgColor = "#d3dafb"; var lineColor = "#74788b"; var squareTopColor = "#FFFFFF"; var squareLeftColor = "#bcc0d2"; var squareRightColor = "#74788b"; var space; var characterSpacer = 5; var renderSquare; var totalWidth; var totalHeight; var squareHeight; var squareWidth; var squareDepth; var totalBlockRows; function clearTimeoutsAndIntervals(){ animating = false; } function startDemo(){ var textInput = document.getElementById("textInput"); currentText = textInput.value.toUpperCase(); createCharacterBlockSets(); animating = true; loop(); } function loop(){ if(animating){ window.requestAnimationFrame(loop, canvas); showNextBlock(); } } function createCharacterBlockSets(){ characterBlockSets = []; context.font = fontProperties.getFontString(); context.textBaseline = "top"; context.fillStyle = "#FF0000"; var xOffset = 0; var i, j, square; for(var i=0;i<currentText.length;i++){ characterBlockSets[i] = createCharacterBlockPoints(currentText.charAt(i), xOffset); xOffset += context.measureText(currentText.charAt(i)).width + characterSpacer; } context.fillStyle = bgColor; context.fillRect(0, 0, canvas.width, canvas.height); var spaceSize = Math.min(canvas.width, canvas.height); space = new IsometricSpaceLeft(spaceSize, spaceSize, 200, 100, 200); //space.renderWireframe(context, "#888888"); totalWidth = context.measureText(currentText).width + characterSpacer * (currentText.length-1); totalHeight = totalBlockRows; squareHeight = 1/totalBlockRows; squareWidth = 1/totalWidth; squareDepth = .08; renderSquare = new IsometricSquare(context, space, 0,0,0, squareWidth, squareHeight, squareDepth); renderSquare.setLeftPlaneStyle(squareLeftColor, 1, undefined, 1, 1); renderSquare.setRightPlaneStyle(squareRightColor, 1, undefined, 1, 1); renderSquare.setTopPlaneStyle(squareTopColor, 1, undefined, 1, 1); renderSquare.setLineColor(lineColor); /* var squares = []; var totalWidth = context.measureText(currentText).width + characterSpacer * (currentText.length-1); var totalHeight = totalBlockRows; var squareHeight = 1/totalBlockRows; var squareWidth = 1/totalWidth; for(i = 0; i<characterBlockSets.length; i++){ for(j=0; j<characterBlockSets[i].length; j+=2){ square = new IsometricSquare(context, space, Sakri.MathUtil.normalize(characterBlockSets[i][j], 0, totalWidth), 1 - Sakri.MathUtil.normalize(characterBlockSets[i][j+1], 0, totalHeight), .5, squareWidth, squareHeight, squareWidth); square.setLeftPlaneStyle(squareLeftColor, 1, undefined, 1, 1); square.setRightPlaneStyle(squareRightColor, 1, undefined, 1, 1); square.setTopPlaneStyle(squareTopColor, 1, undefined, 1, 1); square.setLineColor(lineColor); squares.push(square); square.render(); } }*/ } function createCharacterBlockPoints(character, xOffset){ totalBlockRows = 0; context.clearRect(0,0,canvas.width, canvas.height); context.fillText(character, 0, 0); var width = context.measureText(currentText.charAt(i)).width; var pixels = context.getImageData(0, 0, width, fontProperties.fontSize*2);//high enough var data = pixels.data; var points = []; var lines = []; lines[0] = []; var i, j, x, y, prevY=0; for(i = 0; i < data.length; i += 4) { if(data[i]>0){ x = (i / 4) % width; y = Math.floor((i/4)/width); if(y!=prevY){ lines[lines.length] = []; } prevY = y; lines[lines.length-1].push(x + xOffset, y); } } //cubes need to be in order of bottom to top in order to be rendered correctly for(i=lines.length-1;i>-1;i--){ for(j=0;j<lines[i].length;j+=2){ points.push(lines[i][j], lines[i][j+1]); } } totalBlockRows = lines.length; context.clearRect(0,0,canvas.width, canvas.height); return points; } var blockPoint = new Sakri.Geom.Point(); function getNextBlockPoint(){ var candidateIndex = Math.floor(Math.random() * characterBlockSets.length); for(var i=0; i<characterBlockSets.length; i++){ if(characterBlockSets[candidateIndex].length>0){ blockPoint.x = characterBlockSets[candidateIndex].shift(); blockPoint.y = characterBlockSets[candidateIndex].shift(); return blockPoint; } candidateIndex++; candidateIndex %= characterBlockSets.length; } return undefined; } function showNextBlock(){ var blockPoint = getNextBlockPoint(); if(!blockPoint){ animating = false; console.log("finito"); return; } renderSquare.x = Sakri.MathUtil.normalize(blockPoint.x, 0, totalWidth); renderSquare.y = 1 - Sakri.MathUtil.normalize(blockPoint.y, 0, totalHeight); renderSquare.z = .5; renderSquare.updatePlanes(); renderSquare.render(); }
var maxCharacters = 6;
function changeText(){ var textInput = document.getElementById("textInput"); if(textInput.value && textInput.text!=""){ if(textInput.value.length > maxCharacters){ alert("Sorry, there is only room for "+maxCharacters+" characters. Try a shorter name."); return; } if(textInput.value.indexOf(" ")>-1){ alert("Sorry, no support for spaces right now :("); return; } clearTimeoutsAndIntervals(); setTimeout(startDemo,100); }
}
Isometric Text - Script Codes
Isometric Text - Script Codes
Home Page Home
Developer Sakri Rosenstrom
Username sakri
Uploaded September 13, 2022
Rating 3.5
Size 8,538 Kb
Views 22,264
Do you need developer help for Isometric Text?

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!

Sakri Rosenstrom (sakri) Script Codes
Name
Text On Fire
Circular Wander Text
Canvas Vasarely
Circular Logic Works Because...
He-Man effect
Huge Comment Generator
Particles
Flappy Van Persie
Ghost Text
TextPlosion
Create amazing marketing copy 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!