Egghead Instructor Keith Peters

Keith Peters

Keith Peters is a developer based in the Boston area. He is the author / coauthor of over a dozen programming books including Playing with Chaos: Programming Fractals and Strange Attractors in JavaScript and HTML 5 Animation with Javascript and the Actionscript 3.0 Cookbook.



Unlock all of Keith's PRO Lessons
click for instant access!

Browse Keith Peters's lessons.

showing 46 lessons...

Create a directional light source in WebGL

P

Draw a multicolored cube with WebGL drawElements

P

Fix clipping and aspect ratio by implementing perspective in WebGL

P

Use an image to texture a WebGL object

P

Draw a complex 3D Model with WebGL Triangle Strips

P

Draw more complex 3D Models using Triangle Fans in WebGL

P

Consolidate data into a single WebGL vertex array

P

Apply varying colors per-vertex to WebGL triangles

Dot Product in JavaScript

P

3D Transformation Matrices in WebGL

P

Using a Matrix Library for WebGL

P

User Interaction in WebGL

P

Animating WebGL Vertices

P

Loading in WebGL Shaders

P

Drawing Arrays in WebGL

P

WebGL Vertex Buffers

P

Passing Data to WebGL Shaders

P

Introduction to WebGL Shaders

P

Setting Up WebGL

Shape Objects in GIF Loop Coder

P

Colors in GIF Loop Coder

P

Outputting Animations from GIF Loop Coder

P

Custom Drawing in GIF Loop Coder

P

GIF Loop Coder - Interpolation

P

GIF Loop Coder Single Mode

P

GIF Loop Coder - Animation Functions

P

GIF Loop Coder - Introduction

The Phase Property in GIF Loop Coder

P

Parenting in GIF Loop Coder

P

GIF Loop Coder - Animating with Arrays

Web Audio API: The Delay Node

P

Web Audio: Playing Back Audio Files

P

Chaining Web Audio Nodes

P

Intro to the Web Audio API

P

Animating with Canvas

P

Listening for Mouse and Keyboard Events with HTML Canvas

P

Canvas and Pixels

P

Canvas Transformations

P

Canvas Effects

P

HTML Canvas and Images

P

Drawing Text on Canvas

P

Gradient Fills on the HTML5 Canvas

P

Drawing Styles on HTML5 Canvas

P

Drawing Paths - Curves and Arcs

P

Drawing Paths - Lines and Rectangles

Introduction to the HTML Canvas element

js tutorial about Create a directional light source in WebGL

Create a directional light source in WebGL

8:16 js PRO

An introduction to light sources in WebGL. We will start with an overview the different types of lighting in WebGL. This lesson will cover creating a directional light source of a certain color, setting normals on vertices, and use these two things to calculate the color of a surface at any point.

js tutorial about Draw a multicolored cube with WebGL drawElements

Draw a multicolored cube with WebGL drawElements

6:08 js PRO

In this lesson, we look at how to draw more complex shape by building a list of indices that define different shapes to draw. This lets us re-use vertices to draw different parts of the shape.

js tutorial about Fix clipping and aspect ratio by implementing perspective in WebGL

Fix clipping and aspect ratio by implementing perspective in WebGL

8:20 js PRO

In this lesson we actually handle several issues - perspective, clipping and aspect ratio. The perspective method that is used handles all of these issues.

js tutorial about Use an image to texture a WebGL object

Use an image to texture a WebGL object

11:21 js PRO

This video will cover how to load and apply textures to 3d forms in WebGL. This video scratches the surface of textures in WebGL. For more information on textures, check out the MDN docs on WebGL.

js tutorial about Draw a complex 3D Model with WebGL Triangle Strips

Draw a complex 3D Model with WebGL Triangle Strips

5:42 js PRO

In this lesson we start doing some more advanced modeling by connecting multiple triangles into a single surface with a simple for-loop. We will review the different modes WebGL has for drawing arrays. After reviewing, triangle strip will be used to create a complex mathematical 3D form.

js tutorial about Draw more complex 3D Models using Triangle Fans in WebGL

Draw more complex 3D Models using Triangle Fans in WebGL

3:49 js PRO

This time we look at the last drawing mode, triangle fan, which can be useful for drawing different types of 3d forms. Combine this mode with triangle strip to creating complex models.

js tutorial about Consolidate data into a single WebGL vertex array

Consolidate data into a single WebGL vertex array

5:44 js PRO

In this lesson, we look at how to consolidate different data, such as position and color, into a single vertex array. This becomes more important as we keep adding attributes such as per-vertex data for lighting and textures. We will update the stride value in the vertexAttribPointer method to accommodate these changes.

