SlideShare ist ein Scribd-Unternehmen logo
1 von 20
Downloaden Sie, um offline zu lesen
Canvas: we must go deeper

                Szymon Piłkowski
   (freelancer, previously crytek & bigpoint)

            http://twitter.com/ard
Canvas?!




The canvas element provides scripts with a resolution-
dependent bitmap canvas, which can be used for
rendering graphs, game graphics, or other visual images
on the fly.
Canvas is a bitmap

•   one-dimensional array

•   [R,G,B,A,// pixel 0,0
     R,G,B,A,// pixel 1,0
     R,G,B,A,// pixel 2,0 (...)
    ]

•   point 0,0 placed in top left corner
Canvas basics
•   Immediate access (almost)

•   Low-level API




•   No scene graph, no direct access to drawn elements

•   Basic animation = redrawing everything each frame
Drawing on canvas




    (example from MDN)
Simple Game Loop
Pre-rendering / Buffering

•   Buffer is a copy of bitmap state (single frame) which is
    kept in memory

•   Buffers are known in Computer Graphics for 40 years

•   Using buffers you’re able to save and restore drawn
    states

•   ... and you can use them in JavaScript, too
Buffers in JS
• Wrong way:


• Slow, slow, slow
• still popular
Buffers in JS
• Good way
    context.drawImage: “can take either an HTMLImageElement,
    an HTMLCanvasElement, or an HTMLVideoElement for the image
    argument.”




    (another way: use toDataURL method)

•   As fast as drawing normal images
Buffers: performance
    optimisation
Buffers in games




(image from isocity by Rob Evans)
Render cycle
   Background layer (rendered once, never
   cleared)



    Static layer (rendered anew when
    invalidated)


    Dynamic layer (rendered anew each
    frame)
Render cycle (code)



 (needs to be tweaked per game)
Pre-processing sprites
• Saving disk space
• Saving designers time
• Improving the pipeline


 (from onslaught! arena case study on html5rocks.com)
Pre-processing sprites
Collision detection

• Problem: canvas is just a bitmap.
• You can’t attach events to drawn objects
• Detecting collision between a point (mouse
  pointer) and any rendered shape (image or
  primitive) is not straight-forward
Hitmap / Collision map

  1. map objects to unique colors
Hitmap / Collision map
  2. store in memory a copy of each
  object drawn in single color (using
        composite operations)
Hitmap / Collision map
3. when checking collisions, do a single render
          of candidates to a buffer



4. grab color from point and compare with
                 colorMap
end()

•   questions?

•   http://twitter.com/ard

•   szymon.pilkowski@gmail.com

•   Thanks!

Weitere ähnliche Inhalte

Was ist angesagt?

Overview of graphics systems
Overview of  graphics systemsOverview of  graphics systems
Overview of graphics systemsJay Nagar
 
Animation software by Er. Suvisha Gupta
Animation software by Er. Suvisha GuptaAnimation software by Er. Suvisha Gupta
Animation software by Er. Suvisha GuptaSuvisha Gupta
 
Computer animation Computer Graphics
Computer animation Computer Graphics Computer animation Computer Graphics
Computer animation Computer Graphics University of Potsdam
 
【Unite 2017 Tokyo】スクリプタブル・レンダーパイプラインのカスタマイズと拡張
【Unite 2017 Tokyo】スクリプタブル・レンダーパイプラインのカスタマイズと拡張【Unite 2017 Tokyo】スクリプタブル・レンダーパイプラインのカスタマイズと拡張
【Unite 2017 Tokyo】スクリプタブル・レンダーパイプラインのカスタマイズと拡張Unite2017Tokyo
 
TMD2063 | Digital Animation - Chapter 2
TMD2063 | Digital Animation - Chapter 2TMD2063 | Digital Animation - Chapter 2
TMD2063 | Digital Animation - Chapter 2Diyana Harithuddin
 
Computer Graphics
Computer GraphicsComputer Graphics
Computer GraphicsAdri Jovin
 
How Facebook cut image load times in half
How Facebook cut image load times in halfHow Facebook cut image load times in half
How Facebook cut image load times in halfTyrone Nicholas
 
