SlideShare a Scribd company logo

Graphics Programming for Web Developers

Jarrod Overson
Jarrod Overson
Jarrod OversonDirector at Shape Security

Talk given at Mozilla's first View Source Conference in Portland, 2015. Details out the parallels between graphics and game developments compared to traditional web development.

Graphics Programming for Web Developers

1 of 77
Download to read offline
Graphics for Web Devs
Jarrod Overson - Shape Security
@jsoverson
Graphics Programming for Web Developers
Graphics Programming for Web Developers
Graphics Programming for Web Developers
Graphics Programming for Web Developers
Graphics Programming for Web Developers
Ad

Recommended

Structures
StructuresStructures
StructuresSV.CO
 
The Ring programming language version 1.3 book - Part 43 of 88
The Ring programming language version 1.3 book - Part 43 of 88The Ring programming language version 1.3 book - Part 43 of 88
The Ring programming language version 1.3 book - Part 43 of 88Mahmoud Samir Fayed
 
OConnor_SimulationProject
OConnor_SimulationProjectOConnor_SimulationProject
OConnor_SimulationProjectKevin O'Connor
 
Vector Graphics on the Web: SVG, Canvas, CSS3
Vector Graphics on the Web: SVG, Canvas, CSS3Vector Graphics on the Web: SVG, Canvas, CSS3
Vector Graphics on the Web: SVG, Canvas, CSS3Pascal Rettig
 
About graphics-on-web
About graphics-on-webAbout graphics-on-web
About graphics-on-webTayyab Ahmed
 
List of Top Mobile App Development Companies USA
List of Top Mobile App Development Companies USAList of Top Mobile App Development Companies USA
List of Top Mobile App Development Companies USAAnkit Thakor
 
10 Ways to Deliver an Unforgettable Presentation
10 Ways to Deliver an Unforgettable Presentation10 Ways to Deliver an Unforgettable Presentation
10 Ways to Deliver an Unforgettable PresentationAbhishek Shah
 

More Related Content

Viewers also liked

HTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the WebHTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the WebRobin Hawkes
 
Molecular Cloning - Vectors: Types & Characteristics
Molecular Cloning -  Vectors: Types & CharacteristicsMolecular Cloning -  Vectors: Types & Characteristics
Molecular Cloning - Vectors: Types & CharacteristicsSruthy Chandran
 
Strategies to Drive Web Traffic in the Real Estate World
Strategies to Drive Web Traffic in the Real Estate WorldStrategies to Drive Web Traffic in the Real Estate World
Strategies to Drive Web Traffic in the Real Estate WorldRand Fishkin
 
How to Make Awesome SlideShares: Tips & Tricks
How to Make Awesome SlideShares: Tips & TricksHow to Make Awesome SlideShares: Tips & Tricks
How to Make Awesome SlideShares: Tips & TricksSlideShare
 
Getting Started With SlideShare
Getting Started With SlideShareGetting Started With SlideShare
Getting Started With SlideShareSlideShare
 

Viewers also liked (7)

HTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the WebHTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the Web
 
Molecular Cloning - Vectors: Types & Characteristics
Molecular Cloning -  Vectors: Types & CharacteristicsMolecular Cloning -  Vectors: Types & Characteristics
Molecular Cloning - Vectors: Types & Characteristics
 
Strategies to Drive Web Traffic in the Real Estate World
Strategies to Drive Web Traffic in the Real Estate WorldStrategies to Drive Web Traffic in the Real Estate World
Strategies to Drive Web Traffic in the Real Estate World
 
ZIKA - What You Need to Know!
ZIKA - What You Need to Know! ZIKA - What You Need to Know!
ZIKA - What You Need to Know!
 
Inaugural Addresses
Inaugural AddressesInaugural Addresses
Inaugural Addresses
 
How to Make Awesome SlideShares: Tips & Tricks
How to Make Awesome SlideShares: Tips & TricksHow to Make Awesome SlideShares: Tips & Tricks
How to Make Awesome SlideShares: Tips & Tricks
 
Getting Started With SlideShare
Getting Started With SlideShareGetting Started With SlideShare
Getting Started With SlideShare
 

Similar to Graphics Programming for Web Developers

視覚化とSwiftのタイプについて
視覚化とSwiftのタイプについて視覚化とSwiftのタイプについて
視覚化とSwiftのタイプについてRay Fix
 
05 Geographic scripting in uDig - halfway between user and developer
05 Geographic scripting in uDig - halfway between user and developer05 Geographic scripting in uDig - halfway between user and developer
05 Geographic scripting in uDig - halfway between user and developerAndrea Antonello
 
Hi,I have updated your code. It is working fine now. Highllighted .pdf
Hi,I have updated your code. It is working fine now. Highllighted .pdfHi,I have updated your code. It is working fine now. Highllighted .pdf
Hi,I have updated your code. It is working fine now. Highllighted .pdfaniyathikitchen
 
