CompSci//Media Arts - Drawing with Snap

BB with Snap!
A Drawing App

Today's Goal

Use Snap! to create a drawing app
that responds to input from the user

Completed

Starting Project Research
Revisiting Portfolios
Basics of HTML & CSS
UX / UI Overview

Today

Block-based Programming
Interaction between User & Software

Upcoming

More Project Work

New Slides for
the New Week

Make a copy of these slides:
https://docs.google.com/presentation/d/1ciwYLVux_5xvoeGVrl976oaKgFbCFlDdPDjFDk3CvH8/edit?usp=sharing

In your Google Drive, you should have a shared folder for this class; it should have a folder for the 2nd Quarter in it.

Change the 1st slide to say Q2: Week 4

Typing Practice

Start with typing:
https://shaunwegs.github.io/2024/focs/typing/index.html

Add your screenshot to your slide for today, and keep your typing log updated.

Progress Report Grades

Progress report grades are captured tonight.

I didn't update Skyward yet, as not being here is a lot of work- but I will recheck this afternoon. If you are worried I might miss anything, feel free to fill out the request form:

https://docs.google.com/forms/d/e/1FAIpQLSe6w57ic_yb7NT5b5onCrGqTsMlYVLpvjb1QTKNMVFTnZOy0A/viewform

Relevant Terms

Control Flow: How we can control the order in which the instructions of a program are executed; the three simplest forms of Control Flow are sequence, iteration, and selection.
Selection: code that only runs if a certain condition is met

A Drawing App

We'll keep working with Snap, this time to create a drawing app.

We'll start simple.

snap-draw-p1.mp4

Clearing & Changing Properties

A short little bit, just on how to clear the screen and change a few settings for the 'brush'.

snap-draw-p2mp4.mp4

Based on what you've done so far today, along with a few things from previous class periods... can you figure out how to let the user change the brush thickness or the brush color when they press a key on the keyboard? Maybe you can create rainbow brush?

Mirror Drawing

What other interesting things can we do?

snap-draw-p3.mp4

Our drawing app creates a mirror image reflected horizontally.

Can you create a program that has four sprites, where it reflects horizontally, vertically, as well as both horizontally and vertically?

Today's Slide

On your slide for today add your:

- Typing Practice Screenshot,
- Screenshot of your grades for this progress report, or of submission of regrade request form, and
- Video of your experiments with your drawing program in Snap!

BB with Snap!A Drawing App