I Can t Believe It s Not

Size: px
Start display at page:

Download "I Can t Believe It s Not"

Transcription

1 I Can t Believe It s Not

2 <omg code="on slides"/>

3

4 Animating CSS properties Timer JavaScript sets CSS Reflow Rendering Paint

5

6 Animating CSS properties Timer JavaScript sets CSS Reflow Rendering Paint

7 Performance hit

8 Performance hit JavaScript Reflow Rendering Paint

9 Performance hit JavaScript Reflow Rendering Paint

10 Performance hit JavaScript Reflow Rendering Paint

11 Performance hit JavaScript Reflow Rendering Paint

12 Performance hit JavaScript Reflow Rendering Paint

13 Browser CSS animation/ transitions Timer Browser updates CSS Reflow Rendering Paint

14

15 Timer JavaScript sets CSS Reflow Rendering Paint Timer Browser updates CSS Reflow Rendering Paint

16 Timer JavaScript sets CSS Reflow Rendering Paint Timer Browser updates CSS Reflow Rendering Paint

17 -webkit-transform Paint JavaScript or Browser sets CSS

18

19

20

21 <!DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" " transitional.dtd"> <html xmlns=" xml:lang="en" lang="en"> <head> <meta http- equiv="content- Type" content="text/html; charset=utf- 8"/> <title>index</title> <style type="text/css" media="screen"> div { position: absolute; border: 3px solid red; } #d1 { left: 20px; top: 20px; width: 400px; height: 400px; - webkit- transform:translatez(0px); } #d2 { left: 100px; top: 30px; width: 150px; height: 100px; - webkit- transform:translatez(- 100px); } #d3 { left: 300px; top: 40px; width: 100px; height: 50px; - webkit- transform:translatez(- 200px); } #d4 { left: 320px; top: 80px; width: 90px; height: 50px; - webkit- transform:translatez(- 300px); } #d5 { left: 280px; top: 90px; width: 90px; height: 50px; - webkit- transform:translatez(- 400px); } body { - webkit- transform- style: preserve- 3d;

22 #d2 { left: 100px; top: 30px; width: 150px; height: 100px; - webkit- transform:translatez(- 100px); } #d3 { left: 300px; top: 40px; width: 100px; height: 50px; - webkit- transform:translatez(- 200px); } #d4 { left: 320px; top: 80px; width: 90px; height: 50px; - webkit- transform:translatez(- 300px); } #d5 { left: 280px; top: 90px; width: 90px; height: 50px; - webkit- transform:translatez(- 400px); } body { - webkit- transform- style: preserve- 3d; - webkit- transform:rotatex(0deg) rotatey(0deg) rotatez(0deg) perspective(0); } body.stage2 { - webkit- transition: - webkit- transform 10s; - webkit- transform:rotatex(30deg) rotatey(- 50deg) rotatez(10deg) perspective(0); } </style> </head> <body> <div id="d1"></div> <div id="d2"></div> <div id="d3"></div> <div id="d4"></div> <div id="d5"></div> </body> </html>

23 Safari on Snow Leopard, or on Windows: Nokia s Starlight browser (alpha)

24

25

26 Fullscreen HD Video CPU% HTML5: 10% FLASH: 100+% (and dropped frames)

27

28 Canvas Timer JavaScript uses Canvas APIs Paint

29

30 Physics engine with Canvas Timer 1) clear canvas 2) physics iteration 3) draw shapes Paint Box2D physics engine

31 function createball(world, x, y) { var ballsd = new b2circledef(); ballsd.density = 0.3; ballsd.radius = 20+Math.random()*20; ballsd.restitution = 0.1; ballsd.friction = 0.2; var ballbd = new b2bodydef(); ballbd.rotation = 0.3; ballbd.addshape(ballsd); ballbd.position.set(x,y); return world.createbody(ballbd); }

32 world.step(ms,1);

33 3) draw shapes box2d objects/ positions canvas

34

35 Vector graphics SVG + VML JavaScript creates vector graphics nodes Reflow Rendering Paint

36

37 <path fill="none" stroke="#5cbfff" d="m52.2,40.5l47.23,55.5l38.53,70.5l33.88,85.5l36.63,100.5l50.1,115.5l70.7,130.5l97.85,145.5l123.65,160.5l139.3,175.5l126.2,19 0.5L132.95,205.5L157.58,220.5L143.85,235.5L155.25,250.5L151.43, 265.5L149.05,280.5L104.5,295.5L103.6,310.5L97.85,325.5L94.58,34 0.5L86.7,355.5L78.95,370.5L69.35,385.5M56.4,440.5L42.3,455.5L32.93,470.5L26.38,485.5L28.23,500.5L28.95,515.5L40.45,530.5L57.55,545.5L80.18,560.5L123.55,575.5L144.95,590.5L137.33,605.5L ,620.5L149.7,635.5L162.73,650.5L142.83,665.5L164.2,680.5L ,695.5L97.28,710.5L88.75,725.5L90.83,740.5L87.15,755.5L85.15,7 70.5L62.55,785.5M52.78,840.5L41.5,855.5L33.1,870.5L22.38,885.5L 25.63,900.5L24.05,915.5L33.05,930.5L48.3,945.5L65.35,960.5L115. 2,975.5L137.7,990.5L136.43,1005.5L102.28,1020.5L132.28,1035.5L1 37.5,1050.5L132.05,1065.5L155.83,1080.5L107.3,1095.5L95.98,1110.5L94.73,1125.5L94.65,1140.5L86.25,1155.5L83.4,1170.5L70.48, M58.6,1240.5L43.38,1255.5L33.35,1270.5L28.43,1285.5L29.05, L38.43,1315.5L51.35,1330.5L82.38,1345.5L105.73,1360.5L ,1375.5L176.05,1390.5L164.13,1405.5L139.48,1420.5L131.53, L164.83,1450.5L161.15,1465.5L157.2,1480.5L112.68,1495.5L105.68,1510.5L103.83,1525.5L104.25,1540.5L92.5,1555.5L91.35,1570.5L70.48,1585.5M54.05,1640.5L48.6,1655.5L35.02,1670.5L32.8,1685.5L36.98,1700.5L41.75,1715.5L63.78,1730.5L90.6,1745.5L112.28,1760.5L ,1775.5L171.2,1790.5L180.43,1805.5L171.88,1820.5L168.65, L153.88,1850.5L148.35,1865.5L140.28,1880.5L110.2,1895.5L ,1910.5L101.2,1925.5L96.7,1940.5L96.5,1955.5L80.08,1970.5L6 8.4,1985.5M54.8,2040.5L41.23,2055.5L35.85,2070.5L30.15,2085.5L3

