xxxxxxxxxx
125
let w;
let h;
let xmap;
let ymap;
let greenVal = 100;
let peaColor;
function setup() {
createCanvas(600, 600);
}
function draw() {
mapBackground(greenVal); // greenVal = how much green to add to the background (0,255)
// set these for the entire sketch
noCursor();
noStroke();
// control which creature to draw based on mouse location
if (mouseX < width / 2) {
// draw a summer creature
drawSummerCreature(mouseX, mouseY);
} else {
// draw a winter creature
drawWinterCreature(mouseX, mouseY);
}
/* --------------- functions defined below --------------- */
// draw a winter creature
function drawWinterCreature(x, y) {
/* cold color palette
#2d1b00
#1e606e
#5ab9a8
#c4f0c2
*/
push();
translate(x, y);
// creature head
fill("#1e606e");
ellipse(0, 0, 160, 80);
// eyes
fill("#1e606e");
circle(-50, -40, 50);
circle(50, -40, 50);
fill("#2d1b00");
circle(-50, -40, 30);
circle(50, -40, 30);
// draw
shooters(0, 0, -130, 30, "#c4f0c2"); // (x , y point of where to translate as 'center',distance = distance between each circle, diameter = diameter of each circle.
shooters(0, 0, 230, 30, "#c4f0c2");
// mouth
//circle(0,20,20);
rotate(PI / 4);
rect(0, 0, 10, 20);
rect(0, 0, 20, 10);
pop();
}
// draw a summer creature
function drawSummerCreature(x, y) {
/* warm color palette
#7c3f58
#eb6b6f
#f9a875
#fff6d3
*/
push();
translate(x, y);
// creature head
fill("#eb6b6f");
ellipse(0, 0, 160, 80);
// eyes
fill("#eb6b6f");
circle(-50, -40, 50);
circle(50, -40, 50);
fill("#fff6d3");
circle(-50, -40, 30);
circle(50, -40, 30);
// draw
shooters(0, 0, -130, 30, "#7c3f58"); // (x , y point of where to translate as 'center',distance = distance between each circle, diameter = diameter of each circle.
shooters(0, 0, 230, 30, "#7c3f58");
// mouth
//circle(0,20,20);
rotate(PI / 4);
rect(0, 0, 10, 20);
rect(0, 0, 20, 10);
pop();
}
// drawing side circles function used in creatures.
function shooters(x, y, distance, dia, peaColor) {
push();
fill(peaColor);
translate(x, y); // shooters are alligned with creature's head now
for (let i = 0; i < 3; i++) { // do this three times!
circle(x + distance, y, dia);
distance -= 50; // changes where the center of the circle is for the next circle
}
}
// maps background color to mouseX and mouseY value
function mapBackground(greenValue) {
let w = width;
let h = height;
let xmap = map(mouseX, 0, w, 0, 255);
let ymap = map(mouseY, 0, h, 0, 255);
background(xmap, greenValue, ymap); // background rgb is mapped to mouse and there is an emphasis on green tones
}
}