Create a java project that - Draw a circle with three random init.pdf
Create a java project that - Draw a circle with three random init.pdfCreate a java project that - Draw a circle with three random init.pdf
Create a java project that - Draw a circle with three random init.pdfarihantmobileselepun
 
Object Oriented Solved Practice Programs C++ Exams
Object Oriented Solved Practice Programs C++ ExamsObject Oriented Solved Practice Programs C++ Exams
Object Oriented Solved Practice Programs C++ ExamsMuhammadTalha436
 
Bindings: the zen of montage
Bindings: the zen of montageBindings: the zen of montage
Bindings: the zen of montageKris Kowal
 
1.what is the difference between a instance variable and an local va.pdf
1.what is the difference between a instance variable and an local va.pdf1.what is the difference between a instance variable and an local va.pdf
1.what is the difference between a instance variable and an local va.pdfarchgeetsenterprises
 
HTML5 Canvas (Wall Clock).pptx
HTML5 Canvas (Wall Clock).pptxHTML5 Canvas (Wall Clock).pptx
HTML5 Canvas (Wall Clock).pptxAhmadAbba6
 
In Java1. Write a GUI program to display a circle and its attribu.pdf
In Java1. Write a GUI program to display a circle and its attribu.pdfIn Java1. Write a GUI program to display a circle and its attribu.pdf
In Java1. Write a GUI program to display a circle and its attribu.pdfsales96
 
The Canvas API for Rubyists
The Canvas API for RubyistsThe Canvas API for Rubyists
The Canvas API for Rubyistsdeanhudson
 
Exploring Canvas
Exploring CanvasExploring Canvas
Exploring CanvasKevin Hoyt
 
Writing SOLID C++ [gbgcpp meetup @ Zenseact]
Writing SOLID C++ [gbgcpp meetup @ Zenseact]Writing SOLID C++ [gbgcpp meetup @ Zenseact]
Writing SOLID C++ [gbgcpp meetup @ Zenseact]Dimitrios Platis
 
Test beautycleanness
Test beautycleannessTest beautycleanness
Test beautycleannessbergel
 
Code level change propagation in virtual platform
Code level change propagation in virtual platformCode level change propagation in virtual platform
Code level change propagation in virtual platformHaiderAli650468
 

Similar to Graphics Programming for Web Developers (20)

視覚化とSwiftのタイプについて
視覚化とSwiftのタイプについて視覚化とSwiftのタイプについて
視覚化とSwiftのタイプについて
 
05 Geographic scripting in uDig - halfway between user and developer
05 Geographic scripting in uDig - halfway between user and developer05 Geographic scripting in uDig - halfway between user and developer
05 Geographic scripting in uDig - halfway between user and developer
 
Player x 0 y ga.docx
Player x 0 y ga.docxPlayer x 0 y ga.docx
Player x 0 y ga.docx
 
Hi,I have updated your code. It is working fine now. Highllighted .pdf
Hi,I have updated your code. It is working fine now. Highllighted .pdfHi,I have updated your code. It is working fine now. Highllighted .pdf
Hi,I have updated your code. It is working fine now. Highllighted .pdf
 
Chapter10.pptx
Chapter10.pptxChapter10.pptx
Chapter10.pptx
 
Create a java project that - Draw a circle with three random init.pdf
Create a java project that - Draw a circle with three random init.pdfCreate a java project that - Draw a circle with three random init.pdf
Create a java project that - Draw a circle with three random init.pdf
 
Object Oriented Solved Practice Programs C++ Exams
Object Oriented Solved Practice Programs C++ ExamsObject Oriented Solved Practice Programs C++ Exams
Object Oriented Solved Practice Programs C++ Exams
 
Bindings: the zen of montage
Bindings: the zen of montageBindings: the zen of montage
Bindings: the zen of montage
 
Css5 canvas
Css5 canvasCss5 canvas
Css5 canvas
 
1.what is the difference between a instance variable and an local va.pdf
1.what is the difference between a instance variable and an local va.pdf1.what is the difference between a instance variable and an local va.pdf
1.what is the difference between a instance variable and an local va.pdf
 
Ch3
Ch3Ch3
Ch3
 
HTML5 Canvas (Wall Clock).pptx
HTML5 Canvas (Wall Clock).pptxHTML5 Canvas (Wall Clock).pptx
HTML5 Canvas (Wall Clock).pptx
 
In Java1. Write a GUI program to display a circle and its attribu.pdf
In Java1. Write a GUI program to display a circle and its attribu.pdfIn Java1. Write a GUI program to display a circle and its attribu.pdf
In Java1. Write a GUI program to display a circle and its attribu.pdf
 
ES6 Overview
ES6 OverviewES6 Overview
ES6 Overview
 
The Canvas API for Rubyists
The Canvas API for RubyistsThe Canvas API for Rubyists
The Canvas API for Rubyists
 
