Starting BBP:
Shapes in Snap!
Starting BBP:
Shapes in Snap!
Embedded Files
Shapes in Snap!
Today's Goal
Today's Goal
Create a geometric design with Snap,
using both iteration (loops!) and variables.
Completed
Basics of HTML
Starting Project Research
Revisiting Portfolios
Quiz
Basics of CSS; inline, internal, external
Practice CSS:
Making a Chess Board
Today
Block-based Programming
New Concept: Variables
Upcoming
Basics of UX
More Project Work
Typing Practice
Typing Practice
No Typing Today.
Relevant Terms
Relevant Terms
Program: a sequence of instructions or steps, written in a language that can be understood by a computer, that will be used by the computer to complete a task or solve a problem.
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.
Iteration: repeating a step, or series of steps, multiple times
Variable: a place in memory where you can store, manipulate, and overwrite a value
A bit more about Snap! before we get started.
Snap! (formerly Build Your Own Blocks) is a free block-based educational graphical programming language and online community. While inspired by Scratch, Snap! has many advanced features. The Snap! editor, and programs created in it, are web applications that run in the browser without requiring installation. It is built with JavaScript.
snap-promo.mp4Repetition / Randomness / Art
Repetition / Randomness / Art
There is an overlap between art and technology, and there is more specific overlap between art and programming, and there is an even more specific overlap between art, programming, and randomness. In the high school courses for Computer Science, we look at 'creative coding' and algorithmic art, which relates to this specific overlap. We look at how we can create systems of code that create interesting art, and not just visual art, but with music and sound too. This is an area of art that is rapidly expanding as tech and programming is becoming more widely known and more widely available.
Algorithmic art is not limited to only computer though, some creatives utilize algorithms and randomness without using a computer. Keep in mind, we talked about algorithms before we did any coding at all. An algorithm is simply a specified series of steps to reach a desired outcome, a computer is just a common way of implementing the algorithm.
Sol LeWitt is an artist famous for his use of algorithms, even though he didn't use computers.
Have you heard of Inktober? The challenge where everyday in October you draw something with ink? Some digital artists created and now participate in Genuary- a challenge where everyday in January you try to create a piece of art with code. Here's a quick little promo from 2024's Genuary.
creative-code-genuary.mp4Today relates a little to that. If you're interested in art and tech, and using tech to create interesting art, you should certainly consider continuing to study Computer Science with us next year.
Creating Custom Blocks
Creating Custom Blocks
Today, we'll start with something similar to last time. Last time we used loops to create flowers, this time we'll use loops to create geometric shapes and polygons. Through the process, we'll make our own custom blocks, and use a simple mathematical operation or two (the computer does the math, you don't have to).
We'll also use input. Input is when you put information into the computer. Everytime you type on the computer, that's all input. Every mouse movement, every mouse click; that's input. There's also output. Every sound your computer makes, every pixel displayed on your screen, that's all output. Some programs use both input and output, some only one or the other.
The video below is a little older; they've updated and added newer blocks since then. Generally, this isn't a problem. However, there is one in the video that doesn't work anymore. Notice the "set pen color to" block; it doesn't work with the random operator anymore.
Instead use the "set pen hue" or "change pen hue" blocks. These are actually better blocks anyway, as they also allow you to play with the color's brightness, saturation, and transparency instead of just hue.
snap-random-shapes.mp4Take a screenshot of your random shapes generating across the screen.
Add it to your slide for today.
Before we do the next part of today (creating geometric spirals), it would be good to have some understanding of the concept of a variable. A variable in Computer Science is similar to those in math, but they are not exactly the same thing. A variable in Computer Science is not a specific value like in an exercise your math teacher might give you.
Instead, in Computer Science, a variable is a place in memory where we can hold a value. We can change this value, do math with it, or override it. When you play a video game, your character's health is a variable. How much strength or money your character has is a variable. Even where to fraw your character on the screen is a variable. Basically, any value that may change is probably stored a variable.
variable-snippet.mp4Making a Spiral
Making a Spiral
We'll go futher now and make a spiral. We'll use all the previous concepts, plus add in a variable that changes as the program runs through the loop.
snap-spiral.mp4Before finishing, experiment some.
In your spiral, play with the pen color, or the pen size, or both.
What if the angle of the spiral also changed, instead of just the length?
What if you were to combine the previous random shape generation program with spirals from this video?
What other weird things can you think of trying with these new techniques?
Take a screenshot of your experiments.
Add it to your slide for today.
What to Submit
What to Submit
Add your screenshots from today on your slide for today.
Tomorrow, we'll meet in the Media Center (ex-library)
Tomorrow, we'll meet in the Media Center (ex-library)
Page updated
Report abuse