Facebook tricks for image handling in Android
Facebook tricks for image handling in AndroidFacebook tricks for image handling in Android
Facebook tricks for image handling in AndroidTyrone Nicholas
 
Computer_Graphics_basic_definitions_summary
Computer_Graphics_basic_definitions_summaryComputer_Graphics_basic_definitions_summary
Computer_Graphics_basic_definitions_summaryDr. Mohamed Kazim
 
Armand Rousso describes about the Computer graphic
Armand Rousso describes about the Computer graphicArmand Rousso describes about the Computer graphic
Armand Rousso describes about the Computer graphicArmand Rousso
 
Animation techniques for CG students
Animation techniques for CG studentsAnimation techniques for CG students
Animation techniques for CG studentsMahith
 
Smedberg niklas bringing_aaa_graphics
Smedberg niklas bringing_aaa_graphicsSmedberg niklas bringing_aaa_graphics
Smedberg niklas bringing_aaa_graphicschangehee lee
 

Was ist angesagt? (20)

Overview of graphics systems
Overview of  graphics systemsOverview of  graphics systems
Overview of graphics systems
 
Deepak
DeepakDeepak
Deepak
 
Animation software by Er. Suvisha Gupta
Animation software by Er. Suvisha GuptaAnimation software by Er. Suvisha Gupta
Animation software by Er. Suvisha Gupta
 
Computer animation Computer Graphics
Computer animation Computer Graphics Computer animation Computer Graphics
Computer animation Computer Graphics
 
ANIMATION SEQUENCE
ANIMATION SEQUENCEANIMATION SEQUENCE
ANIMATION SEQUENCE
 
【Unite 2017 Tokyo】スクリプタブル・レンダーパイプラインのカスタマイズと拡張
【Unite 2017 Tokyo】スクリプタブル・レンダーパイプラインのカスタマイズと拡張【Unite 2017 Tokyo】スクリプタブル・レンダーパイプラインのカスタマイズと拡張
【Unite 2017 Tokyo】スクリプタブル・レンダーパイプラインのカスタマイズと拡張
 
TMD2063 | Digital Animation - Chapter 2
TMD2063 | Digital Animation - Chapter 2TMD2063 | Digital Animation - Chapter 2
TMD2063 | Digital Animation - Chapter 2
 
Computer Graphics
Computer GraphicsComputer Graphics
Computer Graphics
 
Animation
AnimationAnimation
Animation
 
How Facebook cut image load times in half
How Facebook cut image load times in halfHow Facebook cut image load times in half
How Facebook cut image load times in half
 
Computer Graphics
Computer GraphicsComputer Graphics
Computer Graphics
 
Facebook tricks for image handling in Android
Facebook tricks for image handling in AndroidFacebook tricks for image handling in Android
Facebook tricks for image handling in Android
 
Ch06
Ch06Ch06
Ch06
 
Animation
AnimationAnimation
Animation
 
Computer_Graphics_basic_definitions_summary
Computer_Graphics_basic_definitions_summaryComputer_Graphics_basic_definitions_summary
Computer_Graphics_basic_definitions_summary
 
Animations
AnimationsAnimations
Animations
 
Armand Rousso describes about the Computer graphic
Armand Rousso describes about the Computer graphicArmand Rousso describes about the Computer graphic
Armand Rousso describes about the Computer graphic
 
Animation techniques for CG students
Animation techniques for CG studentsAnimation techniques for CG students
Animation techniques for CG students
 
VFX
VFXVFX
VFX
 
Smedberg niklas bringing_aaa_graphics
Smedberg niklas bringing_aaa_graphicsSmedberg niklas bringing_aaa_graphics
Smedberg niklas bringing_aaa_graphics
 

Andere mochten auch

Inleiding social media
Inleiding social media Inleiding social media
Inleiding social media Lara Simons
 
