Web Programming 1 Packet #5: Canvas and JavaScript
|
|
- Amber Wilkins
- 6 years ago
- Views:
Transcription
1 Web Programming 1 Packet #5: Canvas and JavaScript Name: Objectives: By the completion of this packet, students should be able to: use JavaScript to draw on the canvas element Canvas Element. This is a new html element that was introduced as part of html 5. You use this element in the body of a page. <!DOCTYPE html><html> <head> <meta charset="utf-8" ><title>canvas</title> <style> canvas{ border:black thin solid; background-color: #FCF; } </style> </head> <body> <h1>canvas</h1> <canvas id="cv" width="200" height="200">your browser does not support the canvas element. </canvas> <p>there is a canvas above this paragraph.</p> </body> </html> Important. 1) Any text between the opening and closing canvas tags are only displayed if the browser does NOT recognize the canvas tags. In other words, old browsers will display the text and not the element. 2) The width and height attributes in the opening tag determine the coordinate space. 3) The purpose of the canvas is to define an area where the things can be drawn using JavaScript. Without JavaScript there is no reason to have a canvas element. There are different ways to draw on a canvas element. We will only be looking at ways to use JavaScript to draw on the canvas. There are other tools (e.g. SVG and WebGL) that have certain advantages and disadvantages but we will not be discussing those technologies. Page 1
2 Drawing On a Canvas. The following code simply expands on the previous code. <!DOCTYPE html> <html> <head> <meta charset="utf-8" ><title>canvas</title> <style> #cv{ border:thin black solid; background-color:#fcf; } </style> <script> function draw() { var canvas = document.getelementbyid( "cv" ); var context = canvas.getcontext('2d'); context.beginpath(); // starts a list of instructions context.strokestyle = "#ff00000"; // can define a color, gradient, or pattern context.linewidth = 5; // line width in pixels context.moveto( 5, 5 ); // starts sub-path at x = 5, y = 5 context.lineto( 50, 200 ); // adds point to the sub-path and a line to prev. point context.lineto( 100, 0 ); // adds point to the sub-path and a line to prev. point context.closepath(); // adds line to the start and closes the path } </script> </head> context.stroke(); // draws the sub-path using the current stroke <body onload="draw()"> <h1>canvas</h1> <canvas id="cv" width="200" height="200">this browser does not support the canvas element. Please upgrade your browser.</canvas> <p>there is a canvas above this paragraph.</p> </body> -y </html> Coordinate Space. The upper left hand corner of the canvas is the origin. The size is 200 by 200 because of the width and height attributes in the canvas tag. -x 200 +x Anything draw outside of this coordinate space will not be displayed y Page 2
3 Exercise 1. Create the page to the right. There is an h1 element followed by a 300 by 300 pixel canvas element. Write a function that draws 4 black lines to each of the midpoints of the edges of the canvas. The lines should be 10 pixels wide. Then, in the same function, draw 4 white lines that follow the same path except these lines are only 1 pixel wide. Hint. You are making two paths and will need to call stroke() for each path. This image should be displayed when the page is loaded. Use CSS to change the canvas s background color. Exercise 2. Create the page to the right. There is a canvas element that has a width of 300 and a height of 100. Follow these guidelines: Create two paths: one for the green lines and one for the black lines. The green lines are 20 pixels wide and the black lines are 1 pixel wide. The coordinates are all multiples of 25. The black lines have the same coordinates as the green lines. This image should be displayed when the page is loaded. Notice that when the width of a line is greater than 1, it spreads to the left and right of its center. There is a property, linecap, that controls how the end of a line looks. It has three possible values: butt, round, or square. Here s some sample code. var canvas = document.getelementbyid( "cv" ); var context = canvas.getcontext('2d'); context.linecap = "round"; // or butt or square Change your code for exercise 2 to produce the other two figure. Obviously the middle figure is round. Is the top figure butt and the bottom square or vice versa? Which is the default value? Page 3
4 Quick Review. Here are the basic steps for drawing on the canvas. Code Explanation var can = document.getelementbyid( " " ); Get a reference to the canvas. var ctx = can.getcontext('2d'); getcontext returns an object that we use to ctx.moveto(, ); ctx.lineto(, );... ctx.closepath(); // optional draw on the canvas. Define a path which is a series of points. Right now all we know about is moveto and lineto but there are other methods we can use. closepath draws a straight line from the last point to the first point in the path ctx.strokestyle = "color"; Define line color. Default is black. ctx.linewidth = 5; Define line width. ctx.linecap = "round/square/butt"; Define how the lines are capped Draw (aka render) the path. You may describe the line then the path, or vice versa, but call stroke last. NEW. In addition to the stroke to be used with a path, you can also define the fill. For example: var can = document.getelementbyid( "some_id" ); var ctx = can.getcontext('2d'); // the path is a triangle ctx.moveto( 100, 100 ); ctx.lineto( 150, 150 ); ctx.lineto( 50, 150 ); ctx.closepath(); ctx.fillstyle = "#990099"; // fill color ctx.fill(); // renders, aka draws, the fill ctx.strokestyle = "#AAAAAA"; // line color ctx.linewidth= 5; // line width // render the line NOTE. It makes a difference whether you call fill() then stroke() or stroke() then fill(). Exercise 3. Create the page to the right. The canvas is 100 by 200. Use CSS to color the canvas s background. Your figure doesn t have to look exactly like this but it should look at least as good. Use different colors for the stroke and the fill. Page 4
5 Rectangles. To draw the outline of a rectangle: var c=document.getelementbyid("mycanvas"); var ctx=c.getcontext("2d"); ctx.strokerect( 20, 20, 150, 100 ); - sample code from strokerect() both defines the rectangle and draws the stroke around it. The first two numbers are the x/y coordinates of the rectangle s upper left hand corner. The last two numbers are the rectangle s width and height. All units are in pixels. Similarly, to draw a filled rectangle: var c=document.getelementbyid("mycanvas"); var ctx=c.getcontext("2d"); ctx.fillrect(20,20,150,100); - sample code from Notice that these methods do NOT require you to construct a path. Exercise 4. Create the page to the right. The canvas is 300 by 200. Your house does not have to look exactly like mine but: the sky is blue the grass is green. there are four rectangles. Exercise 5. Create the page to the right. The canvas is 250 by 250. Use CSS to make the canvas s background color red. Draw exactly four squares (and nothing else) where each square is 100 by 100. Yes, I know that the figure only shows two squares. You have to figure out drawing four squares yields this figure. The strokes are black and 4 pixels wide. Use the following values for the colors of the fills: # # # #CCCCCC Page 5
6 Arcs and Circles. The arc() method can be used to draw a circle or a portion of a circle. arc( x, y, radius, starting angle, ending angle, true/false ) x, y: coordinates of the center of the circle. starting angle where the arc starts as measured in radians. 0 radians is at 3 o clock. 0.5*pi radians is 6 o clock, pi radians is 9 o clock, and so on. See for more information. ending angle true/false where the arc ends as measured in radians from the right optional. If true then the drawing is counter-clockwise. False indicates clockwise. False is the default value. Here are some examples. Assume they all start with following two lines: var c=document.getelementbyid("mycanvas"); var ctx=c.getcontext("2d"); The canvas is 100 by 100 with a gray background. ctx.arc( 50, 50, 25, 0, Math.PI, true ); ctx.arc( 50, 50, 25, 0, Math.PI, false ); ctx.arc( 50, 50, 50, 0, 2* Math.PI ); ctx.arc( 50, 50, 25, 0, 2* Math.PI ); ctx.fillstyle = "red"; ctx.fill(); ctx.linewidth = 4; ctx.arc( 25, 50, 25, 1.5* Math.PI, 0, false ); ctx.arc( 75, 50, 25, Math.PI, 0.5*Math.PI, true ); ctx.arc( 50, 30, 25, 0, Math.PI, true ); ctx.lineto( 50, 95 ); ctx.closepath(); ctx.linewidth = 3; ctx.fillstyle = "green"; ctx.fill(); Note. When drawing a circle, the starting and ending angles simply need to be 2 pi or more apart. Page 6
7 Exercise 6. Create the page to the right. The canvas is 200 by 200. Use CSS to change the canvas s background color. You may use more than one path. Exercise 7. Create the page to the right. The canvas is 300 by 150. Use CSS to change the canvas s background color. Use only one path. Change the thickness of the stroke and the fill color. Exercise 8. Create the page to the right. The canvas is 250 by 250. Use CSS to change the canvas s background color. Exercise 8. Create the figure shown below. There is no border around the canvas and its background is white by default. You pick the canvas size. My function is about 30 lines long. Page 7
CS7026 HTML5. Canvas
CS7026 HTML5 Canvas What is the element HTML5 defines the element as a resolution-dependent bitmap canvas which can be used for rendering graphs, game graphics, or other visual images
More informationIntroduction to HTML5
Introduction to HTML5 Creating Lines, Rectangles, Setting Colors, Gradients, Circles and Curves By Dana Corrigan Intro This document is going to talk about the basics of HTML, beginning with creating primitive
More informationThis is an open-book, open-notes, open-computer exam. You may not consult with anyone other than the instructor while working on this exam.
FINAL EXAM KEY SPRING 2016 CSC 105 INTERACTIVE WEB DOCUMENTS NICHOLAS R. HOWE This is an open-book, open-notes, open-computer exam. You may not consult with anyone other than the instructor while working
More informationBioinformatics Resources
Bioinformatics Resources Lecture & Exercises Prof. B. Rost, Dr. L. Richter, J. Reeb Institut für Informatik I12 Slides by D. Nechaev Recap! Why do we even bother with JavaScript?! Because JavaScript allows
More informationAppendix A Canvas Reference
Appendix A Canvas Reference BC2 HTML5 GAMES CREATING FUN WITH HTML5, CSS3, AND WEBGL The Canvas Element See the official W3C specification for full details on the canvas element (www.w3.org/tr/ html5/the-canvas-element.html.
More informationA user-friendly reference guide HTML5 & CSS3 SAMPLE CHAPTER. Rob Crowther MANNING
A user-friendly reference guide HTML5 & CSS3 SAMPLE CHAPTER Rob Crowther MANNING Hello! HTML5 & CSS3 by Rob Crowther Chapter 3 Copyright 2013 Manning Publications Brief contents PART 1 LEARNING HTML5 1
More informationVisualizing 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 informationINTRODUCTION INSTRUCTOR ROBYN OVERSTREET
INTRODUCTION INSTRUCTOR ROBYN OVERSTREET WHAT IS HTML5 CANVAS? HTML5 element, now part of HTML5 API! Used for drawing and animahng directly in HTML, with JavaScript scriphng! Originally developed by Apple
More information<script type="text/javascript" src="breakout.js"> </script>
This lesson brings together everything we've learned so far. We will be creating a breakout game. You can see it on http://www.ripcoder.com/classnotes/32/8/breakout.html It is great to think that you have
More informationTime series in html Canvas
Time series in html Canvas In this tutorial, we will create an html document and use it to animate a time series. html html (Hypertext Markup Language) is used to make web pages. No software is needed
More informationConduit 2.0 tutorial: Rendering graphics and text using the Canvas node
Conduit 2.0 tutorial: Rendering graphics and text using the Canvas node Author: Pauli Ojala This tutorial will show how to use the Canvas node to render custom graphics and text. The end result will be
More informationUsing the Canvas API. Overview of HTML5 Canvas C H A P T E R 2. History. SVG versus Canvas
C H A P T E R 2 Using the Canvas API In this chapter, we ll explore what you can do with the Canvas API a cool API that enables you to dynamically generate and render graphics, charts, images, and animation.
More informationScalable Vector Graphics (SVG) vector image World Wide Web Consortium (W3C) defined with XML searched indexed scripted compressed Mozilla Firefox
SVG SVG Scalable Vector Graphics (SVG) is an XML-based vector image format for twodimensional graphics with support for interactivity and animation. The SVG specification is an open standard developed
More information/
HTML5 Audio & Video HTML5 introduced the element to include audio files in your pages. The element has a number of attributes which allow you to control audio playback: src This
More informationEverything 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 informationImproving Yioop! User Search Data Usage
Improving Yioop! User Search Data Usage A Writing Report Presented to The Faculty of the Department of Computer Science San José State University In Partial Fulfillment of the Requirements for the Degree
More informationCISC 1600, Lab 2.1: Processing
CISC 1600, Lab 2.1: Processing Prof Michael Mandel 1 Getting set up For this lab, we will be using Sketchpad, a site for building processing sketches online using processing.js. 1.1. Go to http://cisc1600.sketchpad.cc
More informationD3js Tutorial. Tom Torsney-Weir Michael Trosin
D3js Tutorial Tom Torsney-Weir Michael Trosin http://www.washingtonpost.com/wp-srv/special/politics Contents Some important aspects of JavaScript Introduction to SVG CSS D3js Browser-Demo / Development-Tools
More informationCREATING 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 informationPaint Tutorial (Project #14a)
Paint Tutorial (Project #14a) In order to learn all there is to know about this drawing program, go through the Microsoft Tutorial (below). (Do not save this to your folder.) Practice using the different
More informationSam Weinig Safari and WebKit Engineer. Chris Marrin Safari and WebKit Engineer
Sam Weinig Safari and WebKit Engineer Chris Marrin Safari and WebKit Engineer 2 3 4 5 Simple presentation of complex data 6 Graphs can be interactive California County: San Francisco Population: 845,559
More informationCISC 1600, Lab 3.1: Processing
CISC 1600, Lab 3.1: Processing Prof Michael Mandel 1 Getting set up For this lab, we will be using OpenProcessing, a site for building processing sketches online using processing.js. 1.1. Go to https://www.openprocessing.org/class/57767/
More informationDrawing a Pie Chart. Drawing a Pie Chart. Chapter 6. Setting the Canvas
Chapter 6 Drawing a Pie Chart Similar to what you have done in the last two chapters, in this chapter, you will learn to build a pie chart, using the data contained in your HTML table. Starting from the
More informationGIMP WEB 2.0 ICONS. GIMP is all about IT (Images and Text) OPEN GIMP
GIMP WEB 2.0 ICONS Web 2.0 Banners: Download E-Book WEB 2.0 ICONS: DOWNLOAD E-BOOK OPEN GIMP GIMP is all about IT (Images and Text) Step 1: To begin a new GIMP project, from the Menu Bar, select File New.
More informationHow to draw and create shapes
Adobe Flash Professional Guide How to draw and create shapes You can add artwork to your Adobe Flash Professional documents in two ways: You can import images or draw original artwork in Flash by using
More informationLearn HTML5 in 5 Minutes!
Learn HTML5 in 5 Minutes! By Jennifer Marsman There s no question, HTML5 is a hot topic for developers. If you need a crash course to quickly understand the fundamentals of HTML5 s functionality, you re
More information1. Complete these exercises to practice creating user functions in small sketches.
Lab 6 Due: Fri, Nov 4, 9 AM Consult the Standard Lab Instructions on LEARN for explanations of Lab Days ( D1, D2, D3 ), the Processing Language and IDE, and Saving and Submitting. Rules: Do not use the
More information16. HTML5, HTML Graphics, & HTML Media 웹프로그래밍 2016 년 1 학기 충남대학교컴퓨터공학과
16. HTML5, HTML Graphics, & HTML Media 웹프로그래밍 2016 년 1 학기 충남대학교컴퓨터공학과 목차 HTML5 Introduction HTML5 Browser Support HTML5 Semantic Elements HTML5 Canvas HTML5 SVG HTML5 Multimedia 2 HTML5 Introduction What
More informationMul$media im Netz (Online Mul$media) Wintersemester 2014/15. Übung 03 (Haup9ach)
Mul$media im Netz (Online Mul$media) Wintersemester 2014/15 Übung 03 (Haup9ach) Ludwig- Maximilians- Universität München Mul?media im Netz WS 2014/15 - Übung 3-1 Today s Agenda PHP Assignments: Discuss
More informationMTA EXAM HTML5 Application Development Fundamentals
MTA EXAM 98-375 HTML5 Application Development Fundamentals 98-375: OBJECTIVE 3 Format the User Interface by Using CSS LESSON 3.4 Manage the graphical interface by using CSS OVERVIEW Lesson 3.4 In this
More informationSolution Notes. COMP 151: Terms Test
Family Name:.............................. Other Names:............................. ID Number:............................... Signature.................................. Solution Notes COMP 151: Terms
More informationPaint/Draw Tools. Foreground color. Free-form select. Select. Eraser/Color Eraser. Fill Color. Color Picker. Magnify. Pencil. Brush.
Paint/Draw Tools There are two types of draw programs. Bitmap (Paint) Uses pixels mapped to a grid More suitable for photo-realistic images Not easily scalable loses sharpness if resized File sizes are
More informationGraphics and Java 2D Introduction OBJECTIVES. One picture is worth ten thousand words.
1 2 12 Graphics and Java 2D One picture is worth ten thousand words. Chinese proverb Treat nature in terms of the cylinder, the sphere, the cone, all in perspective. Paul Cézanne Colors, like features,
More informationWork with Shapes. Concepts CHAPTER. Concepts, page 3-1 Procedures, page 3-5
3 CHAPTER Revised: November 15, 2011 Concepts, page 3-1, page 3-5 Concepts The Shapes Tool is Versatile, page 3-2 Guidelines for Shapes, page 3-2 Visual Density Transparent, Translucent, or Opaque?, page
More informationFundamentals of Website Development
Fundamentals of Website Development CSC 2320, Fall 2015 The Department of Computer Science In this chapter History of HTML HTML 5-2- 1 The birth of HTML HTML Blows and standardization -3- -4-2 HTML 4.0
More informationGenerating Vectors Overview
Generating Vectors Overview Vectors are mathematically defined shapes consisting of a series of points (nodes), which are connected by lines, arcs or curves (spans) to form the overall shape. Vectors can
More informationNAVIGATION INSTRUCTIONS
CLASS :: 13 12.01 2014 NAVIGATION INSTRUCTIONS SIMPLE CSS MENU W/ HOVER EFFECTS :: The Nav Element :: Styling the Nav :: UL, LI, and Anchor Elements :: Styling the UL and LI Elements CSS DROP-DOWN MENU
More informationStep 1: Create A New Photoshop Document
Snowflakes Photo Border In this Photoshop tutorial, we ll learn how to create a simple snowflakes photo border, which can be a fun finishing touch for photos of family and friends during the holidays,
More informationWhat is the Box Model?
CSS Box Model What is the Box Model? The box model is a tool we use to understand how our content will be displayed on a web page. Each HTML element appearing on our page takes up a "box" or "container"
More informationJava How to Program, 9/e. Copyright by Pearson Education, Inc. All Rights Reserved.
Java How to Program, 9/e Copyright 1992-2012 by Pearson Education, Inc. All Rights Reserved. Overview capabilities for drawing two-dimensional shapes, controlling colors and controlling fonts. One of
More informationPractice Problems for Geometry from
1 (T/F): A line has no endpoint. 2 In Figure 2, angle DAE measures x, and angle DEC measures y. What is the degree measure of angle EBC? 3 (T/F): A triangle can have exactly two 60 degree angles. 4 An
More information1 Getting started with Processing
cisc3665, fall 2011, lab I.1 / prof sklar. 1 Getting started with Processing Processing is a sketch programming tool designed for use by non-technical people (e.g., artists, designers, musicians). For
More informationCMPSCI 120 Extra Credit #1 Professor William T. Verts
CMPSCI 120 Extra Credit #1 Professor William T. Verts Setting Up In this assignment you are to create a Web page that contains a client-side image map. This assignment does not build on any earlier assignment.
More informationDefault Parameters and Shapes. Lecture 18
Default Parameters and Shapes Lecture 18 Announcements PS04 - Deadline extended to October 31st at 6pm MT1 Date is now Tuesday 11/14 Warm-up Question #0: If there are 15 people and you need to form teams
More informationPASS4TEST. IT Certification Guaranteed, The Easy Way! We offer free update service for one year
PASS4TEST \ http://www.pass4test.com We offer free update service for one year Exam : 70-480 Title : Programming in HTML5 with JavaScript and CSS3 Vendor : Microsoft Version : DEMO Get Latest & Valid 70-480
More informationEducation and Training CUFMEM14A. Exercise 2. Create, Manipulate and Incorporate 2D Graphics
Education and Training CUFMEM14A Exercise 2 Create, Manipulate and Incorporate 2D Graphics Menu Exercise 2 Exercise 2a: Scarecrow Exercise - Painting and Drawing Tools... 3 Exercise 2b: Scarecrow Exercise
More informationLate Penalty: Late assignments will not be accepted.
CPSC 449 Assignment 1 Due: Monday, October 16, 2017 Sample Solution Length: Less than 100 lines to reach the A- level, including some comments Approximately 130 lines with the fill color being influenced
More informationGraphics. HCID 520 User Interface Software & Technology
Graphics HCID 520 User Interface Software & Technology PIXELS! 2D Graphics 2D Graphics in HTML 5 Raster Graphics: canvas element Low-level; modify a 2D grid of pixels.
More informationLearning to Code with SVG
Learning to Code with SVG Lesson Plan: Objective: Lab Time: Age range: Requirements: Resources: Lecture: Coding a Frog in SVG on a 600 by 600 grid Hands-on learning of SVG by drawing a frog with basic
More informationGraphics. HCID 520 User Interface Software & Technology
Graphics HCID 520 User Interface Software & Technology PIXELS! 2D Graphics 2D Raster Graphics Model Drawing canvas with own coordinate system. Origin at top-left, increasing down and right. Graphics
More informationIn this lesson, you ll learn how to:
LESSON 5: ADVANCED DRAWING TECHNIQUES OBJECTIVES In this lesson, you ll learn how to: apply gradient fills modify graphics by smoothing, straightening, and optimizing understand the difference between
More informationTUTORIAL: D3 (1) Basics. Christoph Kralj Manfred Klaffenböck
TUTORIAL: D3 (1) Basics Christoph Kralj christoph.kralj@univie.ac.at Manfred Klaffenböck manfred.klaffenboeck@univie.ac.at Overview Our goal is to create interactive visualizations viewable in your, or
More informationCS7026 CSS3. CSS3 Graphics Effects
CS7026 CSS3 CSS3 Graphics Effects What You ll Learn We ll create the appearance of speech bubbles without using any images, just these pieces of pure CSS: The word-wrap property to contain overflowing
More informationData Visualization (DSC 530/CIS )
Data Visualization (DSC 530/CIS 602-01) HTML, CSS, & SVG Dr. David Koop Data Visualization What is it? How does it differ from computer graphics? What types of data can we visualize? What tasks can we
More informationHotRod Module Examples
HotRod Module Examples 2016 Skybuilder.net Skybuilder.net HotRod Module 1 This is for illustrating how the HotRod module works, and the way to modify scripts you find on the Internet. Full Working Example
More informationLabVIEW Case and Loop Structures ABE 4423/6423 Dr. Filip To Ag and Bio Engineering, Mississippi State University
LabVIEW Case and Loop Structures ABE 4423/6423 Dr. Filip To Ag and Bio Engineering, Mississippi State University Recap Previous Homework Following Instruction Create a Pressure Conversion VI that takes
More informationReview: Rough Structure
Break Out Canvas Tutorial con/nue Simple Game: Break Out Animate, Game Elements ª Breakout ª Bill Mill Modified Tutorial So?ware developer in Maryland Elements: ª Color ª Collision Detec/on ª Interac/on
More informationPaths. "arc" (elliptical or circular arc), and. Paths are described using the following data attributes:
Paths Paths are described using the following data attributes: "moveto" (set a new current point), "lineto" (draw a straight line), "arc" (elliptical or circular arc), and "closepath" (close the current
More informationWeb Programming BootStrap Unit Exercises
Web Programming BootStrap Unit Exercises Start with the Notes packet. That packet will tell you which problems to do when. 1. Which line(s) are green? 2. Which line(s) are in italics? 3. In the space below
More informationWebGL (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 informationProgramming Lab 1 (JS Hwk 3) Due Thursday, April 28
Programming Lab 1 (JS Hwk 3) Due Thursday, April 28 Lab You may work with partners for these problems. Make sure you put BOTH names on the problems. Create a folder named JSLab3, and place all of the web
More informationGetting Started with JS-Eden
Getting Started with JS-Eden This activity will guide you through an introduction to JS-Eden. Starting JS-Eden You can open JS-Eden by pointing your web browser to: http://harfield.org.uk/jsedencanvas/
More informationWord 2007: Flowcharts Learning guide
Word 2007: Flowcharts Learning guide How can I use a flowchart? As you plan a project or consider a new procedure in your department, a good diagram can help you determine whether the project or procedure
More informationIntroduction To Inkscape Creating Custom Graphics For Websites, Displays & Lessons
Introduction To Inkscape Creating Custom Graphics For Websites, Displays & Lessons The Inkscape Program Inkscape is a free, but very powerful vector graphics program. Available for all computer formats
More informationImage 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 informationThis is the vector graphics "drawing" technology with its technical and creative beauty. SVG Inkscape vectors
1 SVG This is the vector graphics "drawing" technology with its technical and creative beauty SVG Inkscape vectors SVG 2 SVG = Scalable Vector Graphics is an integrated standard for drawing Along with
More informationCSCU9B2 Practical 8: Location-Aware Web Pages NOT USED (DOES NOT ALL WORK AS ADVERTISED)
CSCU9B2 Practical 8: Location-Aware Web Pages NOT USED (DOES NOT ALL WORK AS ADVERTISED) Aims: To use JavaScript to make use of location information. This practical is really for those who need a little
More informationComputer Graphics - Treasure Hunter
Computer Graphics - Treasure Hunter CS 4830 Dr. Mihail September 16, 2015 1 Introduction In this assignment you will implement an old technique to simulate 3D scenes called billboarding, sometimes referred
More informationCounter argument against Archimedes theory
Counter argument against Archimedes theory Copyright 007 Mohammad-Reza Mehdinia All rights reserved. Contents 1. Explanations and Links. Page 1-. Facts: Page 3-4 3. Counter argument against Archimedes
More informationUniversity of Cincinnati. P5.JS: Getting Started. p5.js
p5.js P5.JS: Getting Started Matthew Wizinsky University of Cincinnati School of Design HTML + CSS + P5.js File Handling & Management Environment Canvas Coordinates Syntax Drawing Variables Mouse Position
More informationMultimedia im Netz (Online Multimedia) Wintersemester 2014/15. Übung 11 (Hauptfach)
Multimedia im Netz (Online Multimedia) Wintersemester 2014/15 Übung 11 (Hauptfach) Ludwig-Maximilians-Universität München Online Multimedia WS 2014/15 - Übung 11-1 Today s Agenda Announcements & miscellaneous
More informationCreating Digital Illustrations for Your Research Workshop III Basic Illustration Demo
Creating Digital Illustrations for Your Research Workshop III Basic Illustration Demo Final Figure Size exclusion chromatography (SEC) is used primarily for the analysis of large molecules such as proteins
More informationState of the Open Web. Brad Neuberg, Google
State of the Open Web Brad Neuberg, Google http://flickr.com/photos/jamespaullong/164875156/ Who is this guy? Ajax Image CC: jopemoro/flickr Who is this guy? Ajax Image CC: jopemoro/flickr Ajax Who is
More informationHow to...create a Video VBOX Gauge in Inkscape. So you want to create your own gauge? How about a transparent background for those text elements?
BASIC GAUGE CREATION The Video VBox setup software is capable of using many different image formats for gauge backgrounds, static images, or logos, including Bitmaps, JPEGs, or PNG s. When the software
More informationGIMP WEB 2.0 BUTTONS
GIMP WEB 2.0 BUTTONS Web 2.0 Navigation: Web 2.0 Button with Navigation Arrow GIMP is all about IT (Images and Text) WEB 2.0 NAVIGATION: BUTTONS_WITH_NAVIGATION_ARROW This button navigation will be designed
More informationENGL 323: Writing for New Media Repurposing Content for the Web Part Two
ENGL 323: Writing for New Media Repurposing Content for the Web Part Two Dr. Michael Little michaellittle@kings.edu Hafey-Marian 418 x5917 Using Color to Establish Visual Hierarchies Color is useful in
More information1 Some easy lines (2, 17) (10, 17) (18, 2) (18, 14) (1, 5) (8, 12) Check with a ruler. Are your lines straight?
1 Some easy lines Computers draw images using pixels. Pixels are the tiny squares that make up the image you see on computer monitors. If you look carefully at a computer screen with a magnifying glass,
More informationKrita Vector Tools
Krita 2.9 05 Vector Tools In this chapter we will look at each of the vector tools. Vector tools in Krita, at least for now, are complementary tools for digital painting. They can be useful to draw clean
More informationTaking Fireworks Template and Applying it to Dreamweaver
Taking Fireworks Template and Applying it to Dreamweaver Part 1: Define a New Site in Dreamweaver The first step to creating a site in Dreamweaver CS4 is to Define a New Site. The object is to recreate
More informationCS 130 Final. Fall 2015
CS 130 Final Fall 2015 Name Student ID Signature You may not ask any questions during the test. If you believe that there is something wrong with a question, write down what you think the question is trying
More informationTitle and Modify Page Properties
Dreamweaver After cropping out all of the pieces from Photoshop we are ready to begin putting the pieces back together in Dreamweaver. If we were to layout all of the pieces on a table we would have graphics
More informationTutorial 3: Constructive Editing (2D-CAD)
(2D-CAD) The editing done up to now is not much different from the normal drawing board techniques. This section deals with commands to copy items we have already drawn, to move them and to make multiple
More informationMODULE 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 informationEFILive V8 Gauge Editor
Paul Blackmore 2013 EFILive Limited All rights reserved First published 17 October 2013 Revised 7 May 2014 EFILive, FlashScan and AutoCal are registered trademarks of EFILive Limited. All other trademarks
More informationTo specify the dimensions of the drawing canvas use the size statement: ! size( 300, 400 );
Study Guide We have examined three main topics: drawing static pictures, drawing simple moving pictures, and manipulating images. The Final Exam will be concerned with each of these three topics. Each
More informationINKSCAPE BASICS. 125 S. Prospect Avenue, Elmhurst, IL (630) elmhurstpubliclibrary.org. Create, Make, and Build
INKSCAPE BASICS Inkscape is a free, open-source vector graphics editor. It can be used to create or edit vector graphics like illustrations, diagrams, line arts, charts, logos and more. Inkscape uses Scalable
More informationStudent, Perfect CS-081 Final Exam May 21, 2010 Student ID: 9999 Exam ID: 3122 Page 1 of 6 Instructions:
Student ID: 9999 Exam ID: 3122 Page 1 of 6 Instructions: Use pencil. Answer all questions: there is no penalty for guessing. Unless otherwise directed, circle the letter of the one best answer for multiplechoice
More informationAnimations involving numbers
136 Chapter 8 Animations involving numbers 8.1 Model and view The examples of Chapter 6 all compute the next picture in the animation from the previous picture. This turns out to be a rather restrictive
More informationA l g o r i t h m s a n d J a v a S c r i p t P r o g r a m. o f R - F u n c t i o n s a n d P r o d u c i n g T h e i r T w o - a n d
Proceedings of the 5th International Conference on Nonlinear Dynamics ND-KhPI2016 September 27-30, 2016, Kharkov, Ukraine A l g o r i t h m s a n d J a v a S c r i p t P r o g r a m s i n C a l c u l a
More informationO Reilly Ebooks Your bookshelf on your devices!
Free Sampler O Reilly Ebooks Your bookshelf on your devices! When you buy an ebook through oreilly.com, you get lifetime access to the book, and whenever possible we provide it to you in four, DRM-free
More informationStreet Artist Teacher support materials Hour of Code 2017
Street Artist Street Artist Teacher support materials Hour of Code 07 Kano Hour of Code Street Artist Kano Hour of Code Challenge : Warmup What the ll make A random circle drawer that fills the screen
More informationPerfect Student Midterm Exam March 20, 2007 Student ID: 9999 Exam: 7434 CS-081/Vickery Page 1 of 5
Perfect Student Midterm Exam March 20, 2007 Student ID: 9999 Exam: 7434 CS-081/Vickery Page 1 of 5 NOTE: It is my policy to give a failing grade in the course to any student who either gives or receives
More informationPen Tool, Fill Layers, Color Range, Levels Adjustments, Magic Wand tool, and shadowing techniques
Creating a superhero using the pen tool Topics covered: Pen Tool, Fill Layers, Color Range, Levels Adjustments, Magic Wand tool, and shadowing techniques Getting Started 1. Reset your work environment
More informationLesson 5 Introduction to Cascading Style Sheets
Introduction to Cascading Style Sheets HTML and JavaScript BASICS, 4 th Edition 1 Objectives Create a Cascading Style Sheet. Control hyperlink behavior with CSS. Create style classes. Share style classes
More informationTower Drawing. Learning how to combine shapes and lines
Tower Drawing Learning how to combine shapes and lines 1) Go to Layout > Page Background. In the Options menu choose Solid and Ghost Green for a background color. This changes your workspace background
More informationAnimations that make decisions
Chapter 17 Animations that make decisions 17.1 String decisions Worked Exercise 17.1.1 Develop an animation of a simple traffic light. It should initially show a green disk; after 5 seconds, it should
More informationCorel Draw 11. What is Vector Graphics?
Corel Draw 11 Corel Draw is a vector based drawing that program that makes it easy to create professional artwork from logos to intricate technical illustrations. Corel Draw 11's enhanced text handling
More informationCustom Tools and Customizing the Toolbar
Custom Tools and Customizing the Toolbar GeoGebra Workshop Handout 7 Judith and Markus Hohenwarter www.geogebra.org Table of Contents 1. The Theorem of Phythagoras 2 2. Creating Custom Tools 4 3. Saving
More informationCreate a Swirly Lollipop Using the Spiral Tool Philip Christie on Jun 13th 2012 with 12 Comments
Advertise Here Create a Swirly Lollipop Using the Spiral Tool Philip Christie on Jun 13th 2012 with 12 Comments Tutorial Details Program: Adobe Illustrator CS5 Difficulty: Beginner Es timated Completion
More informationUnit 21 - Creating a Navigation Bar in Macromedia Fireworks
Unit 21 - Creating a Navigation Bar in Macromedia Fireworks Items needed to complete the Navigation Bar: Unit 21 - House Style Unit 21 - Graphics Sketch Diagrams Document ------------------------------------------------------------------------------------------------
More information