130717666736980000
130717666736980000130717666736980000
130717666736980000
 
Exploring Canvas
Exploring CanvasExploring Canvas
Exploring Canvas
 
Writing SOLID C++ [gbgcpp meetup @ Zenseact]
Writing SOLID C++ [gbgcpp meetup @ Zenseact]Writing SOLID C++ [gbgcpp meetup @ Zenseact]
Writing SOLID C++ [gbgcpp meetup @ Zenseact]
 
Test beautycleanness
Test beautycleannessTest beautycleanness
Test beautycleanness
 
Code level change propagation in virtual platform
Code level change propagation in virtual platformCode level change propagation in virtual platform
Code level change propagation in virtual platform
 

More from Jarrod Overson

Practical WebAssembly with Apex, wasmRS, and nanobus
Practical WebAssembly with Apex, wasmRS, and nanobusPractical WebAssembly with Apex, wasmRS, and nanobus
Practical WebAssembly with Apex, wasmRS, and nanobusJarrod Overson
 
AppSecCali - How Credential Stuffing is Evolving
AppSecCali - How Credential Stuffing is EvolvingAppSecCali - How Credential Stuffing is Evolving
AppSecCali - How Credential Stuffing is EvolvingJarrod Overson
 
How Credential Stuffing is Evolving - PasswordsCon 2019
How Credential Stuffing is Evolving - PasswordsCon 2019How Credential Stuffing is Evolving - PasswordsCon 2019
How Credential Stuffing is Evolving - PasswordsCon 2019Jarrod Overson
 
JSconf JP - Analysis of an exploited npm package. Event-stream's role in a su...
JSconf JP - Analysis of an exploited npm package. Event-stream's role in a su...JSconf JP - Analysis of an exploited npm package. Event-stream's role in a su...
JSconf JP - Analysis of an exploited npm package. Event-stream's role in a su...Jarrod Overson
 
Analysis of an OSS supply chain attack - How did 8 millions developers downlo...
Analysis of an OSS supply chain attack - How did 8 millions developers downlo...Analysis of an OSS supply chain attack - How did 8 millions developers downlo...
Analysis of an OSS supply chain attack - How did 8 millions developers downlo...Jarrod Overson
 
Deepfakes - How they work and what it means for the future
Deepfakes - How they work and what it means for the futureDeepfakes - How they work and what it means for the future
Deepfakes - How they work and what it means for the futureJarrod Overson
 
The State of Credential Stuffing and the Future of Account Takeovers.
The State of Credential Stuffing and the Future of Account Takeovers.The State of Credential Stuffing and the Future of Account Takeovers.
The State of Credential Stuffing and the Future of Account Takeovers.Jarrod Overson
 
How to Reverse Engineer Web Applications
How to Reverse Engineer Web ApplicationsHow to Reverse Engineer Web Applications
How to Reverse Engineer Web ApplicationsJarrod Overson
 
The life of breached data and the attack lifecycle
The life of breached data and the attack lifecycleThe life of breached data and the attack lifecycle
The life of breached data and the attack lifecycleJarrod Overson
 
The Life of Breached Data & The Dark Side of Security
The Life of Breached Data & The Dark Side of SecurityThe Life of Breached Data & The Dark Side of Security
The Life of Breached Data & The Dark Side of SecurityJarrod Overson
 
Shape Security @ WaffleJS October 16
Shape Security @ WaffleJS October 16Shape Security @ WaffleJS October 16
Shape Security @ WaffleJS October 16Jarrod Overson
 
The Dark Side of Security
The Dark Side of SecurityThe Dark Side of Security
The Dark Side of SecurityJarrod Overson
 
JavaScript and the AST
JavaScript and the ASTJavaScript and the AST
JavaScript and the ASTJarrod Overson
 
Maintainability SFJS Sept 4 2014
Maintainability SFJS Sept 4 2014 Maintainability SFJS Sept 4 2014
Maintainability SFJS Sept 4 2014 Jarrod Overson
 
Idiot proofing your code
Idiot proofing your codeIdiot proofing your code
Idiot proofing your codeJarrod Overson
 
Riot on the web - Kenote @ QCon Sao Paulo 2014
Riot on the web - Kenote @ QCon Sao Paulo 2014Riot on the web - Kenote @ QCon Sao Paulo 2014
Riot on the web - Kenote @ QCon Sao Paulo 2014Jarrod Overson
 
Managing JavaScript Complexity in Teams - Fluent
Managing JavaScript Complexity in Teams - FluentManaging JavaScript Complexity in Teams - Fluent
Managing JavaScript Complexity in Teams - FluentJarrod Overson
 
Real World Web components
Real World Web componentsReal World Web components
Real World Web componentsJarrod Overson
 
Managing JavaScript Complexity
Managing JavaScript ComplexityManaging JavaScript Complexity
Managing JavaScript ComplexityJarrod Overson
 