Malta Ltd Company Formation - A Walk Through - 2014 - Acumum Legal & Advisory
Malta Ltd Company Formation - A Walk Through - 2014 - Acumum Legal & AdvisoryMalta Ltd Company Formation - A Walk Through - 2014 - Acumum Legal & Advisory
Malta Ltd Company Formation - A Walk Through - 2014 - Acumum Legal & AdvisoryAcumum - Legal & Advisory
 
fanscala1 1 インストールとreplまで
fanscala1 1 インストールとreplまでfanscala1 1 インストールとreplまで
fanscala1 1 インストールとreplまでToshiki Shinozaki
 
Summary Bisnis Plan Mikro Financing
Summary Bisnis Plan Mikro FinancingSummary Bisnis Plan Mikro Financing
Summary Bisnis Plan Mikro FinancingAmal Rifadly
 
Haskell vs. F# vs. Scala
Haskell vs. F# vs. ScalaHaskell vs. F# vs. Scala
Haskell vs. F# vs. Scalapt114
 
History of photography
History of photographyHistory of photography
History of photographymeganbvb
 
Закон об Aвиации Регистрация & Сервис - Мальтийская Международная Правовая фи...
Закон об Aвиации Регистрация & Сервис - Мальтийская Международная Правовая фи...Закон об Aвиации Регистрация & Сервис - Мальтийская Международная Правовая фи...
Закон об Aвиации Регистрация & Сервис - Мальтийская Международная Правовая фи...Acumum - Legal & Advisory
 
Malta Investor Funds - A Walk Through - By Acumum; Legal & Advisory
Malta Investor Funds - A Walk Through - By Acumum; Legal & AdvisoryMalta Investor Funds - A Walk Through - By Acumum; Legal & Advisory
Malta Investor Funds - A Walk Through - By Acumum; Legal & AdvisoryAcumum - Legal & Advisory
 
Malta - Tax Efficient Asset Structuring by Acumum
Malta - Tax Efficient Asset Structuring by AcumumMalta - Tax Efficient Asset Structuring by Acumum
Malta - Tax Efficient Asset Structuring by AcumumAcumum - Legal & Advisory
 

Andere mochten auch (18)

Inleiding social media
Inleiding social media Inleiding social media
Inleiding social media
 
fanscala1 3 sbt
fanscala1 3 sbtfanscala1 3 sbt
fanscala1 3 sbt
 
篠崎Lt20160909
篠崎Lt20160909篠崎Lt20160909
篠崎Lt20160909
 
Protest 簡介
Protest 簡介Protest 簡介
Protest 簡介
 
Malta Ltd Company Formation - A Walk Through - 2014 - Acumum Legal & Advisory
Malta Ltd Company Formation - A Walk Through - 2014 - Acumum Legal & AdvisoryMalta Ltd Company Formation - A Walk Through - 2014 - Acumum Legal & Advisory
Malta Ltd Company Formation - A Walk Through - 2014 - Acumum Legal & Advisory
 
fanscala1 2 scalaの基本
fanscala1 2 scalaの基本fanscala1 2 scalaの基本
fanscala1 2 scalaの基本
 
Malta’s Remittance System
Malta’s Remittance SystemMalta’s Remittance System
Malta’s Remittance System
 
fanscala1 1 インストールとreplまで
fanscala1 1 インストールとreplまでfanscala1 1 インストールとreplまで
fanscala1 1 インストールとreplまで
 
fanscala1 4 その他資料
fanscala1 4 その他資料fanscala1 4 その他資料
fanscala1 4 その他資料
 
Summary Bisnis Plan Mikro Financing
Summary Bisnis Plan Mikro FinancingSummary Bisnis Plan Mikro Financing
Summary Bisnis Plan Mikro Financing
 
Haskell vs. F# vs. Scala
Haskell vs. F# vs. ScalaHaskell vs. F# vs. Scala
Haskell vs. F# vs. Scala
 
History of photography
History of photographyHistory of photography
History of photography
 
Maritime by Acumum
Maritime by AcumumMaritime by Acumum
Maritime by Acumum
 
Закон об Aвиации Регистрация & Сервис - Мальтийская Международная Правовая фи...
Закон об Aвиации Регистрация & Сервис - Мальтийская Международная Правовая фи...Закон об Aвиации Регистрация & Сервис - Мальтийская Международная Правовая фи...
Закон об Aвиации Регистрация & Сервис - Мальтийская Международная Правовая фи...
 