js tutorial about Apply varying colors per-vertex to WebGL triangles

Apply varying colors per-vertex to WebGL triangles

4:55 js

In this lesson we will apply a single color per vertex and see how those colors are interpolated across an entire triangle, making use of a new kind of shader variable. We will also see how enabling gl.DEPTH_TEST will give our model proper depth by having webGL pay attention to z-values.
Note:
This lesson assumes prior knowledge in WebGL. Check out Create 3D Graphics in JavaScript Using WebGL for an in depth introduction to WebGL if some of these concepts are feeling unfamiliar.

js tutorial about Dot Product in JavaScript

Dot Product in JavaScript

11:12 js PRO

This lesson explores the dot product method, two ways to calculate it and some useful examples.

js tutorial about 3D Transformation Matrices in WebGL

3D Transformation Matrices in WebGL

6:36 js PRO

In this lesson, we look at how to create and apply 3D transformation matrices to rotate and perform other transformations on 3D shapes created in WebgL.

js tutorial about Using a Matrix Library for WebGL

Using a Matrix Library for WebGL

3:57 js PRO

In this lesson, we see the benefits of using a 3rd party 3D matrix library for performing 3D matrix transformations.

js tutorial about User Interaction in WebGL

User Interaction in WebGL

3:10 js PRO

In this lesson we accomplish some simple user interaction with animated 3D vertices.

js tutorial about Animating WebGL Vertices

Animating WebGL Vertices

6:03 js PRO

In this lesson, we take a look at a simple way of animating vertices in WebGL by simply changing the values of vertices.

js tutorial about Loading in WebGL Shaders

Loading in WebGL Shaders

2:28 js PRO

In this lesson we look at a better way of writing WebGL shaders - loading them in from script tags rather than concatenating JavaScript strings.

js tutorial about Drawing Arrays in WebGL

Drawing Arrays in WebGL

3:52 js PRO

In this lesson, we look at the different drawing modes you can use in gl.drawArrays and how to selectively draw subsets of a full vertex array.

js tutorial about WebGL Vertex Buffers

WebGL Vertex Buffers

5:56 js PRO

In this lesson we cover how to pass an entire array of 3d points to a vertex shader, allowing you to render multiple points at once.

js tutorial about Passing Data to WebGL Shaders

Passing Data to WebGL Shaders

5:22 js PRO

In this lesson we cover how to pass data into a WebGL shader from the main JavaScript program.

js tutorial about Introduction to WebGL Shaders

Introduction to WebGL Shaders

6:20 js PRO

In this lesson we learn about the two types of shaders required in WebGL - vertex shaders and fragment shaders. We create one of each and see how those shader programs affect what is drawn on the screen.

js tutorial about Setting Up WebGL

Setting Up WebGL

4:20 js

In this lesson we cover setting up WebGL for use, including creating a canvas, getting the WebGL rendering context and clearing the canvas to a particular color.

js tutorial about Shape Objects in GIF Loop Coder

Shape Objects in GIF Loop Coder

5:53 js PRO

This lesson is a quick tour of the predefined shape objects in GIF Loop Coder.

js tutorial about Colors in GIF Loop Coder

Colors in GIF Loop Coder

6:28 js PRO

In this lesson we cover the different methods for defining and animating colors in GIF Loop Coder.

js tutorial about Outputting Animations from GIF Loop Coder

Outputting Animations from GIF Loop Coder

5:11 js PRO

Let's discuss all the different formats that GIF Loop Coder can output animations as. We'll also look at different ways to optimize output file size.

js tutorial about Custom Drawing in GIF Loop Coder

Custom Drawing in GIF Loop Coder

4:40 js PRO

We'll look at how you can access the raw HTML5 Canvas in GIF Loop Coder and use it to draw whatever you want, in addition to the animated shapes that are a core part of GLC.

js tutorial about GIF Loop Coder - Interpolation

GIF Loop Coder - Interpolation

6:29 js PRO

This video discusses the default interpolation in GIF Loop Coder, and four distinct ways to change that interpolation to add variety to your animations.

js tutorial about GIF Loop Coder Single Mode

GIF Loop Coder Single Mode

4:34 js PRO

We'll take a look at Single Mode animations and strategies for making this type of animation smoothly loop.

js tutorial about GIF Loop Coder - Animation Functions

GIF Loop Coder - Animation Functions

7:20 js PRO

Animating with arrays is super simple with GIF Loop Coder, but using an animation function can give you the power to create much more complex animations.