More from Jarrod Overson (20)

Practical WebAssembly with Apex, wasmRS, and nanobus
Practical WebAssembly with Apex, wasmRS, and nanobusPractical WebAssembly with Apex, wasmRS, and nanobus
Practical WebAssembly with Apex, wasmRS, and nanobus
 
AppSecCali - How Credential Stuffing is Evolving
AppSecCali - How Credential Stuffing is EvolvingAppSecCali - How Credential Stuffing is Evolving
AppSecCali - How Credential Stuffing is Evolving
 
How Credential Stuffing is Evolving - PasswordsCon 2019
How Credential Stuffing is Evolving - PasswordsCon 2019How Credential Stuffing is Evolving - PasswordsCon 2019
How Credential Stuffing is Evolving - PasswordsCon 2019
 
JSconf JP - Analysis of an exploited npm package. Event-stream's role in a su...
JSconf JP - Analysis of an exploited npm package. Event-stream's role in a su...JSconf JP - Analysis of an exploited npm package. Event-stream's role in a su...
JSconf JP - Analysis of an exploited npm package. Event-stream's role in a su...
 
Analysis of an OSS supply chain attack - How did 8 millions developers downlo...
Analysis of an OSS supply chain attack - How did 8 millions developers downlo...Analysis of an OSS supply chain attack - How did 8 millions developers downlo...
Analysis of an OSS supply chain attack - How did 8 millions developers downlo...
 
Deepfakes - How they work and what it means for the future
Deepfakes - How they work and what it means for the futureDeepfakes - How they work and what it means for the future
Deepfakes - How they work and what it means for the future
 
The State of Credential Stuffing and the Future of Account Takeovers.
The State of Credential Stuffing and the Future of Account Takeovers.The State of Credential Stuffing and the Future of Account Takeovers.
The State of Credential Stuffing and the Future of Account Takeovers.
 
How to Reverse Engineer Web Applications
How to Reverse Engineer Web ApplicationsHow to Reverse Engineer Web Applications
How to Reverse Engineer Web Applications
 
The life of breached data and the attack lifecycle
The life of breached data and the attack lifecycleThe life of breached data and the attack lifecycle
The life of breached data and the attack lifecycle
 
The Life of Breached Data & The Dark Side of Security
The Life of Breached Data & The Dark Side of SecurityThe Life of Breached Data & The Dark Side of Security
The Life of Breached Data & The Dark Side of Security
 
Shape Security @ WaffleJS October 16
Shape Security @ WaffleJS October 16Shape Security @ WaffleJS October 16
Shape Security @ WaffleJS October 16
 
The Dark Side of Security
The Dark Side of SecurityThe Dark Side of Security
The Dark Side of Security
 
JavaScript and the AST
JavaScript and the ASTJavaScript and the AST
JavaScript and the AST
 
ES2015 workflows
ES2015 workflowsES2015 workflows
ES2015 workflows
 
Maintainability SFJS Sept 4 2014
Maintainability SFJS Sept 4 2014 Maintainability SFJS Sept 4 2014
Maintainability SFJS Sept 4 2014
 
Idiot proofing your code
Idiot proofing your codeIdiot proofing your code
Idiot proofing your code
 
Riot on the web - Kenote @ QCon Sao Paulo 2014
Riot on the web - Kenote @ QCon Sao Paulo 2014Riot on the web - Kenote @ QCon Sao Paulo 2014
Riot on the web - Kenote @ QCon Sao Paulo 2014
 
Managing JavaScript Complexity in Teams - Fluent
Managing JavaScript Complexity in Teams - FluentManaging JavaScript Complexity in Teams - Fluent
Managing JavaScript Complexity in Teams - Fluent
 
Real World Web components
Real World Web componentsReal World Web components
Real World Web components
 
Managing JavaScript Complexity
Managing JavaScript ComplexityManaging JavaScript Complexity
Managing JavaScript Complexity
 

Recently uploaded

Q1 Memory Fabric Forum: Advantages of Optical CXL​ for Disaggregated Compute ...
Q1 Memory Fabric Forum: Advantages of Optical CXL​ for Disaggregated Compute ...Q1 Memory Fabric Forum: Advantages of Optical CXL​ for Disaggregated Compute ...
Q1 Memory Fabric Forum: Advantages of Optical CXL​ for Disaggregated Compute ...Memory Fabric Forum
 
Q1 Memory Fabric Forum: XConn CXL Switches for AI
Q1 Memory Fabric Forum: XConn CXL Switches for AIQ1 Memory Fabric Forum: XConn CXL Switches for AI
Q1 Memory Fabric Forum: XConn CXL Switches for AIMemory Fabric Forum
 
Journey of Television in World & in India
Journey of Television in World & in IndiaJourney of Television in World & in India
Journey of Television in World & in IndiaAdarshAgarwal66
 