Malta Investor Funds - A Walk Through - By Acumum; Legal & Advisory
Malta Investor Funds - A Walk Through - By Acumum; Legal & AdvisoryMalta Investor Funds - A Walk Through - By Acumum; Legal & Advisory
Malta Investor Funds - A Walk Through - By Acumum; Legal & Advisory
 
篠崎Lt20141215
篠崎Lt20141215篠崎Lt20141215
篠崎Lt20141215
 
Malta - Tax Efficient Asset Structuring by Acumum
Malta - Tax Efficient Asset Structuring by AcumumMalta - Tax Efficient Asset Structuring by Acumum
Malta - Tax Efficient Asset Structuring by Acumum
 
Malta Gaming Memo - Acumum Legal & Advisory
Malta Gaming Memo - Acumum Legal & AdvisoryMalta Gaming Memo - Acumum Legal & Advisory
Malta Gaming Memo - Acumum Legal & Advisory
 

Ähnlich wie Canvas: we must go deeper

Graphicsand animations devoxx2010 (1)
Graphicsand animations devoxx2010 (1)Graphicsand animations devoxx2010 (1)
Graphicsand animations devoxx2010 (1)Marakana Inc.
 
Benoit fouletier guillaume martin unity day- modern 2 d techniques-gce2014
Benoit fouletier guillaume martin   unity day- modern 2 d techniques-gce2014Benoit fouletier guillaume martin   unity day- modern 2 d techniques-gce2014
Benoit fouletier guillaume martin unity day- modern 2 d techniques-gce2014Mary Chan
 
Данило Ульянич “C89 OpenGL for ARM microcontrollers on Cortex-M. Basic functi...
Данило Ульянич “C89 OpenGL for ARM microcontrollers on Cortex-M. Basic functi...Данило Ульянич “C89 OpenGL for ARM microcontrollers on Cortex-M. Basic functi...
Данило Ульянич “C89 OpenGL for ARM microcontrollers on Cortex-M. Basic functi...Lviv Startup Club
 
Overview of graphics systems.ppt
Overview of graphics systems.pptOverview of graphics systems.ppt
Overview of graphics systems.pptMalleshBettadapura1
 
Making a game with Molehill: Zombie Tycoon
Making a game with Molehill: Zombie TycoonMaking a game with Molehill: Zombie Tycoon
Making a game with Molehill: Zombie TycoonJean-Philippe Doiron
 
Introduction to Computer graphics
Introduction to Computer graphicsIntroduction to Computer graphics
Introduction to Computer graphicsLOKESH KUMAR
 
Mo devtablet johncromartie-graphicsperformance
Mo devtablet johncromartie-graphicsperformanceMo devtablet johncromartie-graphicsperformance
Mo devtablet johncromartie-graphicsperformancejohncromartie
 
Chapter 3 : IMAGE
Chapter 3 : IMAGEChapter 3 : IMAGE
Chapter 3 : IMAGEazira96
 
Game development terminologies
Game development terminologiesGame development terminologies
Game development terminologiesAhmed Badr
 
Prinsip gambar digital
Prinsip gambar digitalPrinsip gambar digital
Prinsip gambar digitalOno Trader
 
GJU MM Unit 3.pdf
GJU MM Unit 3.pdfGJU MM Unit 3.pdf
GJU MM Unit 3.pdfdiljots78
 
Image processing tool box.pptx
Image processing tool box.pptxImage processing tool box.pptx
Image processing tool box.pptxAvinashJain66
 
Stupid Canvas Tricks
Stupid Canvas TricksStupid Canvas Tricks
Stupid Canvas Tricksdeanhudson
 
OpenLayers 3.0
OpenLayers 3.0OpenLayers 3.0
OpenLayers 3.0Camptocamp
 
