From e86b3083e424b6c2e5ea198ae6b0f2daae82b8c0 Mon Sep 17 00:00:00 2001 From: Leonid Vinogradov Date: Tue, 28 Nov 2023 23:46:44 +0300 Subject: [PATCH] [es] remove obsolete 'orphaned/Web/API/Canvas_API/A_basic_ray-caster' --- files/es/_redirects.txt | 2 - files/es/_wikihistory.json | 8 ---- .../canvas_api/a_basic_ray-caster/index.md | 45 ------------------- 3 files changed, 55 deletions(-) delete mode 100644 files/es/orphaned/web/api/canvas_api/a_basic_ray-caster/index.md diff --git a/files/es/_redirects.txt b/files/es/_redirects.txt index 9db401fa7e2968..94ddbe14cb563f 100644 --- a/files/es/_redirects.txt +++ b/files/es/_redirects.txt @@ -1603,7 +1603,6 @@ /es/docs/Web/API/BlobBuilder /es/docs/web/api/blob /es/docs/Web/API/CSSStyleSheet.insertRule /es/docs/Web/API/CSSStyleSheet/insertRule /es/docs/Web/API/CanvasImageSource /es/docs/web/api/canvasrenderingcontext2d -/es/docs/Web/API/Canvas_API/A_basic_ray-caster /es/docs/orphaned/Web/API/Canvas_API/A_basic_ray-caster /es/docs/Web/API/Canvas_API/Tutorial/Compositing/Ejemplo /es/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation /es/docs/Web/API/Canvas_API/Tutorial/Compositing/Example /es/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation /es/docs/Web/API/Console/tabla /es/docs/Web/API/console/table_static @@ -2009,7 +2008,6 @@ /es/docs/Web/HTML/Atributos_de_configuracion_CORS /es/docs/Web/HTML/Attributes/crossorigin /es/docs/Web/HTML/Block-level_elements /es/docs/Glossary/Block-level_content /es/docs/Web/HTML/Canvas /es/docs/Web/API/Canvas_API -/es/docs/Web/HTML/Canvas/A_basic_ray-caster /es/docs/orphaned/Web/API/Canvas_API/A_basic_ray-caster /es/docs/Web/HTML/Consejos_para_la_creación_de_páginas_HTML_de_carga_rápida /es/docs/Learn/HTML/Howto/Author_fast-loading_HTML_pages /es/docs/Web/HTML/Element/basefont /es/docs/conflicting/Web/CSS/CSS_Fonts /es/docs/Web/HTML/Element/bgsound /es/docs/Web/HTML/Element/audio diff --git a/files/es/_wikihistory.json b/files/es/_wikihistory.json index ad244b8ca86f2d..e3e08961f57a62 100644 --- a/files/es/_wikihistory.json +++ b/files/es/_wikihistory.json @@ -15049,10 +15049,6 @@ "modified": "2020-10-15T22:29:20.361Z", "contributors": ["camsa"] }, - "orphaned/Web/API/Canvas_API/A_basic_ray-caster": { - "modified": "2019-03-19T08:57:21.057Z", - "contributors": ["AzazelN28", "Fandres91", "dkocho4", "preteric"] - }, "orphaned/Web/API/ChildNode": { "modified": "2019-03-29T14:12:39.589Z", "contributors": ["jpmedley"] @@ -15299,10 +15295,6 @@ "jesanchez" ] }, - "orphaned/Web/HTML/Element/blink": { - "modified": "2019-10-10T16:37:40.291Z", - "contributors": ["teoli", "jcr4"] - }, "orphaned/Web/HTML/Element/command": { "modified": "2019-10-05T04:48:52.506Z", "contributors": ["titox", "jcr4"] diff --git a/files/es/orphaned/web/api/canvas_api/a_basic_ray-caster/index.md b/files/es/orphaned/web/api/canvas_api/a_basic_ray-caster/index.md deleted file mode 100644 index 6300ee8774fb82..00000000000000 --- a/files/es/orphaned/web/api/canvas_api/a_basic_ray-caster/index.md +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: A basic ray-caster -slug: orphaned/Web/API/Canvas_API/A_basic_ray-caster -original_slug: Web/API/Canvas_API/A_basic_ray-caster ---- - -{{DefaultAPISidebar("Canvas API")}} - -Este artículo proporciona un interesante ejemplo de la vida real usando el elemento {{HTMLElement("canvas")}} para renderizar un sencillo entorno 3D usando una técnica de render llamada ray-casting. - -{{EmbedGHLiveSample("canvas-raycaster/index.html", 900, 300)}} - -**[Abrir en una nueva ventana](http://mdn.github.io/canvas-raycaster/)** - -## ¿Por qué? - -Después de darme cuenta, para mi satisfacción, de que el ingenioso elemento \ sobre el que había estado leyendo, no sólo iba a recibir soporte por parte de Firefox, sino que **ya estaba** soportado por la versión actual de Safari, así que tenía que ponerme manos a la obra y hacer un pequeño experimento. - -El [tutorial](/es/docs/Canvas_tutorial) y el [resumen](/es/docs/Web/API/Canvas_API) que encontré en la MDN son geniales, pero nadie había escrito nada (todavía) sobre animación, así que pensé que sería una buena oportunidad para portar un sencillo raycaster en el que había trabajado hacía tiempo y comprobar qué tipo de rendimiento podía esperar de un buffer de pixeles controlado por JavaScript. - -## ¿Cómo? - -La idea es sencilla, usar {{domxref("WindowTimers.setInterval","setInterval()")}} con un retraso arbitrario que se corresponde con la velocidad de fotogramas deseada. Por cada llamada al intervalo se ejecutará una función que volverá a pintar el elemento \ en el que se muestra la vista actual del usuario. Sé que podría haber empezado con un ejemplo más simple, pero creo que el [tutorial](/es/docs/Web/API/Canvas_API/Tutorial/Basic_animations) sobre \ vale para eso, y quería ver si podía hacer esto. - -Continuemos, por cada actualización, el raycaster comprueba si has presionado alguna tecla, si no has presionado ninguna se mantendrán los cálculos para ahorrar tiempo de ejecución. Si se ha presionado alguna tecla, el \ es borrado, el suelo y el cielo son pintados, la posición y la orientación de la cámara son actualizados, y los rayos son lanzados. Según van intersectando los rayos con las paredes se van pintando líneas verticales de pared del color de la pared con la que han colisionado, mezcladas con una versión más oscura del color en función de la distancia a la que se encuentra la pared. La altura de la línea vertical depende directamente de la distancia a la que el rayo es interesectado, dibujándose centrada con respecto la línea del horizonte. - -El código que he terminado usando es una amalgama regurgitada del código que aparece en los capítulos sobre raycasting del libro de André LaMothe _Tricks of the Game Programming Gurus_ y una [versión en java de un raycaster](http://www.shinelife.co.uk/java-maze/) que encontré online, a su vez pasado por el filtro de mi pulsión a renombrar todo para que tenga sentido para mí y todo el chapuceo necesario para que las cosas funcionen bien. - -## Resultados - -El \ en Safari 2.0.1 rindió sorprendentemente bien. Renderizando columnas de 8 pixeles de ancho, puedo correr una ventana de 320 x 240 a 24 FPS en mi Apple Mini. Firefox 1.5 Beta 1 es incluso más rápido; puedo correr una ventana de 320 x 240 a 24 FPS con columnas de 4 píxeles de ancho. No es exactamente un nuevo miembro de la familia de ID Software, pero es bastante decente teniendo en cuenta que es un entorno completamente interpretado, y que no me he tenido que preocupar de reservar memoria, ni modos de vídeo o escribir rutinas en ensamblador. Aún así el código intenta ser lo más eficiente posible, usando tablas de acceso rápido para valores precalculados, pero no soy ningún gurú de la optimización, así que seguramente haya varias cosas que se puedan escribir más rápido. - -Además, deja bastante que desear en términos de intentar convertir esto en un motor de juego - no hay texturas en las paredes, no hay sprites, no hay puertas, ni siquiera hay teletransportadores que te permitan ir a otro nivel. Pero tengo bastante confianza en que todas esas cosas se podrían añadir con el suficiente tiempo disponible. La API de canvas soporta copiado de píxeles de imágenes, así que tener texturas parece bastante factible. Dejaré esto para otro artículo, seguramente para otra persona. =) - -## El ray-caster - -El gente tan maravillosa que hay aquí han copiado manualmente mis archivos así vosotros podéis echarle un [vistazo](http://mdn.github.io/canvas-raycaster/), y para vuestro disfrute he puesto los archivos individuales como listados de código (ver abajo). - -¡Así que aquí lo tenéis, arrancad Safari 1.3+ o Firefox 1.5+ o cualquier otro navegador que soporte el elemento `` y a disfrutar! - -[input.js](https://github.com/mdn/canvas-raycaster/blob/master/input.js) | [Level.js](https://github.com/mdn/canvas-raycaster/blob/master/Level.js) | [Player.js](https://github.com/mdn/canvas-raycaster/blob/master/Player.js) | [RayCaster.html](https://github.com/mdn/canvas-raycaster/blob/master/index.html) | [RayCaster.js](https://github.com/mdn/canvas-raycaster/blob/master/RayCaster.js) | [trace.css](https://github.com/mdn/canvas-raycaster/blob/master/trace.css) | [trace.js](https://github.com/mdn/canvas-raycaster/blob/master/trace.js) - -## Ver también - -- [Tutorial de canvas](/es/docs/Web/API/Canvas_API/Tutorial)