AWS reInvent 2023 recaps from Chicago AWS user group
AWS reInvent 2023 recaps from Chicago AWS user groupAWS reInvent 2023 recaps from Chicago AWS user group
AWS reInvent 2023 recaps from Chicago AWS user groupAWS Chicago
 
Automate Your Master Data Processes for Shared Service Center Excellence
Automate Your Master Data Processes for Shared Service Center ExcellenceAutomate Your Master Data Processes for Shared Service Center Excellence
Automate Your Master Data Processes for Shared Service Center ExcellencePrecisely
 
Quinto Z-Wave Heltun_HE-RS01_User_Manual_B9AH.pdf
Quinto Z-Wave Heltun_HE-RS01_User_Manual_B9AH.pdfQuinto Z-Wave Heltun_HE-RS01_User_Manual_B9AH.pdf
Quinto Z-Wave Heltun_HE-RS01_User_Manual_B9AH.pdfDomotica daVinci
 
Unlocking the Cloud's True Potential: Why Multitenancy Is The Key?
Unlocking the Cloud's True Potential: Why Multitenancy Is The Key?Unlocking the Cloud's True Potential: Why Multitenancy Is The Key?
Unlocking the Cloud's True Potential: Why Multitenancy Is The Key?GleecusTechlabs1
 
From eSIMs to iSIMs: It’s Inside the Manufacturing
From eSIMs to iSIMs: It’s Inside the ManufacturingFrom eSIMs to iSIMs: It’s Inside the Manufacturing
From eSIMs to iSIMs: It’s Inside the ManufacturingSoracom Global, Inc.
 
Manual sensor Zigbee 3.0 MOES ZSS-X-PIRL-C
Manual  sensor Zigbee 3.0 MOES ZSS-X-PIRL-CManual  sensor Zigbee 3.0 MOES ZSS-X-PIRL-C
Manual sensor Zigbee 3.0 MOES ZSS-X-PIRL-CDomotica daVinci
 
Microsoft Azure News - Feb 2024
Microsoft Azure News - Feb 2024Microsoft Azure News - Feb 2024
Microsoft Azure News - Feb 2024Daniel Toomey
 
Evolution of Chatbots: From Custom AI Chatbots and AI Chatbots for Websites.pptx
Evolution of Chatbots: From Custom AI Chatbots and AI Chatbots for Websites.pptxEvolution of Chatbots: From Custom AI Chatbots and AI Chatbots for Websites.pptx
Evolution of Chatbots: From Custom AI Chatbots and AI Chatbots for Websites.pptxKyle Willson
 
Bringing nullability into existing code - dammit is not the answer.pptx
Bringing nullability into existing code - dammit is not the answer.pptxBringing nullability into existing code - dammit is not the answer.pptx
Bringing nullability into existing code - dammit is not the answer.pptxMaarten Balliauw
 
Z-Wave Fan coil Thermostat Heltun_HE-HT01_User_Manual.pdf
Z-Wave Fan coil Thermostat Heltun_HE-HT01_User_Manual.pdfZ-Wave Fan coil Thermostat Heltun_HE-HT01_User_Manual.pdf
Z-Wave Fan coil Thermostat Heltun_HE-HT01_User_Manual.pdfDomotica daVinci
 
Curtain Module Manual Zigbee Neo CS01-1C.pdf
Curtain Module Manual Zigbee Neo CS01-1C.pdfCurtain Module Manual Zigbee Neo CS01-1C.pdf
Curtain Module Manual Zigbee Neo CS01-1C.pdfDomotica daVinci
 
21ST CENTURY LITERACY FROM TRADITIONAL TO MODERN
21ST CENTURY LITERACY FROM TRADITIONAL TO MODERN21ST CENTURY LITERACY FROM TRADITIONAL TO MODERN
21ST CENTURY LITERACY FROM TRADITIONAL TO MODERNRonnelBaroc
 
LLMs, LMMs, their Improvement Suggestions and the Path towards AGI.pdf
LLMs, LMMs, their Improvement Suggestions and the Path towards AGI.pdfLLMs, LMMs, their Improvement Suggestions and the Path towards AGI.pdf
LLMs, LMMs, their Improvement Suggestions and the Path towards AGI.pdfThomas Poetter
 
Tete thermostatique Zigbee MOES BRT-100 V2.pdf
Tete thermostatique Zigbee MOES BRT-100 V2.pdfTete thermostatique Zigbee MOES BRT-100 V2.pdf
Tete thermostatique Zigbee MOES BRT-100 V2.pdfDomotica daVinci
 
Navigating the Never Normal Strategies for Portfolio Leaders
Navigating the Never Normal Strategies for Portfolio LeadersNavigating the Never Normal Strategies for Portfolio Leaders
Navigating the Never Normal Strategies for Portfolio LeadersOnePlan Solutions
 
2024 February Patch Tuesday
2024 February Patch Tuesday2024 February Patch Tuesday
2024 February Patch TuesdayIvanti
 