West Coast DevCon 2014: The Slate UI Framework (Part 2) - Game UI & Unreal Mo...
West Coast DevCon 2014: The Slate UI Framework (Part 2) - Game UI & Unreal Mo...West Coast DevCon 2014: The Slate UI Framework (Part 2) - Game UI & Unreal Mo...
West Coast DevCon 2014: The Slate UI Framework (Part 2) - Game UI & Unreal Mo...Gerke Max Preussner
 
TMD2063 | Digital Animation - Chapter 3
TMD2063 | Digital Animation - Chapter 3TMD2063 | Digital Animation - Chapter 3
TMD2063 | Digital Animation - Chapter 3Diyana Harithuddin
 

Ähnlich wie Canvas: we must go deeper (20)

Graphicsand animations devoxx2010 (1)
Graphicsand animations devoxx2010 (1)Graphicsand animations devoxx2010 (1)
Graphicsand animations devoxx2010 (1)
 
Benoit fouletier guillaume martin unity day- modern 2 d techniques-gce2014
Benoit fouletier guillaume martin   unity day- modern 2 d techniques-gce2014Benoit fouletier guillaume martin   unity day- modern 2 d techniques-gce2014
Benoit fouletier guillaume martin unity day- modern 2 d techniques-gce2014
 
Данило Ульянич “C89 OpenGL for ARM microcontrollers on Cortex-M. Basic functi...
Данило Ульянич “C89 OpenGL for ARM microcontrollers on Cortex-M. Basic functi...Данило Ульянич “C89 OpenGL for ARM microcontrollers on Cortex-M. Basic functi...
Данило Ульянич “C89 OpenGL for ARM microcontrollers on Cortex-M. Basic functi...
 
Overview of graphics systems.ppt
Overview of graphics systems.pptOverview of graphics systems.ppt
Overview of graphics systems.ppt
 
Making a game with Molehill: Zombie Tycoon
Making a game with Molehill: Zombie TycoonMaking a game with Molehill: Zombie Tycoon
Making a game with Molehill: Zombie Tycoon
 
Introduction to Computer graphics
Introduction to Computer graphicsIntroduction to Computer graphics
Introduction to Computer graphics
 
Unit 11. Graphics
Unit 11. GraphicsUnit 11. Graphics
Unit 11. Graphics
 
Mo devtablet johncromartie-graphicsperformance
Mo devtablet johncromartie-graphicsperformanceMo devtablet johncromartie-graphicsperformance
Mo devtablet johncromartie-graphicsperformance
 
Chapter 3
Chapter 3Chapter 3
Chapter 3
 
Chapter 3 : IMAGE
Chapter 3 : IMAGEChapter 3 : IMAGE
Chapter 3 : IMAGE
 
Game development terminologies
Game development terminologiesGame development terminologies
Game development terminologies
 
Prinsip gambar digital
Prinsip gambar digitalPrinsip gambar digital
Prinsip gambar digital
 
Cocos2d programming
Cocos2d programmingCocos2d programming
Cocos2d programming
 
GJU MM Unit 3.pdf
GJU MM Unit 3.pdfGJU MM Unit 3.pdf
GJU MM Unit 3.pdf
 
K2P workshop 3-23-13
K2P workshop 3-23-13K2P workshop 3-23-13
K2P workshop 3-23-13
 
Image processing tool box.pptx
Image processing tool box.pptxImage processing tool box.pptx
Image processing tool box.pptx
 
Stupid Canvas Tricks
Stupid Canvas TricksStupid Canvas Tricks
Stupid Canvas Tricks
 
OpenLayers 3.0
OpenLayers 3.0OpenLayers 3.0
OpenLayers 3.0
 
West Coast DevCon 2014: The Slate UI Framework (Part 2) - Game UI & Unreal Mo...
West Coast DevCon 2014: The Slate UI Framework (Part 2) - Game UI & Unreal Mo...West Coast DevCon 2014: The Slate UI Framework (Part 2) - Game UI & Unreal Mo...
West Coast DevCon 2014: The Slate UI Framework (Part 2) - Game UI & Unreal Mo...
 
TMD2063 | Digital Animation - Chapter 3
TMD2063 | Digital Animation - Chapter 3TMD2063 | Digital Animation - Chapter 3
TMD2063 | Digital Animation - Chapter 3
 

