Simple geometry
How do I make an simple geometry?
Canvas 2D experiment : Creating and rotating paths, using Context.save(), and Context.restore(). What is a simple geometry? How do you make a simple geometry? This script and codes were developed by Josep Antoni Bover Comas on 27 August 2022, Saturday.
Simple geometry - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple geometry</title>
</head>
<body> <!-- Simplified object for 2D and THREE.js canvas (designed for my web page banners and for doing tests with them) -->
<!-- Can work in 2 ways, normal / test mode, and banner mode (for my web page headers) -->
<script src='https://devildrey33.es/Ejemplos/Utils/ObjetoCanvas.js'></script>
<link rel='stylesheet' href='https://devildrey33.es/Ejemplos/Utils/ObjetoCanvas.css'></link> <script src="js/index.js"></script>
</body>
</html>
Simple geometry - Script Codes JS Codes
/* Plantilla para crear banners animados en devildrey33.es */
var ObjetoCanvas_Depurar = false; // Si es true, no se parará la animación al perder el foco del teclado
// Constructor SIN TIPO, el tipo se especifica según la animación
var GeometrieaBasica = function() { // Llamo al constructor del ObjetoBanner if (ObjetoCanvas.call(this, { 'Tipo' : '2d', 'Ancho' : 'Auto', 'Alto' : 'Auto', 'Entorno' : 'Normal', 'Idioma' : 'en', 'MostrarFPS' : true, 'ElementoRaiz' : document.body, 'CapturaEjemplo': "GeometriaBasica.png" }) === false) { return false; } // Se ha creado el canvas, inicio los valores de la animación ... this.Iniciar(); // Esconde la ventana que informa al usuario de que se está cargando la animación. (REQUERIDO) this.Cargando(false);
};
GeometrieaBasica.prototype = Object.assign( Object.create(ObjetoCanvas.prototype), { constructor : GeometrieaBasica, // Función que se llama al redimensionar el documento Redimensionar : function() { }, // Función que se llama al hacer scroll en el documento Scroll : function() { }, // Función que se llama al mover el mouse por el canvas MouseMove : function(Evento) { this.Mouse = { X : Evento.clientX, Y : Evento.clientY }; }, // Función que se llama al presionar un botón del mouse por el canvas MousePresionado : function(Evento) { }, // Función que se llama al soltar un botón del mouse por el canvas MouseSoltado : function(Evento) { }, // Función que se llama al entrar con el mouse en el canvas MouseEnter : function(Evento) { }, // Función que se llama al salir con el mouse del canvas MouseLeave : function(Evento) { }, // Función que se llama al presionar una tecla TeclaPresionada : function(Evento) { }, // Función que se llama al soltar una tecla TeclaSoltada : function(Evento) { }, TotalFiguras : 150, Figuras : [], Figura : function(Ancho, Alto) { this.X = Rand(Ancho, 0); this.Y = Alto + 50; this.Tam = Rand(15, 35); this.Velocidad = Rand(2, 0.02); this.Tipo = RandInt(3, 0); /* 0 Cuadrado, 1 Circulo, 2 Triangulo */ this.Opacidad = 1; this.VelocidadOpacidad = Rand(0.007, 0.0009); this.Rotacion = 0; /* de 0 a Math.PI * 2 */ this.VelocidadRotacion = Rand(0.05, -0.05); this.Angulo = Rand(Math.PI * 2 , 0); this.Avance = function(MouseX, MouseY, Ancho) { // Rotación del objeto; this.Rotacion += this.VelocidadRotacion; this.Opacidad -= this.VelocidadOpacidad; // Posición del objeto
// var Angulo = Math.atan2(MouseY, MouseX) * (180 / Math.PI); //var aY = Alto - this.Y; this.X += Math.cos(this.Angulo) * this.Velocidad; this.Y += Math.sin(this.Angulo) * this.Velocidad; // s'ha d'incloure el tamany de la figura en els calculs de les coordenades if (this.Opacidad < 0 || this.Y < -this.Tam || this.X > Ancho + this.Tam || this.X < -this.Tam) { return false; } return true; }; }, Iniciar : function() { this.Mouse = { X : this.Ancho / 2, Y : this.Alto / 2 }; for (var i = 0; i < this.TotalFiguras; i++) { this.Figuras[i] = new this.Figura(this.Ancho, this.Alto); } }, PintarCuadrado : function(X, Y, Tam, Rotacion) { this.Context.save(); this.Context.translate(X, Y); this.Context.rotate(Rotacion); this.Context.fillRect(-Tam / 2, -Tam / 2, Tam, Tam); this.Context.restore(); }, PintarTriangulo : function(X, Y, Tam, Rotacion) { this.Context.save(); this.Context.translate(X, Y); this.Context.rotate(Rotacion); this.Context.moveTo(0, (Tam) * 0.66); this.Context.lineTo(Tam, -Tam); this.Context.lineTo(-Tam, -Tam); this.Context.closePath(); this.Context.fill();
// this.Context.fillRect(-Tam, -Tam, Tam * 2, Tam *2); this.Context.restore(); }, // Función que pinta cada frame de la animación Pintar : function() { this.Context.fillStyle = 'rgb(49, 46, 53)'; this.Context.fillRect(0, 0, this.Ancho, this.Alto); for (var i = this.Figuras.length - 1; i > 0; i--) { if (this.Figuras[i].Avance(this.Mouse.X, this.Mouse.Y, this.Ancho) === false) { // La figura ha terminado la animación, creo una nueva this.Figuras[i] = new this.Figura(this.Ancho, this.Alto); } this.Context.fillStyle = 'rgba(255, 46, 53, ' + this.Figuras[i].Opacidad +' )'; this.Context.beginPath(); if (this.Figuras[i].Tipo === 0) { this.PintarCuadrado(this.Figuras[i].X, this.Figuras[i].Y, this.Figuras[i].Tam, this.Figuras[i].Rotacion); } else if (this.Figuras[i].Tipo === 1) { this.Context.arc(this.Figuras[i].X, this.Figuras[i].Y, this.Figuras[i].Tam, 0, Math.PI * 2); } else if (this.Figuras[i].Tipo === 2) { this.PintarTriangulo(this.Figuras[i].X, this.Figuras[i].Y, this.Figuras[i].Tam, this.Figuras[i].Rotacion); } this.Context.fill(); } }
});
var Canvas = null;
window.addEventListener('load', function() { Canvas = new GeometrieaBasica; });
Developer | Josep Antoni Bover Comas |
Username | devildrey33 |
Uploaded | August 27, 2022 |
Rating | 3 |
Size | 3,272 Kb |
Views | 24,288 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Anillos | 2,693 Kb |
ObjetoAnimacion | 3,303 Kb |
Hex Tunnel 0.2 | 4,287 Kb |
3D Audio Analyzer | 12,951 Kb |
Sphere vertex shader | 4,659 Kb |
CSS Loader Cassette | 2,671 Kb |
WormHole | 3,428 Kb |
3D Audio Analyzer 0.2 | 8,929 Kb |
Hex Tunnel 0.5 | 4,865 Kb |
Adiestramiento de cubos | 6,029 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Rrremark.com Overlay Highlighter | Derickruiz | 4,438 Kb |
Material Design-Layout-Principles Practice | Fraina | 2,331 Kb |
Sticky Navbar | Phantomesse | 5,106 Kb |
Pure CSS Tooltips | Mobius1 | 2,271 Kb |
Dice | Fraina | 5,026 Kb |
CSS3 Butterfly | Timohausmann | 3,430 Kb |
Cartoon Bomb | Tcmulder | 4,929 Kb |
Codero Sitemap | S1m0ne | 28,169 Kb |
Blank Starter | Mhartington | 2,171 Kb |
Portfolio Layout Flex | Lahvjal | 3,489 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!