// var constellation =
// draw two ellipses with a bezier curve connecting them (and then step two with a label)
// draw two circles
// draw a bezier
var constellation;
var x;
var y;
var x1;
var x2;
var y2;
var x3;
var clrTan;
var Circ2;
var Circ;
function setup() {
// Initialize all values
x1 = -155;
x2 = 112;
y1 = 5;
y2 = 0;
x3 = 0 - 250;
y3 = windowHeight / 2;
x4 = 0 + 250;
clrTan = '#FEF7ED';
circ2 = createElement('div', '');
circ = createElement('div', '');
}
function draw() {
createCanvas(windowWidth, windowHeight);
background('#0E293D');
// Translate the origin point to the center of the screen to make responsive
translate(width / 2, height / 2);
//call the function-make it into a constructor function
//
constellation();
}
constellation = function() {
//setting path of orbiting circles using 4 quadrants
//quadrant 1
if ((x1 < 0) && (y1 > 0)) {
x1 = x1 + 0.6;
y1 = y1 + .2;
}
//quadrant 2
if ((x1 > -1) && (y1 > -1)) {
x1 = x1 + .6;
y1 = y1 - .2;
}
//quadrant 3
if ((x1 > -2) && (y1 < 0)) {
x1 = x1 - .6;
y1 = y1 - .2;
}
//quadrant 4
if ((x1 < 1) && (y1 < 0)) {
x1 = x1 - .6;
y1 = y1 + .2;
}
// drawing the orbiting circle
fill('rgba(221, 239, 255, .1)');
stroke('#FEFCA2');
strokeWeight(3);
circ = ellipse(x1, y1, 45, 45);
// circ2 = ellipse(x2, y2, 25, 25);
//drawing the text labels
textSize(36);
fill('#DDEFFF');
noStroke();
text('Us', x3 - 27, y2 + 135);
text('The World', x4 - 81, y2 + 135);
//drawing the anchor circles
fill('#DDEFFF');
stroke('#069172');
strokeWeight(18);
ellipse(x3, y2, 175, 175);
ellipse(x4, y2, 175, 175);
fill('#46494C');
stroke('#C5C3C6');
strokeWeight(9);
ellipse(x4, y2, 36, 36);
fill('#46494C');
stroke('#C5C3C6');
strokeWeight(9);
ellipse(x3, y2, 36, 36);
fill('#D3B09C');
stroke('#D3B09C');
//drawing the bezier lines connecting anchor circles
fill(25, 133, 161, 1);
stroke('#DDEFFF');
strokeWeight(1);
bezier(x3, 0, 0, -72, 0, 0 - 72, x4, 0);
bezier(x4, 0, 0, 72, 0, 0 + 72, x3, 0);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.