38

39

40 WebGL shaders Timer JavaScript Paint

41 WebGL <script id="vshader" type="x- shader/x- vertex"> uniform mat4 u_modelviewmatrix; uniform mat4 u_modelviewprojmatrix; uniform mat4 u_normalmatrix; uniform vec3 lightdir; attribute vec3 vnormal; attribute vec4 vtexcoord; attribute vec4 vposition; varying float v_dot; varying vec2 v_texcoord; void main() { gl_position = u_modelviewprojmatrix * vposition; v_texcoord = vtexcoord.st; vec4 transnormal = u_normalmatrix * vec4(vnormal,1); v_dot = max(dot(transnormal.xyz, lightdir), 0.0); } </script>

42 var examplescene = scene( {}, /* A renderer node binds subnodes to a WebGL canvas element defined in the HTML tab then clears the depth and colour buffers */ renderer({ canvasid: 'thecanvas', clear : { depth : true, color : true} }, /* A simple phong GLSL shader to render sub- nodes, with a single light source. This shader type only supports a one light source. */ shader( { type: 'simple- shader' }, lights( { lights: [ { pos: { x: , y: 30.0, z: } } ]}, /* Perspective transformation */ scenejs.org

43

44

45 firefox/nightly/latest-trunk/

46

47 JavaScript & CSS CSS Transforms & Animations 2D bitmapped graphics Physics engines Vector graphics HTML5 video WebGL

48

Introduction to HTML5

Introduction to HTML5 Introduction to HTML5 History of HTML 1991 HTML first published 1995 1997 1999 2000 HTML 2.0 HTML 3.2 HTML 4.01 XHTML 1.0 After HTML 4.01 was released, focus shifted to XHTML and its stricter standards.

More information

Implementing a chat button on TECHNICAL PAPER

Implementing a chat button on TECHNICAL PAPER Implementing a chat button on TECHNICAL PAPER Contents 1 Adding a Live Guide chat button to your Facebook page... 3 1.1 Make the chat button code accessible from your web server... 3 1.2 Create a Facebook

More information

Create a cool image gallery using CSS visibility and positioning property

Create a cool image gallery using CSS visibility and positioning property GRC 275 A8 Create a cool image gallery using CSS visibility and positioning property 1. Create a cool image gallery, having thumbnails which when moused over display larger images 2. Gallery must provide

More information

A designers guide to creating & editing templates in EzPz

A designers guide to creating & editing templates in EzPz A designers guide to creating & editing templates in EzPz Introduction...2 Getting started...2 Actions...2 File Upload...3 Tokens...3 Menu...3 Head Tokens...4 CSS and JavaScript included files...4 Page

More information

BCA611 Video Oyunları için 3B Grafik

BCA611 Video Oyunları için 3B Grafik BCA611 Video Oyunları için 3B Grafik WebGL - Shader Programming Zümra Kavafoğlu Canvas element The HTML element is used to draw graphics on a web page. Create canvas with id, width and height

More information

Vebra Search Integration Guide

Vebra Search Integration Guide Guide Introduction... 2 Requirements... 2 How a Vebra search is added to your site... 2 Integration Guide... 3 HTML Wrappers... 4 Page HEAD Content... 4 CSS Styling... 4 BODY tag CSS... 5 DIV#s-container

More information

OpenGL shaders and programming models that provide object persistence

OpenGL shaders and programming models that provide object persistence OpenGL shaders and programming models that provide object persistence COSC342 Lecture 22 19 May 2016 OpenGL shaders We discussed forms of local illumination in the ray tracing lectures. We also saw that

More information

Mining the Rendering Power in Web Browsers. Jianxia Xue Jan. 28, 2014

Mining the Rendering Power in Web Browsers. Jianxia Xue Jan. 28, 2014 Mining the Rendering Power in Web Browsers Jianxia Xue Jan. 28, 2014 Outline Web application as software deployment platform WebGL: Graphics API inside browsers Explore browser rendering capability through

More information

Comp4422. Computer Graphics. Lab 02: WebGL API Prof. George Baciu. PQ838 x7272.

Comp4422. Computer Graphics. Lab 02: WebGL API   Prof. George Baciu. PQ838 x7272. Comp4422 Computer Graphics Lab 02: WebGL API www.comp.polyu.edu.hk/~csgeorge/comp4422 Prof. George Baciu csgeorge@comp.polyu.edu.hk PQ838 x7272 9/6/2018 COMP4422 Lab 02 George Baciu 2018 1 WebGL Prerequisites

More information

WebGL A quick introduction. J. Madeira V. 0.2 September 2017

WebGL A quick introduction. J. Madeira V. 0.2 September 2017 WebGL A quick introduction J. Madeira V. 0.2 September 2017 1 Interactive Computer Graphics Graphics library / package is intermediary between application and display hardware Application program maps

More information

What is XHTML? XHTML is the language used to create and organize a web page:

What is XHTML? XHTML is the language used to create and organize a web page: XHTML Basics What is XHTML? XHTML is the language used to create and organize a web page: XHTML is newer than, but built upon, the original HTML (HyperText Markup Language) platform. XHTML has stricter

More information

HTML5 and CSS3: New Markup & Styles for the Emerging Web. Jason Clark Head of Digital Access & Web Services Montana State University Library

HTML5 and CSS3: New Markup & Styles for the Emerging Web. Jason Clark Head of Digital Access & Web Services Montana State University Library HTML5 and CSS3: New Markup & Styles for the Emerging Web Jason Clark Head of Digital Access & Web Services Montana State University Library Overview Revolution or Evolution? New Features and Functions

More information

WebGL (Web Graphics Library) is the new standard for 3D graphics on the Web, designed for rendering 2D graphics and interactive 3D graphics.

WebGL (Web Graphics Library) is the new standard for 3D graphics on the Web, designed for rendering 2D graphics and interactive 3D graphics. About the Tutorial WebGL (Web Graphics Library) is the new standard for 3D graphics on the Web, designed for rendering 2D graphics and interactive 3D graphics. This tutorial starts with a basic introduction

More information

X3DOM Getting declarative (X)3D into HTML

X3DOM Getting declarative (X)3D into HTML X3DOM Getting declarative (X)3D into HTML WebGL BOF, Siggraph 2010 Johannes Behr & Yvonne Jung Virtual and Augmented Reality Group, Fraunhofer IGD, Darmstadt, Germany johannes.behr@igd.fraunhofer.de Motivation

More information

Rasterization-based pipeline

Rasterization-based pipeline Rasterization-based pipeline Interactive Graphics: Color and Images 10/2/2014 Pagina 1 Rasterization-based rendering Input: set of vertices and its associated attributes Algorithm goes through several

More information

HTML Overview. With an emphasis on XHTML

HTML Overview. With an emphasis on XHTML HTML Overview With an emphasis on XHTML What is HTML? Stands for HyperText Markup Language A client-side technology (i.e. runs on a user s computer) HTML has a specific set of tags that allow: the structure

More information

Dreamweaver: Portfolio Site

Dreamweaver: Portfolio Site Dreamweaver: Portfolio Site Part 3 - Dreamweaver: Developing the Portfolio Site (L043) Create a new Site in Dreamweaver: Site > New Site (name the site something like: Portfolio, or Portfolio_c7) Go to

More information

Building Desktop RIAs with PHP, HTML & Javascript in AIR. Ed Finkler, ZendCon08, September 17, 2008 funkatron.com /

Building Desktop RIAs with PHP, HTML & Javascript in AIR. Ed Finkler, ZendCon08, September 17, 2008 funkatron.com / Building Desktop RIAs with PHP, HTML & Javascript in AIR Ed Finkler, ZendCon08, September 17, 2008 funkatron.com / funkatron@gmail.com What is AIR? For the desktop Not a browser plugin Build desktop apps

More information

New Media Production HTML5

New Media Production HTML5 New Media Production HTML5 Modernizr, an HTML5 Detection Library Modernizr is an open source, MIT-licensed JavaScript library that detects support

More information

HTML5 and Mobile: New Markup & Styles for the Mobile Web. Jason Clark Head of Digital Access & Web Services Montana State University Libraries

HTML5 and Mobile: New Markup & Styles for the Mobile Web. Jason Clark Head of Digital Access & Web Services Montana State University Libraries HTML5 and Mobile: New Markup & Styles for the Mobile Web Jason Clark Head of Digital Access & Web Services Montana State University Libraries Overview Demos View some code bits New Features and Functions

More information

First, create a web page with a submit button on it (remember from creating forms in html?):

First, create a web page with a submit button on it (remember from creating forms in html?): Changing Style So far we have only done a little with changing the style of a web page. JavaScript lets us do that as well. We can call a function that allows us to change the style of one or many elements

More information

Programming with OpenGL Complete Programs Objectives Build a complete first program

Programming with OpenGL Complete Programs Objectives Build a complete first program Programming with OpenGL Complete Programs Objectives Build a complete first program Introduce shaders Introduce a standard program structure Simple viewing Two-dimensional viewing as a special case of

More information

Introduction to OpenGL/GLSL and WebGL GLSL

Introduction to OpenGL/GLSL and WebGL GLSL Introduction to OpenGL/GLSL and WebGL GLSL Objectives! Give you an overview of the software that you will be using this semester! OpenGL, WebGL, and GLSL! What are they?! How do you use them?! What does

More information

Schenker AB. Interface documentation Map integration

Schenker AB. Interface documentation Map integration Schenker AB Interface documentation Map integration Index 1 General information... 1 1.1 Getting started...1 1.2 Authentication...1 2 Website Map... 2 2.1 Information...2 2.2 Methods...2 2.3 Parameters...2

More information

Lab 4 CSS CISC1600, Spring 2012

Lab 4 CSS CISC1600, Spring 2012 Lab 4 CSS CISC1600, Spring 2012 Part 1 Introduction 1.1 Cascading Style Sheets or CSS files provide a way to control the look and feel of your web page that is more convenient, more flexible and more comprehensive

More information

GIMP WEB 2.0 MENUS. Before we begin this tutorial let s visually compare a standard navigation bar and a web 2.0 navigation bar.

GIMP WEB 2.0 MENUS. Before we begin this tutorial let s visually compare a standard navigation bar and a web 2.0 navigation bar. GIMP WEB 2.0 MENUS Before we begin this tutorial let s visually compare a standard navigation bar and a web 2.0 navigation bar. Standard Navigation Bar Web 2.0 Navigation Bar Now the all-important question

More information

HTML Summary. All of the following are containers. Structure. Italics Bold. Line Break. Horizontal Rule. Non-break (hard) space.

HTML Summary. All of the following are containers. Structure. Italics Bold. Line Break. Horizontal Rule. Non-break (hard) space. HTML Summary Structure All of the following are containers. Structure Contains the entire web page. Contains information

More information

Design Project. i385f Special Topics in Information Architecture Instructor: Don Turnbull. Elias Tzoc

Design Project. i385f Special Topics in Information Architecture Instructor: Don Turnbull. Elias Tzoc Design Project Site: News from Latin America Design Project i385f Special Topics in Information Architecture Instructor: Don Turnbull Elias Tzoc April 3, 2007 Design Project - 1 I. Planning [ Upper case:

More information

Web Development & Design Foundations with XHTML. Chapter 2 Key Concepts

Web Development & Design Foundations with XHTML. Chapter 2 Key Concepts Web Development & Design Foundations with XHTML Chapter 2 Key Concepts Learning Outcomes In this chapter, you will learn about: XHTML syntax, tags, and document type definitions The anatomy of a web page

More information

Bookmarks to the headings on this page:

Bookmarks to the headings on this page: Squiz Matrix User Manual Library The Squiz Matrix User Manual Library is a prime resource for all up-to-date manuals about Squiz's flagship CMS Easy Edit Suite Current for Version 4.8.1 Installation Guide

More information

Title: Dec 11 3:40 PM (1 of 11)

Title: Dec 11 3:40 PM (1 of 11) ... basic iframe body {color: brown; font family: "Times New Roman"} this is a test of using iframe Here I have set up two iframes next to each

More information

JavaScript (5A) JavaScript

JavaScript (5A) JavaScript JavaScript (5A) JavaScript Copyright (c) 2012 Young W. Lim. Permission is granted to copy, distribute and/or modify this document under the terms of the GNU Free Documentation License, Version 1.2 or any

More information

WebGL. Creating Interactive Content with WebGL. Media #WWDC14. Session 509 Dean Jackson and Brady Eidson WebKit Engineers

WebGL. Creating Interactive Content with WebGL. Media #WWDC14. Session 509 Dean Jackson and Brady Eidson WebKit Engineers Media #WWDC14 WebGL Creating Interactive Content with WebGL Session 509 Dean Jackson and Brady Eidson WebKit Engineers 2014 Apple Inc. All rights reserved. Redistribution or public display not permitted

More information

WebGL Seminar: O3D. Alexander Lokhman Tampere University of Technology

WebGL Seminar: O3D. Alexander Lokhman Tampere University of Technology WebGL Seminar: O3D Alexander Lokhman Tampere University of Technology What is O3D? O3D is an open source JavaScript API for creating rich, interactive 3D applications in the browser Created by Google and

More information

Wireframe :: tistory wireframe tistory.

Wireframe :: tistory wireframe tistory. Page 1 of 45 Wireframe :: tistory wireframe tistory Daum Tistory GO Home Location Tags Media Guestbook Admin 'XHTML+CSS' 7 1 2009/09/20 [ ] XHTML CSS - 6 (2) 2 2009/07/23 [ ] XHTML CSS - 5 (6) 3 2009/07/17

More information

CS452/552; EE465/505. Image Formation

CS452/552; EE465/505. Image Formation CS452/552; EE465/505 Image Formation 1-15-15 Outline! Image Formation! Introduction to WebGL, continued Draw a colored triangle using WebGL Read: Angel, Chapters 2 & 3 Homework #1 will be available on

More information

TRAINING GUIDE. Rebranding Lucity Web

TRAINING GUIDE. Rebranding Lucity Web TRAINING GUIDE Rebranding Lucity Web Rebranding Lucity Web Applications In this booklet, we ll show how to make the Lucity web applications your own by matching your agency s style. Table of Contents Web

More information

Using CSS for page layout

Using CSS for page layout Using CSS for page layout Advantages: Greater typographic control Style is separate from structure Potentially smaller documents Easier site maintenance Increased page layout control Increased accessibility

More information

django-sekizai Documentation

django-sekizai Documentation django-sekizai Documentation Release 0.6.1 Jonas Obrist September 23, 2016 Contents 1 About 3 2 Dependencies 5 3 Usage 7 3.1 Configuration............................................... 7 3.2 Template

More information

WebGL and GLSL Basics. CS559 Fall 2015 Lecture 10 October 6, 2015

WebGL and GLSL Basics. CS559 Fall 2015 Lecture 10 October 6, 2015 WebGL and GLSL Basics CS559 Fall 2015 Lecture 10 October 6, 2015 Last time Hardware Rasterization For each point: Compute barycentric coords Decide if in or out.7,.7, -.4 1.1, 0, -.1.9,.05,.05.33,.33,.33

More information

Overview. Part I: Portraying the Internet as a collection of online information systems HTML/XHTML & CSS

Overview. Part I: Portraying the Internet as a collection of online information systems HTML/XHTML & CSS CSS Overview Part I: Portraying the Internet as a collection of online information systems Part II: Design a website using HTML/XHTML & CSS XHTML validation What is wrong?

More information

Using an ArcGIS Server.Net version 10

Using an ArcGIS Server.Net version 10 Using an ArcGIS Server.Net version 10 Created by Vince DiNoto Vince.dinoto@kctcs.edu Contents Concept... 2 Prerequisites... 2 Data... 2 Process... 3 Creating a Service... 3 Down Loading Shapefiles... 3

More information

HTML HTML. Chris Seddon CRS Enterprises Ltd 1

HTML HTML. Chris Seddon CRS Enterprises Ltd 1 Chris Seddon seddon-software@keme.co.uk 2000-12 CRS Enterprises Ltd 1 2000-12 CRS Enterprises Ltd 2 Reference Sites W3C W3C w3schools DevGuru Aptana GotAPI Dog http://www.w3.org/ http://www.w3schools.com

More information

LA TROBE UNIVERSITY SEMESTER ONE EXAMINATION PERIOD CAMPUS AW BE BU MI SH ALLOWABLE MATERIALS

LA TROBE UNIVERSITY SEMESTER ONE EXAMINATION PERIOD CAMPUS AW BE BU MI SH ALLOWABLE MATERIALS LIBRARY USE LA TROBE UNIVERSITY SEMESTER ONE EXAMINATION PERIOD 2013 Student ID: Seat Number: Unit Code: CSE2WD Paper No: 1 Unit Name: Paper Name: Reading Time: Writing Time: Web Development Final 15 minutes

More information

Web Publishing Basics I

Web Publishing Basics I Web Publishing Basics I Jeff Pankin Information Services and Technology Contents Course Objectives... 2 Creating a Web Page with HTML... 3 What is Dreamweaver?... 3 What is HTML?... 3 What are the basic

More information

Introduction to HTML5

Introduction to HTML5 Introduction to HTML5 Michael(tm) Smith mike@w3.org http://people.w3.org/mike sideshowbarker on Twitter, etc. I work for the W3C in Japan, based at Keio University near Tokyo My official W3C title is:

More information

How the Internet Works

How the Internet Works How the Internet Works The Internet is a network of millions of computers. Every computer on the Internet is connected to every other computer on the Internet through Internet Service Providers (ISPs).

More information

Inline Elements Karl Kasischke WCC INP 150 Winter

Inline Elements Karl Kasischke WCC INP 150 Winter Inline Elements 2009 Karl Kasischke WCC INP 150 Winter 2009 1 Inline Elements Emphasizing Text Increasing / Decreasing Text Size Quotes and Citations Code, Variables, and Sample Output Spanning Text Subscripts

More information

C P S C 314 S H A D E R S, O P E N G L, & J S RENDERING PIPELINE. Mikhail Bessmeltsev

C P S C 314 S H A D E R S, O P E N G L, & J S RENDERING PIPELINE. Mikhail Bessmeltsev C P S C 314 S H A D E R S, O P E N G L, & J S RENDERING PIPELINE UGRAD.CS.UBC.C A/~CS314 Mikhail Bessmeltsev 1 WHAT IS RENDERING? Generating image from a 3D scene 2 WHAT IS RENDERING? Generating image

More information

2D graphics with WebGL

2D graphics with WebGL 2D graphics with WebGL Some material contained here is adapted from the book s slides. September 7, 2015 (Dr. Mihail) 2D graphics September 7, 2015 1 / 22 Graphics Pipeline (Dr. Mihail) 2D graphics September

More information

Image Processing. HTML5 Canvas JavaScript Pixels

Image Processing. HTML5 Canvas JavaScript Pixels Image Processing HTML5 Canvas JavaScript Pixels Brent M. Dingle, Ph.D. 2015 Game Design and Development Program Mathematics, Statistics and Computer Science University of Wisconsin - Stout Provide Examples

More information

WebGL and GLSL Basics. CS559 Fall 2016 Lecture 14 October

WebGL and GLSL Basics. CS559 Fall 2016 Lecture 14 October WebGL and GLSL Basics CS559 Fall 2016 Lecture 14 October 24 2016 Review Hardware Rasterization For each point: Compute barycentric coords Decide if in or out.7,.7, -.4 1.1, 0, -.1.9,.05,.05.33,.33,.33

More information

Web Publishing Intermediate 2

Web Publishing Intermediate 2 Web Publishing Intermediate 2 Building a Three Column Site with divs and float Jeff Pankin Information Services and Technology Table of Contents Course Objectives... 2 The CIG Web Site... 3 Using the Div

More information

OPENGL RENDERING PIPELINE

OPENGL RENDERING PIPELINE CPSC 314 03 SHADERS, OPENGL, & JS UGRAD.CS.UBC.CA/~CS314 Textbook: Appendix A* (helpful, but different version of OpenGL) Alla Sheffer Sep 2016 OPENGL RENDERING PIPELINE 1 OPENGL RENDERING PIPELINE Javascript

More information

Google Web Toolkit Creating/using external JAR files

Google Web Toolkit Creating/using external JAR files Google Web Toolkit Creating/using external JAR files If you develop some code that can be reused in more than one project, one way to create a module is to create an external JAR file. This JAR file can

More information

Recall: Document Object Model (DOM)

Recall: Document Object Model (DOM) Page 1 Document Object Model (DOM) CSE 190 M (Web Programming), Spring 2007 University of Washington References: Forbes/Steele, Chipman (much of this content was stolen from them) Recall: Document Object

More information

CS559 Computer Graphics Fall 2015

CS559 Computer Graphics Fall 2015 CS559 Computer Graphics Fall 2015 Practice Midterm Exam Time: 2 hrs 1. [XX Y Y % = ZZ%] MULTIPLE CHOICE SECTION. Circle or underline the correct answer (or answers). You do not need to provide a justification

More information

Internet publishing HTML (XHTML) language. Petr Zámostný room: A-72a phone.:

Internet publishing HTML (XHTML) language. Petr Zámostný room: A-72a phone.: Internet publishing HTML (XHTML) language Petr Zámostný room: A-72a phone.: 4222 e-mail: petr.zamostny@vscht.cz Essential HTML components Element element example Start tag Element content End tag

More information

Computer Graphics with OpenGL ES (J. Han) Chapter 6 Fragment shader

Computer Graphics with OpenGL ES (J. Han) Chapter 6 Fragment shader Computer Graphics with OpenGL ES (J. Han) Chapter 6 Fragment shader Vertex and Fragment Shaders The inputs to the fragment shader Varyings: The per-vertex output variables produced by the vertex shader

More information

Scripting. Web Architecture and Information Management [./] Spring 2009 INFO (CCN 42509) Contents

Scripting. Web Architecture and Information Management [./] Spring 2009 INFO (CCN 42509) Contents Contents Scripting Contents Web Architecture and Information Management [./] Spring 2009 INFO 190-02 (CCN 42509) Erik Wilde, UC Berkeley School of Information [http://creativecommons.org/licenses/by/3.0/]

More information

COMP371 COMPUTER GRAPHICS

COMP371 COMPUTER GRAPHICS COMP371 COMPUTER GRAPHICS SESSION 12 PROGRAMMABLE SHADERS Announcement Programming Assignment #2 deadline next week: Session #7 Review of project proposals 2 Lecture Overview GPU programming 3 GPU Pipeline

More information

MODULE 2 HTML 5 FUNDAMENTALS. HyperText. > Douglas Engelbart ( )

MODULE 2 HTML 5 FUNDAMENTALS. HyperText. > Douglas Engelbart ( ) MODULE 2 HTML 5 FUNDAMENTALS HyperText > Douglas Engelbart (1925-2013) Tim Berners-Lee's proposal In March 1989, Tim Berners- Lee submitted a proposal for an information management system to his boss,

More information

Visualizing Information with

Visualizing Information with Visualizing Information with HTML5 @synodinos 35,000 years ago Chauvet cave, southern France By far the oldest paintings ever discovered Hundreds of paintings At least 13 different species Viubk source

More information

How I Learned to Stop Worrying and Love the KSS

How I Learned to Stop Worrying and Love the KSS How I Learned to Stop Worrying and Love the KSS Part 1: Client/Server Actions Chris Calloway TriZPUG November 2007 Thanks to BubbleNet and Greenfinity KSS? Kinetic Style Sheets Keep It Stupid Simple Javascript-free

More information

Part A Short Answer (50 marks)

Part A Short Answer (50 marks) Part A Short Answer (50 marks) NOTE: Answers for Part A should be no more than 3-4 sentences long. 1. (5 marks) What is the purpose of HTML? What is the purpose of a DTD? How do HTML and DTDs relate to

More information

introduction to XHTML

introduction to XHTML introduction to XHTML XHTML stands for Extensible HyperText Markup Language and is based on HTML 4.0, incorporating XML. Due to this fusion the mark up language will remain compatible with existing browsers

More information

Everything you need to know to get you started. By Kevin DeRudder

Everything you need to know to get you started. By Kevin DeRudder Everything you need to know to get you started with HTML5 By Kevin DeRudder @kevinderudder working for eguidelines and a lecturer at the Technical University of West Flanders. Contact me on kevin@e-guidelines.be

More information

Shadows. Prof. George Wolberg Dept. of Computer Science City College of New York

Shadows. Prof. George Wolberg Dept. of Computer Science City College of New York Shadows Prof. George Wolberg Dept. of Computer Science City College of New York Objectives Introduce Shadow Algorithms Expand to projective textures 2 Flashlight in the Eye Graphics When do we not see

More information

Using Java with HTML5 and CSS3 (+ the whole HTML5 world: WebSockets, SVG, etc...)

Using Java with HTML5 and CSS3 (+ the whole HTML5 world: WebSockets, SVG, etc...) Using Java with HTML5 and CSS3 (+ the whole HTML5 world: WebSockets, SVG, etc...) Helder da Rocha Independent Java & Web professional Argo Navis Informatica Ltda. São Paulo, Brazil helder@argonavis.com.br

More information

Unit Notes. ICAWEB411A Produce basic client-side script for dynamic web pages Topic 1 Introduction to JavaScript

Unit Notes. ICAWEB411A Produce basic client-side script for dynamic web pages Topic 1 Introduction to JavaScript Unit Notes ICAWEB411A Produce basic client-side script for dynamic web pages Topic 1 Introduction to JavaScript Copyright, 2013 by TAFE NSW - North Coast Institute Date last saved: 18 September 2013 by

More information

WebGL. Announcements. WebGL for Graphics Developers. WebGL for Web Developers. Homework 5 due Monday, 04/16. Final on Tuesday, 05/01

WebGL. Announcements. WebGL for Graphics Developers. WebGL for Web Developers. Homework 5 due Monday, 04/16. Final on Tuesday, 05/01 Announcements Patrick Cozzi University of Pennsylvania CIS 565 - Spring 2012 Homework 5 due Monday, 04/16 In-class quiz Wednesday, 04/18 Final on Tuesday, 05/01 6-8pm David Rittenhouse Lab A7 Networking

More information

CP3343 Computer Science Project (Year) Technical Report Document. Mr Stephen Garner

CP3343 Computer Science Project (Year) Technical Report Document. Mr Stephen Garner CP3343 Computer Science Project (Year) Technical Report Document Mr Stephen Garner Colin Hopson 0482647 Wednesday 23 rd April 2008 i Contents 1 Introduction... 1 2 The Program Listing... 1 2.1 ASP.Net

More information

Micronet International College

Micronet International College Micronet International College Level 4 Diploma in Computing Designing and Developing a Website (DDW) Test 1 (20%) Name: /50 Class: QUESTION 1 a) I) What are W3C standards? 1 Specifications or descriptions

More information

Lecture 17: Shading in OpenGL. CITS3003 Graphics & Animation

Lecture 17: Shading in OpenGL. CITS3003 Graphics & Animation Lecture 17: Shading in OpenGL CITS3003 Graphics & Animation E. Angel and D. Shreiner: Interactive Computer Graphics 6E Addison-Wesley 2012 Objectives Introduce the OpenGL shading methods - per vertex shading

More information

JavaScript I.b CSCI311

JavaScript I.b CSCI311 JavaScript I.b CSCI311 Learning Objectives Learn basic JavaScript control and data structures arrays objects loops JavaScript used for user events and reactions compute values and display results change

More information

The Projection Matrix

The Projection Matrix The Projection Matrix Lecture 5 Robb T. Koether Hampden-Sydney College Wed, Aug 30, 2017 Robb T. Koether (Hampden-Sydney College) The Projection Matrix Wed, Aug 30, 2017 1 / 21 Outline 1 The World Coordinate

More information

Fullscreen API. Quick Guides for Masterminds. J.D Gauchat Cover Illustration by Patrice Garden

Fullscreen API. Quick Guides for Masterminds. J.D Gauchat  Cover Illustration by Patrice Garden Fullscreen API Quick Guides for Masterminds J.D Gauchat www.jdgauchat.com Cover Illustration by Patrice Garden www.smartcreativz.com Quick Guides for Masterminds Copyright 2018 by John D Gauchat All Rights

More information

Here are a few easy steps to create a simple timeline. Open up your favorite text or HTML editor and start creating an HTML file.

Here are a few easy steps to create a simple timeline. Open up your favorite text or HTML editor and start creating an HTML file. 1 of 6 02-Sep-2013 1:52 PM Getting Started with Timeline From SIMILE Widgets Contents 1 Getting Started 1.1 Note 1.2 Examples 1.3 Step 1. Link to the API 1.4 Step 2. Create a DIV Element 1.5 Step 3. Call

More information

HTML5. Language of the Modern Web. By: Mayur Agrawal. Copyright TIBCO Software Inc.

HTML5. Language of the Modern Web. By: Mayur Agrawal. Copyright TIBCO Software Inc. HTML5 Language of the Modern Web By: Mayur Agrawal Copyright 2000-2015 TIBCO Software Inc. Content Exploring prior standards Why HTML5? HTML5 vs HTML4 Key Features of HTML5 HTML5 and Technical Writing

More information

SUMMARY. CS380: Introduction to Computer Graphics Projection Chapter 10. Min H. Kim KAIST School of Computing 18/04/12. Smooth Interpolation

SUMMARY. CS380: Introduction to Computer Graphics Projection Chapter 10. Min H. Kim KAIST School of Computing 18/04/12. Smooth Interpolation CS38: Introduction to Computer Graphics Projection Chapter Min H. Kim KAIST School of Computing Smooth Interpolation SUMMARY 2 Cubic Bezier Spline To evaluate the function c(t) at any value of t, we perform

More information

Let's take a look at what CSS looks like in Dreamweaver using the "Embedded" coding which is the styles are within the html code and not separate.

Let's take a look at what CSS looks like in Dreamweaver using the Embedded coding which is the styles are within the html code and not separate. Creating web pages using CSS and Dreamweaver CS3 Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation of a document written in a markup language. Its most common application

More information

More cool scripts: Slide Show: What the settimeout() function does:

More cool scripts: Slide Show: What the settimeout() function does: More cool scripts: Slide Show: So far the user has controlled the action. However, you can make a slide show that automatically cycles through each image in an array and goes to the next image at an incremental

More information

HTML: The Basics & Block Elements

HTML: The Basics & Block Elements HTML: The Basics & Block Elements CISC 282 September 13, 2017 What is HTML? Hypertext Markup Language Markup language "Set of words or symbols" Assigns properties to text Not actually part of the text

More information

Lecture 5 Vertex and Fragment Shaders-1. CITS3003 Graphics & Animation

Lecture 5 Vertex and Fragment Shaders-1. CITS3003 Graphics & Animation Lecture 5 Vertex and Fragment Shaders-1 CITS3003 Graphics & Animation E. Angel and D. Shreiner: Interactive Computer Graphics 6E Addison-Wesley 2012 Objectives The rendering pipeline and the shaders Data

More information

Chapter 1 Getting Started with HTML 5 1. Chapter 2 Introduction to New Elements in HTML 5 21

Chapter 1 Getting Started with HTML 5 1. Chapter 2 Introduction to New Elements in HTML 5 21 Table of Contents Chapter 1 Getting Started with HTML 5 1 Introduction to HTML 5... 2 New API... 2 New Structure... 3 New Markup Elements and Attributes... 3 New Form Elements and Attributes... 4 Geolocation...

More information

CSC309 Midterm Exam Summer 2007

CSC309 Midterm Exam Summer 2007 UNIVERSITY OF TORONTO Faculty of Arts and Science Midterm Exam July 2007 CSC 309 H1 F Instructor Dr. Radu Negulescu Duration 1 hour Examination Aids: One single-sided page containing notes NAME STUDENT

More information

UNIVERSITY OF TORONTO Faculty of Arts and Science DECEMBER 2015 EXAMINATIONS. CSC309H1 F Programming on the Web Instructor: Ahmed Shah Mashiyat

UNIVERSITY OF TORONTO Faculty of Arts and Science DECEMBER 2015 EXAMINATIONS. CSC309H1 F Programming on the Web Instructor: Ahmed Shah Mashiyat UNIVERSITY OF TORONTO Faculty of Arts and Science DECEMBER 2015 EXAMINATIONS CSC309H1 F Programming on the Web Instructor: Ahmed Shah Mashiyat Duration - 2 hours No Aid Allowed, Pass Mark: 14 out of 35

More information

WebGL. WebGL. Bring 3D to the Masses. WebGL. The web has text, images, and video. We want to support. Put it in on a webpage

WebGL. WebGL. Bring 3D to the Masses. WebGL. The web has text, images, and video. We want to support. Put it in on a webpage WebGL WebGL Patrick Cozzi University of Pennsylvania CIS 565 - Fall 2012 The web has text, images, and video What is the next media-type? We want to support Windows, Linux, Mac Desktop and mobile 2 Bring

More information

Digital Asset Management 2. Introduction to Digital Media Format

Digital Asset Management 2. Introduction to Digital Media Format Digital Asset Management 2. Introduction to Digital Media Format 2009-09-24 Outline Image format and coding methods Audio format and coding methods Video format and coding methods Introduction to HTML

More information

Documents and computation. Introduction to JavaScript. JavaScript vs. Java Applet. Myths. JavaScript. Standard

Documents and computation. Introduction to JavaScript. JavaScript vs. Java Applet. Myths. JavaScript. Standard Introduction to Prof. Ing. Andrea Omicini II Facoltà di Ingegneria, Cesena Alma Mater Studiorum, Università di Bologna andrea.omicini@unibo.it Documents and computation HTML Language for the description

More information

Stamp Builder. Documentation. v1.0.0

Stamp  Builder. Documentation.   v1.0.0 Stamp Email Builder Documentation http://getemailbuilder.com v1.0.0 THANK YOU FOR PURCHASING OUR EMAIL EDITOR! This documentation covers all main features of the STAMP Self-hosted email editor. If you

More information

CS134 Web Site Design & Development. Quiz1

CS134 Web Site Design & Development. Quiz1 CS134 Web Site Design & Development Quiz1 Name: Score: Email: I Multiple Choice Questions (2 points each, total 20 points) 1. Which of the following is an example of an IP address? a. www.whitehouse.gov

More information

Introduction to WEB PROGRAMMING

Introduction to WEB PROGRAMMING Introduction to WEB PROGRAMMING Web Languages: Overview HTML CSS JavaScript content structure look & feel transitions/animation s (CSS3) interaction animation server communication Full-Stack Web Frameworks

More information

GIMP WEB 2.0 MENUS. Web 2.0 Menus: Horizontal Navigation Bar

GIMP WEB 2.0 MENUS. Web 2.0 Menus: Horizontal Navigation Bar GIMP WEB 2.0 MENUS Web 2.0 Menus: Horizontal Navigation Bar WEB 2.0 MENUS: HORIZONTAL NAVIGATION BAR Hover effect: You may create your button in GIMP. Mine is 122 pixels by 48 pixels. You can use whatever

More information

Dreamweaver CS3 Lab 2

Dreamweaver CS3 Lab 2 Dreamweaver CS3 Lab 2 Using an External Style Sheet in Dreamweaver Creating the site definition First, we'll set up the site and define it so that Dreamweaver understands the site structure for your project.

More information

Header. Report Section. Footer

Header. Report Section. Footer Scan&Solve Cheat Sheet for Modifying Report Format Scan&Solve uses template files to construct the web-ready reports when the [Report ] button is clicked in the View tab. These template files, located

More information

CREATING A BUTTON IN PHOTOSHOP

CREATING A BUTTON IN PHOTOSHOP CREATING A BUTTON IN PHOTOSHOP Step 1: Create the Photoshop Document Our button will be exactly 170px wide and 50px tall, but we ll make a bigger canvas (600x600px) so that we have some breathing room

More information

XML Applications. Prof. Andrea Omicini DEIS, Ingegneria Due Alma Mater Studiorum, Università di Bologna a Cesena

XML Applications. Prof. Andrea Omicini DEIS, Ingegneria Due Alma Mater Studiorum, Università di Bologna a Cesena XML Applications Prof. Andrea Omicini DEIS, Ingegneria Due Alma Mater Studiorum, Università di Bologna a Cesena Outline XHTML XML Schema XSL & XSLT Other XML Applications 2 XHTML HTML vs. XML HTML Presentation

More information

Designing and Developing a Website. December Sample Exam Marking Scheme

Designing and Developing a Website. December Sample Exam Marking Scheme Designing and Developing a Website December 2015 Sample Exam Marking Scheme This marking scheme has been prepared as a guide only to markers. This is not a set of model answers, or the exclusive answers

More information

Shaders. Slide credit to Prof. Zwicker

Shaders. Slide credit to Prof. Zwicker Shaders Slide credit to Prof. Zwicker 2 Today Shader programming 3 Complete model Blinn model with several light sources i diffuse specular ambient How is this implemented on the graphics processor (GPU)?

More information