Lesson 17: Building an App: Canvas Painter UNIT 5 – JANUARY 19, 2018

VOCABULARY ALERT: Canvas - a user interface element to use in HTML/JavaScript which acts as a digital canvas, allowing the programmatic drawing and manipulation of pixels, basic shapes, figures and images. Key Event - in JavaScript an event triggered by pressing or releasing a key on the keyboard. For example: "keyup" and "keydown" are event types you can specify. Use event.key - from the "event" parameter of the onEvent callback function - to figure out which key was pressed.

NEW CODE

PURPOSE: Programmatically control the canvas element in response to user interactions. Maintain a dynamically generated array through the running of a program in order to record and reuse user input. Use nested loops within a program to repeat a command on the same array index multiple times. Perform variable arithmetic within an array index to access items in an array by their relative position.

You will continue to practice working with arrays and are introduced to a new user interface element, the canvas. The canvas includes commands for drawing simple geometric shapes (circles, rectangles, lines) and also triggers mouse and key events like any other user interface element. 

Today we are going to be building a drawing app in App Lab Today we are going to be building a drawing app in App Lab. Along the way, we’ll be introduced to a couple new ideas and concepts, but for the most part, we will be combining old skills. At this point, you all know most of the core concepts of programming, and so as we move forward, we’ll spend more time thinking about interesting ways to combine them. With that in mind, let’s get into Code Studio and start building our next app!

GO INTO CODE STUDIO AND COMPLETE THE LESSONS

We’ve seen a few ways to process our array of events over the course of this lesson, but there are many other effects we could produce. How else could we use the information we stored in our array? What other effects do you think we could make?

Processing lists of information is a very powerful ability Processing lists of information is a very powerful ability. We’ve just brainstormed many different ways we could process lists of points in a drawing app, but those same skills could be used to process lists of transactions, images, messages sent through an app, or anything else that is stored in a list. Keep an eye out for other instances where we can use list processing to create new features in your programs.

TO TURN IN FOR UNIT 5, LESSON 17: #7 – DRAW DOTS WITH CLICK #11 – DRAW AND DELETE #15 – ADJUST CIRCLE SIZE #18 – MAKE SPRAY PAINT WITH NESTED LOOPS #19 – RELATIVE INDEXES CANVAS FREE PLAY – MAKE YOUR OWN