I started by working on the background and doing tests to get key-typed functionality working with a test shape before I put in letter shapes. so if you press i or r the color of the test shape will change.
CODE
let diam = 72;
let direction = 1;
let value = 0;
function setup() {
createCanvas(1280, 720);
ellipseMode(RADIUS);
frameRate(30);
}
function draw() {
//BOARDER & BACKGROUND-----------------------
background(66,133,116);
//background(128,75,38);
noStroke();
stroke(0, 255, 190);
fill(255, 115, 15);
square(0,0,144);
square(0,288,144);
square(0,576,144);
square(1136,144,144);
square(1136,432,144);
fill(255, 17, 0);
square(0,144,144);
square(0,432,144);
square(1136,0,144);
square(1136,288,144);
square(1136,576,144);
fill(255, 115, 15);
circle(72,216, 72);
circle(72,504, 72);
circle(1208, 72, 72);
circle(1208, 360, 72);
circle(1208, 648, 72);
stroke(255, 17, 0);
strokeWeight(10);
if (diam >= 72 || diam <=0)
{direction *=-1;}
ellipse(72, 72, diam, diam);
//ellipse(72, 216, diam, diam);
ellipse(72, 360, diam, diam);
//ellipse(72, 504, diam, diam);
ellipse(72, 648, diam, diam);
//ellipse(1208, 72, diam, diam);
ellipse(1208, 216, diam, diam);
// ellipse(1208, 360, diam, diam);
ellipse(1208, 504, diam, diam);
//ellipse(1208, 648, diam, diam);;
diam+=10*direction;
strokeWeight(10);
if (diam >= 72 || diam <=0)
{direction *=-1;}
ellipse(72, 72, diam, diam);
//ellipse(72, 216, diam, diam);
ellipse(72, 360, diam, diam);
//ellipse(72, 504, diam, diam);
ellipse(72, 648, diam, diam);
//ellipse(1208, 72, diam, diam);
ellipse(1208, 216, diam, diam);
// ellipse(1208, 360, diam, diam);
ellipse(1208, 504, diam, diam);
//ellipse(1208, 648, diam, diam);;
diam+=10*direction;
/*if (keyIsPressed)
{if (keyCode == 'i')
{ fill(10,20,30);
beginShape()
vertex (500,500);
vertex(600,500);
vertex(800,600);
endShape(CLOSE)
}
else
{ fill(10,20,30);
beginShape()
vertex (500,500);
vertex(600,500);
vertex(800,600);
endShape(CLOSE)
}
}*/
fill(value);
beginShape()
vertex (500,500);
vertex(600,500);
vertex(800,600);
vertex(800,700);
endShape(CLOSE)
//----------------------
}
function keyTyped(){
if (key === 'i') {
value = 0;
} else if (key === 'r'){
value =255;
}}
/* Color Theme Swatches in RGBA
.My-Color-Theme-1-rgba { color: rgba(255, 115, 15, 1); }
.My-Color-Theme-2-rgba { color: rgba(255, 17, 0, 1); }
.My-Color-Theme-3-rgba { color: rgba(0, 255, 190, 1); }
.My-Color-Theme-4-rgba { color: rgba(66, 133, 116, 1); }
.My-Color-Theme-5-rgba { color: rgba(128, 75, 38, 1); }
*/
Comments