Oh, that naughty sketch! Please let us know what the issue is below.
Apply Template
Applying this template will reset your sketch and remove all your changes. Are you sure you would like to continue?
Report Sketch
Report Comment
Please confirm that you would like to report the comment below.
We will review your submission and take any actions necessary per our Community Guidelines. In addition to reporting this comment, you can also block the user to prevent any future interactions.
Please report comments only when necessary. Unnecessary or abusive use of this tool may result in your own account being suspended.
Are you sure you want to delete your sketch?
Any files uploaded will be deleted as well.
Delete Comment?
This will also delete all the replies to this comment.
Delete this tab? Any code in it will be deleted as well.
Select a collection to submit your sketch
We Need Your Support
Since 2008, OpenProcessing has provided tools for creative coders to learn, create, and share over a million open source projects in a friendly environment.
Niche websites like ours need your continued support for future development and maintenance, while keeping it an ad-free platform that respects your data and privacy!
Please consider subscribing below to show your support with a "Plus" badge on your profile and get access to many other features!
mouse, keyboard
Custom Hex Tiling
xxxxxxxxxx
let r, s;
let hexagons;
const palette = [
["#F96167","#FCE77D"],
["#F9D342","#292826"],
["#DF678C","#3D155F"],
["#CCF381","#4831D4"],
["#4A274F","#F0A07C"],
["#2B3252","#EF5455"],
["#2B3252","#FAD744"],
["#FFF748","#3C1A5B"],
["#2F3C7E","#FBEAEB"],
["#EC4D37","#1D1B1B"],
["#8BD8BD","#243665"],
["#141A46","#EC8B5E"],
["#FFFFFF","#8AAAE5"],
["#295F2D","#FFE67C"],
["#F4A950","#161B21"],
["#ED2188","#080A52"],
["#4A171E","#E2AD44"],
["#D2302C","#F7F7F9"],
["#358597","#F4A896"],
["#E7D045","#A04EF6"],
["#262223","#DDC6B6"],
["#F4EFEA","#7D141D"],
["#AA96DA","#FFFFD2"],
["#F7F7F7","#006838"],
["#234E70","#FBF8BE"],
["#FFE8F5","#8000FF"],
["#191919","#FDF5A6"],
["#CC313D","#F7C5CC"],
["#E2D3F4","#013DC4"],
["#533549","#F6B042"],
["#F9ED4E","#533549"],
["#99F443","#EC449B"],
["#050505","#E6E7E8"],
["#EE4E34","#FCEDDA"],
["#072C50","#B88746"],
["#FDF5A6","#072C50"],
["#96351E","#DBB98F"],
["#53A57D","#FBF7F4"],
["#CFCAA8","#635E87"],
["#E3B448","#3A6B35"],
["#CBD18F","#3A6B35"],
["#FCE77D","#F96167"],
["#292826","#F9D342"],
["#3D155F","#DF678C"],
["#4831D4","#CCF381"],
["#F0A07C","#4A274F"],
["#EF5455","#2B3252"],
["#FAD744","#2B3252"],
["#3C1A5B","#FFF748"],
["#FBEAEB","#2F3C7E"],
["#1D1B1B","#EC4D37"],
["#243665","#8BD8BD"],
["#EC8B5E","#141A46"],
["#8AAAE5","#FFFFFF"],
["#FFE67C","#295F2D"],
["#161B21","#F4A950"],
["#080A52","#ED2188"],
["#E2A144","#4A171E"],
["#F7F7F9","#D2302C"],
["#F4A896","#358597"],
["#A04EF6","#E7D045"],
["#DDC6B6","#262223"],
["#7D141D","#F4EFEA"],
["#FFFFD2","#AA96DA"],
["#006838","#F7F7F7"],
["#FBF8BE","#234E70"],
["#8000FF","#FFE8F5"],
["#FDF5A6","#191919"],
["#F7C5CC","#CC313D"],
["#013DC4","#E2D3F4"],
["#F6B042","#533549"],
["#533549","#F9ED4E"],
["#EC449B","#99F443"],
["#E6E7E8","#050505"],
["#FCEDDA","#EE4E34"],
["#B88746","#072C50"],
["#072C50","#FDF5A6"],
["#DBB98F","#96351E"],
["#FBF7F4","#53A57D"],
["#635E87","#CFCAA8"],
["#3A6B35","#E3B448"],
["#3A6B35","#CBD18F"],
];
function hashString(str) {
//set variable hash as 0
var hash = 0;
// if the length of the string is 0, return 0
if (str.length == 0) return hash;
for (i = 0 ;i<str.length ; i++)
{
ch = str.charCodeAt(i);
hash = ((hash << 5) - hash) + ch;
hash = hash & hash;
}
return abs(hash);
}
function nextSeed(seed) {
return (27644437*seed + 7907)%7919;
}
function setup() {
createCanvas(1280, 720);
background(25,40,25);
stroke(225,200,200);
fill(255);
textSize(32);
textWrap(CHAR);
textAlign(CENTER,CENTER);
text('Enter some text',300,225);
textAlign(LEFT,TOP);
input = createInput();
input.position(95,250);
input.size(400,25);
input.style('font-size', '20px');
input.changed(drawHex);
button = createButton("GO");
button.size(56,50)
button.style('font-size', '26px');
button.position(272,300);
button.mousePressed(drawHex);
}
function drawHex() {
clear();
createCanvas(1280,720);
button.remove();
input.remove();
angleMode(DEGREES);
centerX = width / 2;
centerY = height / 2;
r = 15; //center to vertex of a hexagon (or radius of circumcircle)
s = (r * sqrt(3)) / 2; //center to mid-point of size of hexagon (pr radius of incircle)
seed = input.value();
seed = hashString(seed);
background(palette[seed%82][0]);
stroke(palette[seed%82][1]);
hextype = [];
count = 0;
for (let y = 0; y < height + s; y += 2 * s) {
for (let x = 0; x < width + r; x += 3 * r) {
hextype[count] = [typeH, typeI, typeG][seed%3];
count++;
seed = nextSeed(seed);
hextype[count] = [typeH, typeI, typeG][seed%3];
count++;
seed = nextSeed(seed);
}
}
noFill();
count = 0;
for (let y = 0; y < height + s; y += 2 * s) {
for (let x = 0; x < width + r; x += 3 * r) {
switch (hextype[count]) {
case typeG:
hextype[count] = typeH;
break;
case typeH:
hextype[count] = typeI;
break;
case typeI:
hextype[count] = typeG;
break;
}
angle = random([0, 60, 120, 180, 240, 300]);
//angle = 0;
hextyp = hextype[count];
hexagon(x, y, r, hextyp, angle);
count++;
switch (hextype[count]) {
case typeG:
hextype[count] = typeH;
break;
case typeH:
hextype[count] = typeI;
break;
case typeI:
hextype[count] = typeG;
break;
}
hextyp = hextype[count];
hexagon(x + 1.5 * r, y + s, r, hextyp, angle);
count++;
}
}
}
function hexagon(x, y, r, hextypeFn, angle) {
strokeWeight(0.5);
beginShape();
for (let a = 0; a < 360; a += 60) {
let x2 = cos(a) * r;
let y2 = sin(a) * r;
vertex(x + x2, y + y2);
}
endShape(CLOSE);
strokeWeight(3);
hextypeFn(x, y, r, angle);
}
function typeA(x, y, r, angle) {
push();
noFill();
for (var a = angle; a < angle + 360; a += 60) {
var x2 = cos(a) * r;
var y2 = sin(a) * r;
var startAngle = -1;
switch (a % 360) {
case 0:
startAngle = 120;
break;
case 120:
startAngle = 240;
break;
case 240:
startAngle = 0;
}
if (startAngle >= 0) {
arc(x + x2, y + y2, r / 2, r / 2, startAngle, startAngle + 120);
}
}
pop();
}
function typeB(x, y, r, angle) {
push();
noFill();
for (var a = angle; a < angle + 360; a += 60) {
var x2 = cos(a) * r;
var y2 = sin(a) * r;
var startAngle = -1;
switch (a % 360) {
case 60:
startAngle = 180;
break;
case 180:
startAngle = 300;
break;
case 300:
startAngle = 60;
break;
}
if (startAngle >= 0) {
arc(x + x2, y + y2, r / 2, r / 2, startAngle, startAngle + 120);
}
}
pop();
}
function typeC(x, y, r, angle) {
push();
noFill();
for (var a = angle; a < angle + 360; a += 60) {
var x2 = ((cos(a) + cos(a + 60)) / 2) * r;
var y2 = ((sin(a) + sin(a + 60)) / 2) * r;
var startAngle = -1;
switch (a % 360) {
case 0:
startAngle = 120;
break;
case 120:
startAngle = 240;
break;
case 240:
startAngle = 0;
}
if (startAngle >= 0) {
arc(x + x2, y + y2, r / 2, r / 2, startAngle, startAngle + 180);
}
}
pop();
}
function typeD(x, y, r, angle) {
push();
noFill();
for (var a = angle; a < angle + 360; a += 60) {
var x2 = ((cos(a) + cos(a + 60)) / 2) * r;
var y2 = ((sin(a) + sin(a + 60)) / 2) * r;
var startAngle = -1;
switch (a % 360) {
case 60:
startAngle = 180;
break;
case 180:
startAngle = 300;
break;
case 300:
startAngle = 60;
break;
}
if (startAngle >= 0) {
arc(x + x2, y + y2, r / 2, r / 2, startAngle, startAngle + 180);
}
}
pop();
}
function typeE(x, y, r, angle) {
push();
noFill();
for (var a = angle; a < angle + 360; a += 60) {
var x2 = ((cos(a) + cos(a + 60)) / 2) * r;
var y2 = ((sin(a) + sin(a + 60)) / 2) * r;
var startAngle = -1;
switch (a % 360) {
case 0:
startAngle = 120;
break;
case 120:
startAngle = 240;
break;
case 240:
startAngle = 0;
break;
case 60:
startAngle = 180;
break;
case 180:
startAngle = 300;
break;
case 300:
startAngle = 60;
break;
}
if (startAngle >= 0) {
arc(x + x2, y + y2, r / 2, r / 2, startAngle, startAngle + 180);
}
}
pop();
}
function typeF(x, y, r, angle) {
push();
noFill();
for (var a = angle; a < angle + 360; a += 60) {
var x2 = cos(a) * r;
var y2 = sin(a) * r;
var startAngle = -1;
switch (a % 360) {
case 0:
startAngle = 120;
break;
case 120:
startAngle = 240;
break;
case 240:
startAngle = 0;
break;
case 60:
startAngle = 180;
break;
case 180:
startAngle = 300;
break;
case 300:
startAngle = 60;
break;
}
if (startAngle >= 0) {
arc(x + x2, y + y2, r / 2, r / 2, startAngle, startAngle + 120);
}
}
pop();
}
function typeG(x, y, r, angle) {
push();
noFill();
for (var a = angle; a < angle + 360; a += 60) {
var x2 = cos(a) * r;
var y2 = sin(a) * r;
var startAngle = -1;
switch (a % 360) {
case 0:
startAngle = 120;
break;
case 180:
startAngle = 300;
break;
}
if (startAngle >= 0) {
arc(x + x2, y + y2, r, r, startAngle, startAngle + 120);
}
}
line(x, y + (r * sqrt(3)) / 2, x, y - (r * sqrt(3)) / 2);
pop();
}
function typeH(x, y, r, angle) {
push();
noFill();
for (var a = angle; a < angle + 360; a += 60) {
var x2 = cos(a) * r;
var y2 = sin(a) * r;
var startAngle = -1;
switch (a % 360) {
case 60:
startAngle = 180;
break;
case 240:
startAngle = 0;
break;
}
if (startAngle >= 0) {
arc(x + x2, y + y2, r, r, startAngle, startAngle + 120);
}
}
line(
x + (((r * sqrt(3)) / 2) * sqrt(3)) / 2,
y - ((r / 2) * sqrt(3)) / 2,
x - (((r * sqrt(3)) / 2) * sqrt(3)) / 2,
y + ((r / 2) * sqrt(3)) / 2
);
pop();
}
function typeI(x, y, r, angle) {
push();
noFill();
for (var a = angle; a < angle + 360; a += 60) {
var x2 = cos(a) * r;
var y2 = sin(a) * r;
var startAngle = -1;
switch (a % 360) {
case 120:
startAngle = 240;
break;
case 300:
startAngle = 60;
break;
}
if (startAngle >= 0) {
arc(x + x2, y + y2, r, r, startAngle, startAngle + 120);
}
}
line(
x + (((r * sqrt(3)) / 2) * sqrt(3)) / 2,
y + ((r / 2) * sqrt(3)) / 2,
x - (((r * sqrt(3)) / 2) * sqrt(3)) / 2,
y - ((r / 2) * sqrt(3)) / 2
);
pop();
}
See More Shortcuts
Please verify your email to comment
Verify Email