js tutorial about GIF Loop Coder - Introduction

GIF Loop Coder - Introduction

6:10 js

In this video, I'll introduce you to the program, GIF Loop Coder, which allows you to make looping animated gifs (and other types of animations) using JavaScript and HTML5 Canvas. We'll cover the basic UI and syntax of how to add objects to the animation list, animate them and save the result as an animated gif.

js tutorial about The Phase Property in GIF Loop Coder

The Phase Property in GIF Loop Coder

5:10 js PRO

In this lesson, we look at one of the most powerful features in GIF Loop Coder, the phase property, which allows you to let different objects run animations shifted in time.

js tutorial about Parenting in GIF Loop Coder

Parenting in GIF Loop Coder

4:02 js PRO

In this lesson, we look at how you can build up complex animations by assigning one shape as the parent of another, creating a branching display tree.

js tutorial about GIF Loop Coder - Animating with Arrays

GIF Loop Coder - Animating with Arrays

5:28 js

In this lesson, we discuss animating using arrays, and how different data types are interpolated while animating.

js tutorial about Web Audio API: The Delay Node

Web Audio API: The Delay Node

3:51 js PRO

In this lesson, we cover the delay node, creating an echo effect.

js tutorial about Web Audio: Playing Back Audio Files

Web Audio: Playing Back Audio Files

4:59 js PRO

In this lesson we cover how to load external audio files, such as mp3s, and play them back with the web audio api, including altering playback speed, and look at some of the parameters to the start method.

js tutorial about Chaining Web Audio Nodes

Chaining Web Audio Nodes

6:27 js PRO

In this lesson, we learn about a couple of new types of nodes and see how to chain multiple nodes together to create various special effects.

js tutorial about Intro to the Web Audio API

Intro to the Web Audio API

4:34 js PRO

An introduction to the Web Audio API. In this lesson, we cover creating an audio context and an oscillator node that actually plays a sound in the browser, and different ways to alter that sound.

js tutorial about Animating with Canvas

Animating with Canvas

9:18 js PRO

In this lesson, we cover several different ways to animate graphics drawn to Canvas.

js tutorial about Listening for Mouse and Keyboard Events with HTML Canvas

Listening for Mouse and Keyboard Events with HTML Canvas

10:40 js PRO

In this lesson, listening for and handling mouse and keyboard events in Canvas is covered.

js tutorial about Canvas and Pixels

Canvas and Pixels

10:38 js PRO

In this lesson, you'll learn how to read and write individual pixel color values from a canvas.

js tutorial about Canvas Transformations

Canvas Transformations

8:44 js PRO

Transformations can change the default canvas coordinate system and create complex drawings with much less code.

js tutorial about Canvas Effects

Canvas Effects

7:14 js PRO

Learn some of the different ways you can affect the graphical content that you are drawing to a canvas. We'll cover global alpha, global composite operations and shadows.

js tutorial about HTML Canvas and Images

HTML Canvas and Images

6:50 js PRO

In addition to vector drawing, you can draw bitmap images into a canvas, and also retrieve a bitmap based on the content in a canvas.

js tutorial about Drawing Text on Canvas

Drawing Text on Canvas

6:45 js PRO

With the HTML canvas you can easily draw text as well as graphics. Let's take a look at basic text manipulation on the canvas.

js tutorial about Gradient Fills on the HTML5 Canvas

Gradient Fills on the HTML5 Canvas

5:20 js PRO

When drawing on the HTML5 canvas element, your fills aren't limited to flat colors. You can use gradients to get smoothly blended color fills on your drawn elements.

js tutorial about Drawing Styles on HTML5 Canvas

Drawing Styles on HTML5 Canvas

5:31 js PRO

You aren't limited to boring black lines when drawing on the HTML5 canvas element. Using styles, you can program interesting colorful images with JavaScript.

js tutorial about Drawing Paths - Curves and Arcs

Drawing Paths - Curves and Arcs

5:16 js PRO

When drawing on your HTML canvas in JavaScript, you aren't restricted to straight lines. Using curves and arcs you are able to create smooth curved lines.

js tutorial about Drawing Paths - Lines and Rectangles

Drawing Paths - Lines and Rectangles

3:06 js

Now that we have an HTML5 canvas to draw on, let's take a look at drawing simple lines and rectangles with JavaScript

js tutorial about Introduction to the HTML Canvas element

Introduction to the HTML Canvas element

4:55 js

The HTML Canvas element allows us to access powerful drawing APIs from JavaScript. In this lesson, the first in a series, we will learn about <canvas>, and get ready to start drawing.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?