Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	Rotated Rect Buttons
ID	5809515444256768
Created	4 years ago, 1623673736541
Updated	4 years ago, 1636161475641
Code	/* Rotated Rect Buttons (and Scenes) Gray Wolf, June 2021 NOTE: This is NOT a game :p Someone asked me how to do rotated rect buttons. I had a look on KA and saw quite a few programs that had ways of detecting point to rotated rect collisions, but couldn't find anything that had actual rotated rect buttons - so decided to make this one :D This program shows how to: - create and use Rotated Rectangle buttons - switch scenes when you click on a button If you wanted to see how to use normal Rectangle or Circle buttons, go here: https://www.khanacademy.org/cs/scenes-and-buttons-how-to/5381277884956672 CREDITS: The point to rotated rect collision code by Cavan P (AKA Loyalty) https://www.khanacademy.org/cs/i/5506946198224896 The logic is controlled by a variable called scene that determines which scene should be displayed. var scene = "home"; //initially set to home When you click on a button it will change the value of the scene variable. In the draw function it will look at the value of scene and run that particular scene. This example has four scenes, Home, How, Shop and Play. Each scene has: - a title and some content - buttons: -- Home scene has buttons that take you to the How, Shop and Play scenes -- How, Shop and Play scenes each have a Home button that take you back to the Home scene The Button object has the following properties: - x and y (center point of the button) - w and h (width and height of the button) - angle (the rotation of the button) - backColor, backColorHover, textColor, textColorHover and textSize - content (what you want to display on the button) - func (a function that defines what you want to do when the button is clicked) / //default font textFont(createFont("Trebuchet MS")); //Used to handle the mouse being clicked var clicked = false, hover = false; mouseClicked = function () { clicked = true; }; //Rotated Rect Button object var Button = (function() { Button = function(args) { this.x = args.x \|\| 0; this.y = args.y \|\| 0; this.w = args.w \|\| 120; this.h = args.h \|\| 50; this.angle = args.angle \|\| 0; this.backColor = args.backColor \|\| color(0, 190, 165); this.backColorHover = args.backColorHover \|\| color(23, 209, 184); this.textColor = args.textColor \|\| color(50, 50, 50); this.textColorHover = args.textColorHover \|\| color(30, 30, 30); this.textSize = args.textSize \|\| this.w 0.18; this.content = args.content \|\| ""; this.func = args.func; this.hover = false; }; //checks if the mouse is over the button Button.prototype.over = function() { //Collision code by Cavan P (AKA Loyalty) var relX = mouseX - this.x; var relY = mouseY - this.y; var rotX = relX * cos(-this.angle) - relY * sin(-this.angle); var rotY = relX * sin(-this.angle) + relY * cos(-this.angle); var dx = max(abs(rotX) - this.w / 2, 0); var dy = max(abs(rotY) - this.h / 2, 0); return sq(dx) + sq(dy) === 0; }; //draws the button Button.prototype.draw = function() { //Get whether or not the mouse is over the button this.hover = this.over(); //Draw the button noStroke(); //Set the fill color based on the value of hover fill(this.hover ? this.backColorHover : this.backColor); pushMatrix(); translate(this.x, this.y); rotate(this.angle); pushStyle(); rectMode(CENTER); rect(0, 0, this.w, this.h); textAlign(CENTER, CENTER); textSize(this.textSize); //Set the fill color based on the value of hover fill(this.hover ? this.textColorHover : this.textColor); text(this.content, 0, 0); popStyle(); popMatrix(); //If the mouse is over the button if(this.hover) { //Set the global hover variable to true hover = true; //If the user clicked the mouse if(clicked) { //Run the function that was passed in for the button this.func(); } } }; return Button; })(); /* Define a variable to determine what scene to display I've set it to "home" so the home scene displays initially / var scene = "home"; / An object that holds the buttons for each scene This allows us to group the buttons nicely / var buttons = { home: { //buttons for the Home scene how: new Button({ x: 95, y: 185, angle: -25, content: "How", func: function() { scene = "how"; } }), play: new Button({ x: 200, y: 295, w: 150, h: 80, backColor: color(0, 105, 120), backColorHover: color(10, 125, 140), textColor: color(240), textColorHover: color(250), textSize: 48, angle: 0, content: "Play", func: function() { scene = "play"; } }), shop: new Button({ x: 305, y: 185, angle: 25, content: "Shop", func: function() { scene = "shop"; } }) }, how: { //buttons for the How scene home: new Button({ x: 370, y: 350, w: 80, h: 45, textSize: 18, angle: 90, content: "Home", func: function() { scene = "home"; } }) }, shop: { //buttons for the Shop scene home: new Button({ x: 200, y: 340, angle: -20, content: "Home", func: function() { scene = "home"; } }) }, play: { //buttons for the Play scene home: new Button({ x: 200, y: 275, w: 80, h: 60, textSize: 20, angle: 0, content: "Home", func: function() { scene = "home"; } }) } }; //The home scene var home = function() { background(240); pushStyle(); textAlign(CENTER); //Title textSize(40); fill(50); text("Rotated Rect\nButtons", 200, 60); popStyle(); //Display the how/shop/play buttons for(var key in buttons.home) { buttons.home[key].draw(); } //Or you could just do: // buttons.home.how.draw(); // buttons.home.shop.draw(); // buttons.home.play.draw(); //Rotate the Play button in a swinging motion buttons.home.play.angle = sin(frameCount 3) * 20; }; //The how scene var how = function() { background(240); pushStyle(); textAlign(CENTER); //Title textSize(40); fill(0); text("How", 200, 100); //Content textSize(18); fill(0); text("This is some text on the How scene", 200, 150); popStyle(); //Draw the Home button buttons.how.home.draw(); }; //The shop scene var shop = function() { background(240); pushStyle(); textAlign(CENTER); //Title textSize(40); fill(0); text("Shop", 200, 100); //Content textSize(18); fill(0); text("This is some text on the Shop scene", 200, 150); popStyle(); //Draw the Home button buttons.shop.home.draw(); }; //The play scene var play = function() { background(240); pushStyle(); textAlign(CENTER); //Title textSize(40); fill(0); text("Play", 200, 100); //Content textSize(18); fill(0); text("This is some text on the Play scene", 200, 150); popStyle(); //Draw the Home button buttons.play.home.draw(); //Rotate the Home button buttons.play.home.angle = frameCount * 2; }; draw = function() { background(255); //Check to see what the value of scene is switch(scene) { case "home": //if scene is "home" home(); //display the home scene break; case "how": //if scene is "how" how(); //display the how scene break; case "shop": //if scene is "shop" shop(); //display the shop scene break; case "play": //if scene is "play" play(); //display the play scene break; } //The if statement below does the same as the switch statement /* if(scene === "home") { home(); } else if(scene === "how") { how(); } else if(scene === "shop") { shop(); } else if(scene === "play") { play(); } */ //Display the pointer cursor if over a button //Otherwise just display the default cursor cursor(hover ? 'pointer' : 'default'); //Reset hover and clicked to false hover = false; clicked = false; };
Folds	56,122,134,210,213,236,239,256,259,276,279,299
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgP3Ck_eoCgw
Votes	172
Spin-Offs	5
Type	PJS
Width	400
Height	400
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Gray Wolf 🐺
Author Name	grantjenkins
Author ID	kaid_639291037700385781852565
Author Profile Access	COACH

Archive Data

Added	10 months ago, 1739449276638
Updated	10 months ago, 1739449284050
Source Deleted	unknown