Hexagons

Developer
Andrey Shchekin
Size
4,360 Kb
Views
18,216
  1. Hexagons Previews
  2. Hexagons HTML Codes
  3. Hexagons CSS Codes
  4. Hexagons JS Codes

How do I make an hexagons?

Small demo to test poorPainter painting loop microlib.. What is a hexagons? How do you make a hexagons? This script and codes were developed by Andrey Shchekin on 15 November 2022, Tuesday.

Hexagons Previews
IQ Test

Hexagons - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Hexagons</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <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! */ * { box-size: border-box;
}
html, body { padding: 0; margin: 0; width: 100%; height: 100%; overflow: hidden; background-color: black;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <canvas></canvas>
<script type="text/javascript"> // https://github.com/NobleJS/setImmediate !function(global,undefined){"use strict";function canUseNextTick(){return"object"==typeof process&&"[object process]"===Object.prototype.toString.call(process)}function canUseMessageChannel(){return!!global.MessageChannel}function canUsePostMessage(){if(!global.postMessage||global.importScripts)return!1;var a=!0,b=global.onmessage;return global.onmessage=function(){a=!1},global.postMessage("","*"),global.onmessage=b,a}function canUseReadyStateChange(){return"document"in global&&"onreadystatechange"in global.document.createElement("script")}function installNextTickImplementation(a){a.setImmediate=function(){var a=tasks.addFromSetImmediateArguments(arguments);return process.nextTick(function(){tasks.runIfPresent(a)}),a}}function installMessageChannelImplementation(a){var b=new global.MessageChannel;b.port1.onmessage=function(a){var b=a.data;tasks.runIfPresent(b)},a.setImmediate=function(){var a=tasks.addFromSetImmediateArguments(arguments);return b.port2.postMessage(a),a}}function installPostMessageImplementation(a){function c(a,b){return"string"==typeof a&&a.substring(0,b.length)===b}function d(a){if(a.source===global&&c(a.data,b)){var d=a.data.substring(b.length);tasks.runIfPresent(d)}}var b="com.bn.NobleJS.setImmediate"+Math.random();global.addEventListener?global.addEventListener("message",d,!1):global.attachEvent("onmessage",d),a.setImmediate=function(){var a=tasks.addFromSetImmediateArguments(arguments);return global.postMessage(b+a,"*"),a}}function installReadyStateChangeImplementation(a){a.setImmediate=function(){var a=tasks.addFromSetImmediateArguments(arguments),b=global.document.createElement("script");return b.onreadystatechange=function(){tasks.runIfPresent(a),b.onreadystatechange=null,b.parentNode.removeChild(b),b=null},global.document.documentElement.appendChild(b),a}}function installSetTimeoutImplementation(a){a.setImmediate=function(){var a=tasks.addFromSetImmediateArguments(arguments);return global.setTimeout(function(){tasks.runIfPresent(a)},0),a}}var tasks=function(){function Task(a,b){this.handler=a,this.args=b}Task.prototype.run=function(){if("function"==typeof this.handler)this.handler.apply(undefined,this.args);else{var scriptSource=""+this.handler;eval(scriptSource)}};var nextHandle=1,tasksByHandle={},currentlyRunningATask=!1;return{addFromSetImmediateArguments:function(a){var b=a[0],c=Array.prototype.slice.call(a,1),d=new Task(b,c),e=nextHandle++;return tasksByHandle[e]=d,e},runIfPresent:function(a){if(currentlyRunningATask)global.setTimeout(function(){tasks.runIfPresent(a)},0);else{var b=tasksByHandle[a];if(b){currentlyRunningATask=!0;try{b.run()}finally{delete tasksByHandle[a],currentlyRunningATask=!1}}}},remove:function(a){delete tasksByHandle[a]}}}();if(!global.setImmediate){var attachTo="function"==typeof Object.getPrototypeOf&&"setTimeout"in Object.getPrototypeOf(global)?Object.getPrototypeOf(global):global;canUseNextTick()?installNextTickImplementation(attachTo):canUsePostMessage()?installPostMessageImplementation(attachTo):canUseMessageChannel()?installMessageChannelImplementation(attachTo):canUseReadyStateChange()?installReadyStateChangeImplementation(attachTo):installSetTimeoutImplementation(attachTo),attachTo.clearImmediate=tasks.remove}}("object"==typeof global&&global?global:this);
</script> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Hexagons - Script Codes CSS Codes

* { box-size: border-box;
}
html, body { padding: 0; margin: 0; width: 100%; height: 100%; overflow: hidden; background-color: black;
}

Hexagons - Script Codes JS Codes

if (window.console && window.console.clear) window.console.clear();
// PoorPainter
// Small painting loop library (purpose of this pen)
(function(exports) { exports.poorPainter = function(options) { (function scheduleUpdate() { var result = options.update(); if (result === false) return; if (options.updatePeriod === 0 && window.setImmediate) { window.setImmediate(scheduleUpdate); return; } // TODO: correct the period depending on how long the update took window.setTimeout(scheduleUpdate, options.updatePeriod); })(); (function schedulePaint() { var result = options.paint(); if (result === false) return; window.requestAnimationFrame(schedulePaint); })(); }
})(window);
// end of library
$(function() { var $body = $('body'); var $canvas = $('canvas'); var context = $canvas[0].getContext('2d'); var width; var height; // preview hack: var updatePeriod = window.location.href.indexOf('fullcpgrid') > 0 ? 0 : 4; function resize() { width = $body.width(); height = $body.height(); $canvas[0].width = width; $canvas[0].height = height; }; resize(); $(window).resize(resize); /*var lastX = 0; var lastY = 0; $canvas.mousemove(function(e) { if (Math.abs(e.pageX - lastX) < 10 && Math.abs(e.pageY - lastY) < 10) return; paintQueue.push({ color: '#000', mode: 'source-over', circle: { cx: e.pageX, cy: e.pageY, r: 40 } }); lastX = e.pageX; lastY = e.pageY; });*/ var paintQueue = []; var colors = [/*'#80DAEB',*/ '#F4C430'/*, '#93C572'*/]; var textColor = '#FF6347'; var textData = [ '3,1', '3,2', '3,3', // '3,4', '3,5', '3,7', '3,9', '3,10', '5,1','6,2','5,2', '5,3', // '6,4', '5,5', '5,7', '5,9', '5,10', '7,1', '7,2', '7,3', // '7,5', '7,7', '7,9', '7,10', '9,1', '9,2', '9,3', // '9,4', '9,5', '9,6', '9,7', '9,8', '9,9', '9,10' ].reduce(function(hash, key) { hash[key] = true; return hash; }, {}) poorPainter({ update: function() { paintQueue.push(nextFigure()); }, updatePeriod: updatePeriod, paint : function() { var item; while (item = paintQueue.pop()) { //context.globalCompositeOperation = 'lighter'; //context.globalAlpha = 0.1; //context.arc(circle.cx, circle.cy, circle.r, 0, 2 * Math.PI, false); drawFigure(item); } } }); function randomInt(min, max) { if (max === undefined) { max = min; min = 0; } return Math.floor(Math.random() * (max - min) + min); }; function nextFigure() { var size = 30; var column = randomInt(0, (width+size) / (3*size)); var rowDistance = Math.sqrt(3) * size / 2; var row = randomInt(0, (height+size) / rowDistance); var cx = column * 3*size; if ((row % 2) === 0) cx += 1.5*size; var cy = row * rowDistance; if (textData[(row+1) + ',' + (column+1)]) return; var color = textData[(row+1) + ',' + (column+1)] ? textColor : colors[randomInt(colors.length)]; return { size: size, cx: cx, cy: cy, color: color }; } function drawFigure(figure) { var side = figure.size; var cx = figure.cx; var cy = figure.cy; context.globalAlpha = 0.5; context.fillStyle = figure.color; context.beginPath(); context.moveTo(cx + side * Math.cos(0), cy + side * Math.sin(0)); for (var i = 1; i <= 6; i += 1) { context.lineTo( cx + side * Math.cos(i * 2 * Math.PI / 6), cy + side * Math.sin(i * 2 * Math.PI / 6) ); } context.closePath(); context.fill(); }
});
Hexagons - Script Codes
Hexagons - Script Codes
Home Page Home
Developer Andrey Shchekin
Username ashmind
Uploaded November 15, 2022
Rating 3.5
Size 4,360 Kb
Views 18,216
Do you need developer help for Hexagons?

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!

Andrey Shchekin (ashmind) Script Codes
Name
Wait what
Diamond-Square Terrain II
TV Fall
Text Effect 1
Click to Shutdown
Labyrinth 1
CSS
Diamond-Square Terrain
A Pen by Andrey Shchekin
JQuery visiblechange event
Create amazing SEO content 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!