Kürzlich hochgeladen

100+ ChatGPT Prompts for SEO Optimization
100+ ChatGPT Prompts for SEO Optimization100+ ChatGPT Prompts for SEO Optimization
100+ ChatGPT Prompts for SEO Optimizationarrow10202532yuvraj
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
All in AI: LLM Landscape & RAG in 2024 with Mark Ryan (Google) & Jerry Liu (L...
All in AI: LLM Landscape & RAG in 2024 with Mark Ryan (Google) & Jerry Liu (L...All in AI: LLM Landscape & RAG in 2024 with Mark Ryan (Google) & Jerry Liu (L...
All in AI: LLM Landscape & RAG in 2024 with Mark Ryan (Google) & Jerry Liu (L...Daniel Zivkovic
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 

Kürzlich hochgeladen (20)

100+ ChatGPT Prompts for SEO Optimization
100+ ChatGPT Prompts for SEO Optimization100+ ChatGPT Prompts for SEO Optimization
100+ ChatGPT Prompts for SEO Optimization
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
All in AI: LLM Landscape & RAG in 2024 with Mark Ryan (Google) & Jerry Liu (L...
All in AI: LLM Landscape & RAG in 2024 with Mark Ryan (Google) & Jerry Liu (L...All in AI: LLM Landscape & RAG in 2024 with Mark Ryan (Google) & Jerry Liu (L...
All in AI: LLM Landscape & RAG in 2024 with Mark Ryan (Google) & Jerry Liu (L...
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 

Canvas: we must go deeper

  • 1. Canvas: we must go deeper Szymon Piłkowski (freelancer, previously crytek & bigpoint) http://twitter.com/ard
  • 2. Canvas?! The canvas element provides scripts with a resolution- dependent bitmap canvas, which can be used for rendering graphs, game graphics, or other visual images on the fly.
  • 3. Canvas is a bitmap • one-dimensional array • [R,G,B,A,// pixel 0,0 R,G,B,A,// pixel 1,0 R,G,B,A,// pixel 2,0 (...) ] • point 0,0 placed in top left corner
  • 4. Canvas basics • Immediate access (almost) • Low-level API • No scene graph, no direct access to drawn elements • Basic animation = redrawing everything each frame
  • 5. Drawing on canvas (example from MDN)
  • 7. Pre-rendering / Buffering • Buffer is a copy of bitmap state (single frame) which is kept in memory • Buffers are known in Computer Graphics for 40 years • Using buffers you’re able to save and restore drawn states • ... and you can use them in JavaScript, too
  • 8. Buffers in JS • Wrong way: • Slow, slow, slow • still popular
  • 9. Buffers in JS • Good way context.drawImage: “can take either an HTMLImageElement, an HTMLCanvasElement, or an HTMLVideoElement for the image argument.” (another way: use toDataURL method) • As fast as drawing normal images
  • 10. Buffers: performance optimisation
  • 11. Buffers in games (image from isocity by Rob Evans)
  • 12. Render cycle Background layer (rendered once, never cleared) Static layer (rendered anew when invalidated) Dynamic layer (rendered anew each frame)
  • 13. Render cycle (code) (needs to be tweaked per game)
  • 14. Pre-processing sprites • Saving disk space • Saving designers time • Improving the pipeline (from onslaught! arena case study on html5rocks.com)
  • 16. Collision detection • Problem: canvas is just a bitmap. • You can’t attach events to drawn objects • Detecting collision between a point (mouse pointer) and any rendered shape (image or primitive) is not straight-forward
  • 17. Hitmap / Collision map 1. map objects to unique colors
  • 18. Hitmap / Collision map 2. store in memory a copy of each object drawn in single color (using composite operations)
  • 19. Hitmap / Collision map 3. when checking collisions, do a single render of candidates to a buffer 4. grab color from point and compare with colorMap
  • 20. end() • questions? • http://twitter.com/ard • szymon.pilkowski@gmail.com • Thanks!

Hinweis der Redaktion

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. \n
  19. \n
  20. \n