Aim Use the given examples to record examples

  • Slides: 25
Download presentation

Aim: Use the given examples to record examples and our own ideas in our

Aim: Use the given examples to record examples and our own ideas in our journal 1. Write technical examples in journal and/or participate in full class discussion. 2. Take online quiz based on information given. 3. Create FOUR of our own technical plans in our journal 4. Push for professional level achievement with original work. 5. Test ideas with peers. 6. Improve based on feedback.

Basic Shapes • We can look at an example from unit 29 and an

Basic Shapes • We can look at an example from unit 29 and an example from unit 30. We used ellipse(), line(), rect() and triangle() to make a simple view for our canvas. Rich, complex drawings can be created from simple shapes. To change colors, we used background(), stroke(), and fill(). When we set the program up to loop in a draw() function, we can even create complex, changing colors.

Varying Color Example • Quickly changing the color of our shapes as they are

Varying Color Example • Quickly changing the color of our shapes as they are redisplayed in the draw function can be a powerful tool: void draw(){ var c = random(0, 255) fill(random(c), 0, random(c)); rect(350, 30, 150); }

X Y Coordinate Identifier • Some times it can be a challenge to figure

X Y Coordinate Identifier • Some times it can be a challenge to figure out exactly where the X and Y coordinates are for a canvas. The following lines will set up our draw function to display the X and Y coordinates of the mouse. We can use this to help us make our shapes appear where we want: background(128) text(mouse. X + ", " + mouse. Y, 10)

Starter Code <head> <title>Scott's Awesome Web Page</title> <script type="text/javascript" src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20415%20289%22%3E%3C/svg%3E' data-src="http: //www. scottbunin. com/processing. js"></script>

Starter Code <head> <title>Scott's Awesome Web Page</title> <script type="text/javascript" src="http: //www. scottbunin. com/processing. js"></script> </head> <body> <center> <!-- Start of Canvas Section--> <script type="application/processing"> size(800, 600); //all Java. Script Goes here! </script><canvas></canvas> <!-- End of Canvas Section--> </center> </body>

Aim: Use our plans to create a canvas for the program to begin on.

Aim: Use our plans to create a canvas for the program to begin on. 1. Write technical information in journal and/or participate in full class discussion. 2. Take online quiz based on information given. 3. Create ONE canvas based on our own technical plans in our journal 4. Push for professional level achievement with original work.

Second Canvas • Our second canvas uses HTML settings similar to the first one.

Second Canvas • Our second canvas uses HTML settings similar to the first one. Students may choose the settings such as size and color for each canvas. <!-- Start of Canvas Section--> <script type="application/processing"> size(800, 600); //all Java. Script Goes here! </script><canvas></canvas> <!-- End of Canvas Section-->

Scrolling Text and Music Example • This example shows text moving across a screen

Scrolling Text and Music Example • This example shows text moving across a screen while music plays. Load the example page and press <control> + <u> on a PC or <command> + <u> on a Mac. Most browsers will bring up the code for a student to examine. This program uses the trick of referring to display text that is “hidden” off the screen and then moved on a little at a time.

Scrolling Picture • This example shows music and a screen that moves towards the

Scrolling Picture • This example shows music and a screen that moves towards the left to give the illusion that a player is moving towards the right. Press <control> + <u> or <command> + <u> to see the code from the page. Keyboard input is also shown in the example. Notice that flowing pictures are spawned to the right, off the screen and then moved to the left. The process repeats in a loop.

Canvas Checklist • Each of the 4 canvases we are creating should have the

Canvas Checklist • Each of the 4 canvases we are creating should have the following: 1. A clear theme as to what the player is going to do and/or learn from the canvas. 2. Simple graphics created from shapes that support theme. 3. Graphics that represent different potential objects that can be interacted with by clicking on or using the keyboard.

Aim: Use our plans to create a canvas for the program to begin on.

Aim: Use our plans to create a canvas for the program to begin on. 1. Write technical information in journal and/or participate in full class discussion. 2. Take online quiz based on information given. 3. Create ONE canvas based on our own technical plans in our journal 4. Push for professional level achievement with original work.

Novice Level • Novice level work is incomplete or unsubmitted. If we do a

Novice Level • Novice level work is incomplete or unsubmitted. If we do a lot of work and we forget to hand it in, we cheat ourselves out of the credit. Even if we have only accomplished some of the objectives we can still earn partial credit. Be sure to hand in what you have done. Even if it is wrong, it is something we can start with and build on.

Apprentice • An apprentice level project will have 4 canvases that each have the

Apprentice • An apprentice level project will have 4 canvases that each have the first part of the game. The first sketch in the plan should be drawn. The canvas should be an original work of art that utilizes thoughtful color. Students should use multiple shapes and create a potential interface that will interest a target audience.

Practitioner • A practitioner will create 4 complete canvases each reflecting the 45 minutes

Practitioner • A practitioner will create 4 complete canvases each reflecting the 45 minutes of focused young adult work. Students may be recreating an improved version of something they have seen before or an original work. The canvases need not be perfect, but should represent the complexity of design shown from a complete plan that could potentially be a viable app. To achieve this level, each canvas must match the approved plans.

Professional • A professional level work is original in a way that expands beyond

Professional • A professional level work is original in a way that expands beyond the scope of the teacher’s examples. Students should utilize the online library of the processing. js web site. A professional is some one who is capable of working independently to find their own tools to solve their assigned problems. Students who achieve this level need not wait. They will be ready for internships and jobs. To achieve this level, each canvas must match the approved plans.

Aim: Use our plans to create a canvas for the program to begin on.

Aim: Use our plans to create a canvas for the program to begin on. 1. Write technical information in journal and/or participate in full class discussion. 2. Take online quiz based on information given. 3. Create the THIRD canvas based on our own technical plans in our journal. 4. Push for professional level achievement with original work.

Background() • There are three main colors that pixels on a computer will display.

Background() • There are three main colors that pixels on a computer will display. Red, green and blue. When we designate the colors it goes in that order red, green blue. This is referred to as RGB coloring. The number is from 0 to 255. To get solid red background, the function will be called as background(255, 0, 0).

Fill() • Fill() sets a color that will be on the inside of an

Fill() • Fill() sets a color that will be on the inside of an entire shape. It follows the same RGB rules used by the other functions. To make a shape filled in all white, try fill(255, 255). This will put the screen’s pixels on their maximum intensity. fill(0, 0, 0) will make them black.

Stroke() and no. Stroke() • stroke(0, 255, 0) will set the lines of shapes

Stroke() and no. Stroke() • stroke(0, 255, 0) will set the lines of shapes in to be drawn in green because the 255 is on the G part of the RGB. A command of stroke(0, 0 , 255) will have shapes then created with lines of solid blue. If you want the shape to have invisible lines, then use the no. Stroke() command.

Submit Project File • Any required files such as music or pictures may be

Submit Project File • Any required files such as music or pictures may be submitted as a subset in the format of 41. 1. png, 41. 2. mp 3 etc. Then, submit the main html file to the online class folder. Students who have not completed the work should still submit to earn partial credit for what has been done. Students may request regrading if/when they improve by sending the link to the teacher in email.

Aim: Use our plans to create a canvas for the program to begin on.

Aim: Use our plans to create a canvas for the program to begin on. 1. Write technical information in journal and/or participate in full class discussion. 2. Take online quiz based on information given. 3. Create the FOURTH canvas based on our own technical plans in our journal. 4. Push for professional level achievement with original work. 5. Submit project files today!