// Alec Albright
// Section B
// Project 3
var margin = 150;
var radius = 30;
var r = 0;
var g = 0;
var b = 0;
var rotation = 0;
function setup(){
createCanvas(640, 480);
angleMode(DEGREES);
}
function draw(){
background("white");
fill(r, g, b);
// mapping angle of rotation to mouseY
// as mouse moves up and down, shapes rotate
rotation = map(mouseY, 0, height, 0, 360);
// drawing hexagons with specified margin and rotation
// center
push();
translate(width / 2, height / 2);
rotate(rotation);
hexagon(0, 0, radius);
pop();
// circle around center hexagon
for(let i = 0; i < nvertex; i +=1){
// finding exactly where the hexagon at hand is located
// sin tells us where the y coordinate is
var centerY = sin(angle) * margin;
// cos tells us where the x coordinate is
var centerX = cos(angle) * margin;
// now draw the vertex at hand
// setting up rotation for each individual hexagon
push();
translate(width / 2 + centerX, height / 2 + centerY);
rotate(rotation);
hexagon(centerX, centerY, radius);
pop();
// add the next portion of the angle
angle = angle + (360 / 6)
}
// scaling mouseX to use the whole screen for size
// as mouse moves right, shapes get bigger
radius = map(mouseX, 0, width, 20, 70);
// scaling color using whole screen
// as mouse moves right, more red
r = map(mouseX, 0, width, 0, 255);
// as mouse moves down, more blue
b = map(mouseY, 0, height, 0, 255);
// as mouse moves left, more green
g = 255 - map(mouseX, 0, width, 0, 255);
// margin depends on mouseX, keeping same distance throughout
margin = map(mouseX, 0, width, 50, 150);
}
// 6 vertices, as a hexagon has
var nvertex = 6;
// angle we're working at (when we get to TWO_PI, we're done)
var angle = 0;
function hexagon(x, y, radius){
// draw a hexagon at (x, y) using beginShape()
beginShape();
// find each vertex's specific location
for(let i = 0; i < nvertex; i += 1){
// finding exactly where the vertex at hand is located
// sin tells us where the y coordinate is
var vertexY = y + sin(angle) * radius;
// cos tells us where the x coordinate is
var vertexX = x + cos(angle) * radius;
// now draw the vertex at hand
vertex(vertexX, vertexY)
// add the next portion of the angle
angle += (360 / 6)
}
// connect beginning and end points
endShape(CLOSE)
}
My process for creating this visualization was most difficult in implementing a rotational element. The colors were fairly easily scaled, the size and distance were a bit more difficult, but adding the rotation was a long experiment that I eventually figured out, resulting in this very cool kaleidoscope effect!