xxxxxxxxxx653
//INITIALIZING VARIABLES//scene togglinglet homePageVisible = true;let scene1Visible = false;// let scene1Visible = true; // just for simpler drawing process//buttonslet startButton;let button1;let button2;let button3;let button4;let button5;let button6;//dragon and scaleslet mainDragon;let dragon1;let dragon2;let dragon3;let dragon4;let dragon5;let dragon6;//sound and imagelet mySound;let lantern;let dragon1clicked//MAIN FUNCTIONSfunction preload() { // mySound = loadSound("guqin.mp3"); lantern = loadImage("lantern.png");}function setup() { myCanvas = createCanvas(500, 500); rectMode(CENTER); // mySound.play(); //BUTTONS startButton = new Button(250, 400, color(235, 73, 73), "Start", 250, 100, 15); //textX and textY coordinates not changing position of text button1 = new Button( 95, 410, color(235, 73, 73), "tóng zhì \n 同志 \n Gay", 250, 90, 9 ); button2 = new Button( 185, 410, color(235, 73, 73), " lā lā \n 拉拉 \n Lesbian", 250, 90, 9 ); button3 = new Button( 275, 410, color(235, 73, 73), " shuāng xìng liàn \n 双性恋 \n Bisexual", 250, 90, 8 ); button4 = new Button( 95, 460, color(235, 73, 73), "kuà xìng bié \n 跨性别 \n Trans", 250, 90, 9 ); button5 = new Button( 185, 460, color(235, 73, 73), "fēi èr yuán \n xìng bié \n 非二元性别 \n Nonbinary", 250, 90, 9 ); button6 = new Button( 275, 460, color(235, 73, 73), "wú xìng liàn \n 无性恋 \n Asexual", 250, 90, 8 ); //DRAGONS mainDragon = new Dragon( color(247, 139, 131), color(237, 123, 130), color(220, 100, 100), color(153, 12, 8), color(153, 12, 8), color(220, 100, 100), color(153, 12, 8), color(220, 100, 100), color(153, 12, 8), color(153, 12, 8) ); //gay dragon1 = new Dragon( color(247, 139, 131), color(237, 123, 130), color(228, 3, 3), color(115, 41, 130), color(228, 3, 3), color(255, 140, 0), color(255, 237, 0), color(0, 128, 38), color(36, 64, 142) ); //lesbian dragon2 = new Dragon( color(247, 139, 131), color(237, 123, 130), color(213, 45, 0), color(239, 118, 39), color(255, 154, 86), color(245, 241, 228), color(209, 98, 164), color(181, 86, 144), color(163, 2, 98) ); //bi dragon3 = new Dragon( color(247, 139, 131), color(237, 123, 130), color(214, 2, 112), color(155, 79, 150), color(0, 56, 168), color(214, 2, 112), color(155, 79, 150), color(0, 56, 168), color(214, 2, 112), color(155, 79, 150) ); //trans dragon4 = new Dragon( color(247, 139, 131), color(237, 123, 130), color(91, 206, 250), color(245, 169, 184), color(245, 241, 228), color(91, 206, 250), color(245, 169, 184), color(245, 241, 228), color(91, 206, 250), ); //nonbinary dragon5 = new Dragon( color(247, 139, 131), color(237, 123, 130), color(156, 89, 209), color(252, 244, 52), color(245, 241, 228), color(44, 44, 44), color(252, 244, 52), color(245, 241, 228), color(156, 89, 209) ); //asexual dragon6 = new Dragon( color(247, 139, 131), color(237, 123, 130), color(0), color(163), color(245, 241, 228), color(128, 0, 128), color(163), color(245, 241, 228), color(128, 0, 128) );}function draw() { if(homePageVisible){ homePage(); } //comment out to work on scene 1 if (scene1Visible) { sceneOne(); } // printMouseCoordinates();}//DRAWING FUNCTIONSfunction homePage() { background(252, 249, 245); //beige rectangle noStroke(); fill(252, 240, 207); rect(250, 250, 470, 470, 50); //rainbow strokeWeight(5); noFill(); angleMode(DEGREES); push(); translate(0, 15); stroke(255, 0, 0, 70); //red arc(250, 250, 535, 400, 180, 0); stroke(255, 127, 0, 70); //orange arc(250, 255, 530, 400, 180, 0); stroke(255, 255, 0, 70); //yellow arc(250, 260, 525, 400, 180, 0); stroke(0, 255, 0, 70); //green arc(250, 265, 515, 400, 180, 0); stroke(0, 127, 255, 70); //blue arc(250, 270, 510, 400, 180, 0); stroke(127, 0, 255, 70); //purple arc(250, 275, 505, 400, 180, 0); pop(); //lanterns image(lantern, -50, 0, 200, 200); image(lantern, 350, 0, 200, 200); startButton.showButton(); startButton.hover(mouseX, mouseY);}function sceneOne() { background(215, 250, 231); push(); rectMode(CORNER); //inner canvas noStroke(); fill(255); rect(15, 15, 470, 355, 10); //control panel rect(385, 385, 100, 100, 10); fill(87, 86, 84); //control panel text textAlign(LEFT); textFont("Futura"); textSize(11); textStyle(BOLD); text("Key Controls", 395, 410); textStyle(NORMAL); text("←: homepage \n C: bg color \n S: save image", 395, 430); pop(); button1.showButton(); button2.showButton(); button3.showButton(); button4.showButton(); button5.showButton(); button6.showButton(); button1.hover(mouseX, mouseY); button2.hover(mouseX, mouseY); button3.hover(mouseX, mouseY); button4.hover(mouseX, mouseY); button5.hover(mouseX, mouseY); button6.hover(mouseX, mouseY); //now this is not working // mainDragonScales(); // dragon1clicked.mouseClicked(dragon1.showScales())// dragon2clicked.mouseClicked(dragon2.showScales())}// function mainDragonScales(){// mainDragon.showScales();// mainDragon.showDragon();// }// function dragon1Scales(){// dragon1clicked = dragon1.showScales();// mainDragon.showDragon();// }// function dragon2Scales(){// dragon2clicked = dragon2.showScales();// mainDragon.showDragon();// }//MOUSE AND KEYBOARD INTERACTION FUNCTIONSfunction mouseClicked() { if (homePageVisible) { // code for detecting click on 1st button if ( mouseX > startButton.x - startButton.buttonWidth / 2 && mouseX < startButton.x + startButton.buttonWidth / 2 && mouseY > startButton.y - startButton.buttonHeight / 2 && mouseY < startButton.y + startButton.buttonHeight / 2 ) { homePageVisible = false; scene1Visible = true; } } if (scene1Visible) { if ( mouseX > button1.x - button1.buttonWidth / 2 && mouseX < button1.x + button1.buttonWidth / 2 && mouseY > button1.y - button1.buttonHeight / 2 && mouseY < button1.y + button1.buttonHeight / 2 ) { dragon1Scales(); } if ( mouseX > button2.x - button2.buttonWidth / 2 && mouseX < button2.x + button2.buttonWidth / 2 && mouseY > button2.y - button2.buttonHeight / 2 && mouseY < button2.y + button2.buttonHeight / 2) { dragon2Scales(); } }}function keyPressed() { // to find keyCode of letter keys: // console.log(keyCode); if (keyCode === LEFT_ARROW && homePageVisible === false) { homePageVisible = true; scene1Visible = false; } if (keyCode === 83 && !homePageVisible) { savedImg = myCanvas.get(0, 0, width, height - 115); savedImg.save("my-pride-dragon", "png"); }}//CLASSESclass Button { constructor(x, y, buttonColor, buttonText, textX, textY, textsize) { this.x = x; this.y = y; this.buttonColor = buttonColor; this.buttonWidth = 77; this.buttonHeight = 42; this.buttonCorners = 7; this.buttonText = buttonText; this.textX = textX; this.textY = textY; this.textsize = textsize; } showButton() { noStroke(); fill(this.buttonColor); rect( this.x, this.y, this.buttonWidth, this.buttonHeight, this.buttonCorners ); push(); textAlign(CENTER, CENTER); textStyle(BOLD); textFont("Futura"); textSize(this.textsize); // console.log(this.textX) //**bug fill(255); text(this.buttonText, this.x, this.y); pop(); } hover(dx, dy) { if ( dx > this.x - this.buttonWidth / 2 && dx < this.x + this.buttonWidth / 2 && dy > this.y - this.buttonHeight / 2 && dy < this.y + this.buttonHeight / 2 ) { this.buttonWidth = 81; this.buttonHeight = 46; } else { this.buttonWidth = 77; this.buttonHeight = 42; } }}class Dragon { constructor( faceColor, bodyColor, scale1Color, scale2Color, scale3Color, scale4Color, scale5Color, scale6Color, scale7Color ) { this.faceColor = faceColor; this.bodyColor = bodyColor; this.scale1Color = scale1Color; this.scale2Color = scale2Color; this.scale3Color = scale3Color; this.scale4Color = scale4Color; this.scale5Color = scale5Color; this.scale6Color = scale6Color; this.scale7Color = scale7Color; // this.scale = new Scale(); } // changeColor( // scale1Color, // scale2Color, // scale3Color, // scale4Color, // scale5Color, // scale6Color, // scale7Color // ) { // this.scale1Color = scale1Color; // this.scale2Color = scale2Color; // this.scale3Color = scale3Color; // this.scale4Color = scale4Color; // this.scale5Color = scale5Color; // this.scale6Color = scale6Color; // this.scale7Color = scale7Color; // } showScales() { angleMode(DEGREES); //SCALE 1 push(); fill(this.scale1Color); beginShape(); vertex(226, 160); bezierVertex(240, 140, 240, 100, 260, 160); endShape(CLOSE); pop(); //SCALE 2 push(); translate(-20, 20); rotate(-4); fill(this.scale2Color); beginShape(); vertex(226, 160); bezierVertex(240, 140, 240, 100, 260, 160); endShape(CLOSE); pop(); //SCALE 3 push(); translate(170, 190); scale(0.5, 0.5); fill(this.scale3Color); beginShape(); vertex(226, 160); bezierVertex(240, 140, 240, 100, 260, 160); endShape(CLOSE); pop(); //SCALE 4 push(); translate(185, 190); scale(0.5, 0.5); rotate(1.5); fill(this.scale4Color); beginShape(); vertex(226, 160); bezierVertex(240, 140, 240, 100, 260, 160); endShape(CLOSE); pop(); //SCALE 5 push(); translate(205, 192); scale(0.5, 0.5); rotate(5); fill(this.scale5Color); beginShape(); vertex(226, 160); bezierVertex(240, 140, 240, 100, 260, 160); endShape(CLOSE); pop(); //SCALE 6 push(); translate(220, 200); scale(0.5, 0.5); rotate(5); fill(this.scale6Color); beginShape(); vertex(226, 160); bezierVertex(240, 140, 240, 100, 260, 160); endShape(CLOSE); pop(); //SCALE 7 push(); translate(257, 220); scale(0.4, 0.4); rotate(6); fill(this.scale7Color); beginShape(); vertex(226, 160); bezierVertex(240, 140, 240, 100, 260, 160); endShape(CLOSE); pop(); } showDragon() { //BODY fill(this.bodyColor); beginShape(); vertex(220, 230); bezierVertex(160, 340, 330, 340, 270, 230); endShape(CLOSE); //tail push(); translate(-6, 2); fill(this.bodyColor); beginShape(); vertex(272, 295); bezierVertex(287, 230, 343, 295, 360, 290); endShape(CLOSE); pop(); push(); translate(250, 250); rotate(12); scale(0.5, 0.17); beginShape(); vertex(23, 123); quadraticVertex(256, 19, 490, 300); bezierVertex(426, 100, 210, 200, 20, 290); endShape(CLOSE); pop(); //belly beginShape(); fill(250, 239, 207); vertex(238, 230); bezierVertex(170, 325, 320, 325, 250, 230); endShape(CLOSE); //HEAD push(); translate(-18, -5); scale(1.07, 1.03); noStroke(); fill(this.faceColor); beginShape(); vertex(200, 200); bezierVertex(190, 140, 300, 140, 290, 200); endShape(CLOSE); beginShape(); vertex(200, 200); bezierVertex(170, 250, 320, 250, 290, 200); endShape(CLOSE); pop(); //FACE //eyes fill(0); circle(223, 204, 10); circle(265, 204, 10); }}// class Scale {// constructor(color1, color2, color3, color4, color5, color6) {// this.color1 = color1;// this.color2 = color2;// this.color3 = color3;// // rotation = ???// }// showScale() {// //SCALE 1// fill(this.color1);// beginShape();// vertex(226, 160);// // vertex(this.x, this.y)// bezierVertex(240, 140, 240, 100, 260, 160);// endShape(CLOSE);// push();// translate(30, 20)// fill(255, 0, 0, 70);// beginShape();// vertex(226, 160);// // vertex(this.x, this.y)// bezierVertex(240, 140, 240, 100, 260, 160);// endShape(CLOSE);// pop();// }// }function printMouseCoordinates() { print(mouseX + "," + mouseY);}