Recently uploaded (20)

Q1 Memory Fabric Forum: Advantages of Optical CXL​ for Disaggregated Compute ...
Q1 Memory Fabric Forum: Advantages of Optical CXL​ for Disaggregated Compute ...Q1 Memory Fabric Forum: Advantages of Optical CXL​ for Disaggregated Compute ...
Q1 Memory Fabric Forum: Advantages of Optical CXL​ for Disaggregated Compute ...
 
Q1 Memory Fabric Forum: XConn CXL Switches for AI
Q1 Memory Fabric Forum: XConn CXL Switches for AIQ1 Memory Fabric Forum: XConn CXL Switches for AI
Q1 Memory Fabric Forum: XConn CXL Switches for AI
 
Journey of Television in World & in India
Journey of Television in World & in IndiaJourney of Television in World & in India
Journey of Television in World & in India
 
AWS reInvent 2023 recaps from Chicago AWS user group
AWS reInvent 2023 recaps from Chicago AWS user groupAWS reInvent 2023 recaps from Chicago AWS user group
AWS reInvent 2023 recaps from Chicago AWS user group
 
Automate Your Master Data Processes for Shared Service Center Excellence
Automate Your Master Data Processes for Shared Service Center ExcellenceAutomate Your Master Data Processes for Shared Service Center Excellence
Automate Your Master Data Processes for Shared Service Center Excellence
 
Quinto Z-Wave Heltun_HE-RS01_User_Manual_B9AH.pdf
Quinto Z-Wave Heltun_HE-RS01_User_Manual_B9AH.pdfQuinto Z-Wave Heltun_HE-RS01_User_Manual_B9AH.pdf
Quinto Z-Wave Heltun_HE-RS01_User_Manual_B9AH.pdf
 
Unlocking the Cloud's True Potential: Why Multitenancy Is The Key?
Unlocking the Cloud's True Potential: Why Multitenancy Is The Key?Unlocking the Cloud's True Potential: Why Multitenancy Is The Key?
Unlocking the Cloud's True Potential: Why Multitenancy Is The Key?
 
From eSIMs to iSIMs: It’s Inside the Manufacturing
From eSIMs to iSIMs: It’s Inside the ManufacturingFrom eSIMs to iSIMs: It’s Inside the Manufacturing
From eSIMs to iSIMs: It’s Inside the Manufacturing
 
Manual sensor Zigbee 3.0 MOES ZSS-X-PIRL-C
Manual  sensor Zigbee 3.0 MOES ZSS-X-PIRL-CManual  sensor Zigbee 3.0 MOES ZSS-X-PIRL-C
Manual sensor Zigbee 3.0 MOES ZSS-X-PIRL-C
 
Microsoft Azure News - Feb 2024
Microsoft Azure News - Feb 2024Microsoft Azure News - Feb 2024
Microsoft Azure News - Feb 2024
 
Evolution of Chatbots: From Custom AI Chatbots and AI Chatbots for Websites.pptx
Evolution of Chatbots: From Custom AI Chatbots and AI Chatbots for Websites.pptxEvolution of Chatbots: From Custom AI Chatbots and AI Chatbots for Websites.pptx
Evolution of Chatbots: From Custom AI Chatbots and AI Chatbots for Websites.pptx
 
5 Tech Trend to Notice in ESG Landscape- 47Billion
5 Tech Trend to Notice in ESG Landscape- 47Billion5 Tech Trend to Notice in ESG Landscape- 47Billion
5 Tech Trend to Notice in ESG Landscape- 47Billion
 
Bringing nullability into existing code - dammit is not the answer.pptx
Bringing nullability into existing code - dammit is not the answer.pptxBringing nullability into existing code - dammit is not the answer.pptx
Bringing nullability into existing code - dammit is not the answer.pptx
 
Z-Wave Fan coil Thermostat Heltun_HE-HT01_User_Manual.pdf
Z-Wave Fan coil Thermostat Heltun_HE-HT01_User_Manual.pdfZ-Wave Fan coil Thermostat Heltun_HE-HT01_User_Manual.pdf
Z-Wave Fan coil Thermostat Heltun_HE-HT01_User_Manual.pdf
 
Curtain Module Manual Zigbee Neo CS01-1C.pdf
Curtain Module Manual Zigbee Neo CS01-1C.pdfCurtain Module Manual Zigbee Neo CS01-1C.pdf
Curtain Module Manual Zigbee Neo CS01-1C.pdf
 
21ST CENTURY LITERACY FROM TRADITIONAL TO MODERN
21ST CENTURY LITERACY FROM TRADITIONAL TO MODERN21ST CENTURY LITERACY FROM TRADITIONAL TO MODERN
21ST CENTURY LITERACY FROM TRADITIONAL TO MODERN
 
LLMs, LMMs, their Improvement Suggestions and the Path towards AGI.pdf
LLMs, LMMs, their Improvement Suggestions and the Path towards AGI.pdfLLMs, LMMs, their Improvement Suggestions and the Path towards AGI.pdf
LLMs, LMMs, their Improvement Suggestions and the Path towards AGI.pdf
 
Tete thermostatique Zigbee MOES BRT-100 V2.pdf
Tete thermostatique Zigbee MOES BRT-100 V2.pdfTete thermostatique Zigbee MOES BRT-100 V2.pdf
Tete thermostatique Zigbee MOES BRT-100 V2.pdf
 
Navigating the Never Normal Strategies for Portfolio Leaders
Navigating the Never Normal Strategies for Portfolio LeadersNavigating the Never Normal Strategies for Portfolio Leaders
Navigating the Never Normal Strategies for Portfolio Leaders
 
2024 February Patch Tuesday
2024 February Patch Tuesday2024 February Patch Tuesday
2024 February Patch Tuesday
 

Graphics Programming for Web Developers

  • 1. Graphics for Web Devs Jarrod Overson - Shape Security @jsoverson
  • 10. Yes, we're not game developers. But what are you looking for in your applications?
  • 11. • 60 FPS • Beautiful graphics • Responsive Interaction • Smooth animations
  • 12. When I say "video games" think: "performance critical graphic applications"
  • 13. The web is one of the only computer platforms that hasn't grown with video games pushing the edge. Why?
  • 14. 1996
  • 18. The web may not need games. But losing that discipline has handicapped us.
  • 21. So where do we start? <canvas>
  • 24. var context = canvas.getContext('2d'); or "webgl"
  • 27. for (var i = 0; i < 500; i++) { context.fillRect(10 + i, 10 + i, 100, 100); }
  • 29. for (var i = 0; i < 500; i++) { context.clearRect(0, 0, canvas.width, canvas.height); context.fillRect(10 + i, 10 + i, 100, 100); }
  • 32. var i = 0; function draw() { if (i < 500) i++; context.clearRect(0, 0, canvas.width, canvas.height); context.fillRect(i + 10, i + 10, 100, 100); requestAnimationFrame(draw); } draw();
  • 34. var i = 0; function draw() { if (i < 500) i++; context.clearRect(0, 0, canvas.width, canvas.height); context.fillRect(i + 10, i + 10, 100, 100); requestAnimationFrame(draw); } draw(); First we update our state.
  • 35. var i = 0; function draw() { if (i < 500) i++; context.clearRect(0, 0, canvas.width, canvas.height); context.fillRect(i + 10, i + 10, 100, 100); requestAnimationFrame(draw); } draw(); Then we render our current state.
  • 36. var i = 0; function draw() { if (i < 500) i++; context.clearRect(0, 0, canvas.width, canvas.height); context.fillRect(i + 10, i + 10, 100, 100); requestAnimationFrame(draw); } draw(); And we do it all over again.
  • 40. class ParticleSystem { constructor() { this.particles = []; this.emitters = []; } }
  • 41. class Particle { constructor(position, velocity, acceleration) { this.position = position; this.velocity = velocity; this.acceleration = acceleration; } }
  • 42. class Particle { constructor(position, velocity, acceleration) { this.position = position || {x: 0, y: 0}; this.velocity = velocity || {x: 0, y: 0}; this.acceleration = acceleration || {x: 0, y: 0}; } }
  • 43. class Vector { constructor(x, y) { this.x = x || 0; this.y = y || 0; } }
  • 44. class Particle { constructor(position, velocity, acceleration) { this.position = position || new Vector(0, 0); this.velocity = velocity || new Vector(0, 0); this.acceleration = acceleration || new Vector(0, 0); } }
  • 45. class Emitter { constructor(point, velocity) { this.position = point || new Vector(0, 0); this.velocity = velocity || new Vector(0, 0); } }
  • 46. class ParticleSystem { constructor(width, height) { /* …snipped… */ } render(context) { context.clearRect(0, 0, this.width, this.height); this.emitters.forEach(emitter => emitter.render(context)); this.particles.forEach(particle => particle.render(context)); } }
  • 47. class Particle { constructor(position, velocity, acceleration) { /* … */ } render(context) { context.fillStyle = 'red'; context.fillRect(this.position.x, this.position.y, 2, 2); } }
  • 48. var system = new ParticleSystem(width, height); system.emitters.push(new Emitter(new Vector(10, 10))); system.particles.push(new Particle(new Vector(20, 20))); system.particles.push(new Particle(new Vector(10, 20))); system.particles.push(new Particle(new Vector(20, 10))); function loop() { system.render(context); window.requestAnimationFrame(loop); } loop();
  • 50. var system = new ParticleSystem(width, height); system.addEmitter(320, 180); function loop() { system.update(); system.render(context); window.requestAnimationFrame(loop); } loop();
  • 51. class Emitter { constructor(position, velocity) { /* … */ } render(context) { /* … */ } emitParticle() { return new Particle(this.position.clone(), this.velocity.clone()); } }
  • 52. class Particle { constructor(position, velocity, acceleration) { /* … */ } render(context) { /* … */ } update() { this.velocity.add(this.acceleration); this.position.add(this.velocity); } }
  • 53. class ParticleSystem { constructor(width, height) { /* … */ } addEmitter(x, y, velX, velY) { /* … */ } update() { this.emitters.forEach( emitter => this.particles.push(emitter.emitParticle()) ); this.particles = this.particles.filter(particle => { particle.update(); let pos = particle.position; let outOfBounds = pos.x > this.width || pos.y > this.height || pos.x < 0 || pos.y < 0 return !outOfBounds; }) } }
  • 55. emitParticle() { // Define a maximum angle range in radians. let spread = Math.PI / 32; // Use an angle randomized over a spread so we have more of a "spray" var angle = this.velocity.rad() + spread - (Math.random() * spread * 2); // The magnitude of the emitter's velocity var magnitude = this.velocity.length(); // New velocity based off of the calculated angle and magnitude var velocity = Vector.fromAngle(angle, magnitude); // return our new Particle return new Particle(this.position.clone(), velocity); }
  • 56. emitParticle() { // Define a maximum angle range in radians. let spread = Math.PI / 32; // Use an angle randomized over a spread so we have more of a "spray" var angle = this.velocity.rad() + spread - (Math.random() * spread * 2); // The magnitude of the emitter's velocity var magnitude = this.velocity.length(); // New velocity based off of the calculated angle and magnitude var velocity = Vector.fromAngle(angle, magnitude); // return our new Particle return new Particle(this.position.clone(), velocity); }
  • 57. emitParticle() { // Define a maximum angle range in radians. let spread = Math.PI / 32; // Use an angle randomized over a spread so we have more of a "spray" var angle = this.velocity.rad() + spread - (Math.random() * spread * 2); // The magnitude of the emitter's velocity var magnitude = this.velocity.length(); // New velocity based off of the calculated angle and magnitude var velocity = Vector.fromAngle(angle, magnitude); // return our new Particle return new Particle(this.position.clone(), velocity); }
  • 60. - (2 * spread)
  • 61. - (2 * spread) * rand
  • 62. emitParticle() { // Define a maximum angle range in radians. let spread = Math.PI / 32; // Use an angle randomized over a spread so we have more of a "spray" var angle = this.velocity.rad() + spread - (Math.random() * spread * 2); // The magnitude of the emitter's velocity var magnitude = this.velocity.length(); // New velocity based off of the calculated angle and magnitude var velocity = Vector.fromAngle(angle, magnitude); // return our new Particle return new Particle(this.position.clone(), velocity); }
  • 63. emitParticle() { // Define a maximum angle range in radians. let spread = Math.PI / 32; // Use an angle randomized over a spread so we have more of a "spray" var angle = this.velocity.rad() + spread - (Math.random() * spread * 2); // The magnitude of the emitter's velocity var magnitude = this.velocity.length(); // New velocity based off of the calculated angle and magnitude var velocity = Vector.fromAngle(angle, magnitude); // return our new Particle return new Particle(this.position.clone(), velocity); }
  • 64. emitParticle() { // Define a maximum angle range in radians. let spread = Math.PI / 32; // Use an angle randomized over a spread so we have more of a "spray" var angle = this.velocity.rad() + spread - (Math.random() * spread * 2); // The magnitude of the emitter's velocity var magnitude = this.velocity.length(); // New velocity based off of the calculated angle and magnitude var velocity = Vector.fromAngle(angle, magnitude); // return our new Particle return new Particle(this.position.clone(), velocity); }
  • 68. 1. Application state modified and rendered independently. 2. Expensive mutations performed as little as possible. 3. Physics based animations.
  • 69. We're getting there. You can do this now, sort of.
  • 70. var Greets = React.createClass({ getInitialState: function() { return { name: "Portland" }; }, render: function() { return <div>Hello {this.state.name}</div>; } });
  • 71. The virtual DOM is an abstraction that saves you the cost of expensive render-based mutation in a familiar package. It's better, but a virtual DOM is not our application state.
  • 72. While you're exploring JavaScript, explore graphics & games. Go, do neat things with canvas!
  • 73. Maybe you'll find a use for normal mapped backgrounds. http://jsoverson.github.io/texture.js/demo/bricks.html
  • 74. Or maybe you'll use it to understand the bounds of an optical illusion. http://jsoverson.github.io/concentric-circle-illusion/
  • 75. Or maybe you'll make some really awesome games. https://ga.me/games/polycraft (turbulenz.com)
  • 76. Or maybe you'll try… phaser.io
  • 77. Graphics for Web Devs Jarrod Overson - Shape Security @jsoverson