Unit 3 Lesson 10

Name(s)_____________________________________________ Period ________ Date ______________________

Practice PT Planning Guide - Design a Digital Scene

Background
The beginning of our programming unit has focused on how to use Top-Down
Design as a strategy for thinking about how to design and write programs.
Functions, parameters, and loops have allowed us to break down increasingly
complex drawings into logical pieces. Most recently, we combined all three of these
programming constructs to design an Under the Sea digital scene.

Abstraction: Everyone uses abstraction on a daily basis to effectively manage

complexity. In computer science, abstraction is a central problem-solving technique.
It is a process, a strategy, and the result of reducing detail to focus on concepts
relevant to understanding and solving problems. Top-Down Design is a technique
for discovering the levels of abstraction in your problem so that you can effectively
write code to solve it.
Collaboration: Top-Down Design also helps by breaking up a problem in a way
that lets multiple people collaborate and work on it at the same time. Often
programming projects are divided among many programmers. Each person is
responsible for programming a portion of the final product. In order to do this,
everyone on the team must understand the overall plan at a high level, but each
person only needs to worry about the nitty gritty details of the portion they are
responsible for.

Project: Collaborate to Design a Digital Scene

For this project, you will be working with a group to design your own digital
scene. Your group can choose any kind of digital scene to create. You have
already seen how the Under the Sea scene was created, but here are some
guidelines to consider when picking your own:

Your scene should...

Be of interest to every member of the group
Have several components that allow it to be broken into logical chunks
Have repeated elements that will allow you to use loops and potentially random values
Have elements that would benefit from creating a function with a parameter (same figure but different size /
color / dimensions, etc.)
Each member of your group will write the code to complete a portion or portions of the scene. Then bring all the
code together to compose the final image! You will submit your own project and written reflection, but it must use
code written by your teammates.

General Process

Get together with your group (recommended groups of 3 or 4 people)

Do Group Project Planning (see below)
Brainstorm ideas, break the problem down, delegate tasks
Do your individual programming and share with teammates
Program your portion of the project
Share your code with teammates, and incorporate others code into your project
Complete your digital scene, write responses to reflection questions, and submit
See: Practice PT Project Overview and Rubric - Design a Digital Scene
Submission includes final program and completed reflections questions

Group Project Planning

Below we have laid out a process for your group to brainstorm, plan, and eventually create your Digital Scene project. Go
through each step together. The outcome of the process will be a project plan (see next two pages) that indicates what
youre trying to create and who is doing what. Get started and have fun.

Understand the
problem &
timeline

Brainstorm

Identify the problem to solve. It may sound obvious, but its hard to solve a problem
if you dont deeply understand it.
Review the steps of the process for completing this project (see above and
below)
Review Practice PT Project Overview and Rubric - Design a Digital Scene
make sure you understand what is required of you and your teammates.
Make sure you also understand the time constraints. Theres always
too much to do and too little time! This will help you prioritize work later.

What kind of digital scene will you create? Make it rain with ideas! Whether youre
in a group or on your own, take the time to generate lots of different ideas for your
digital scene
Put a time limit on how long you will brainstorm
No criticism of ideas, only building up on ideas
Once you have decided on what your scene will be, complete the Project
Description below. I t must contain a brief description and at least a rough sketch
of what you are trying to create.

Break it down

Assign tasks &

prioritize

Use Top-Down Design to identify the major components you will wish to include
in your image. At this point you only need to break down the image at a high level.
Decide as a group what high-level functions y ou will need.
For example, in the Under the Sea project, the high-level functions for
each component were things like: drawAllFish(),
drawAllSeagrass(), drawAllBubbles(), etc. These high-level
functions are all you need to think about at this point.

Each of the high-level functions you identified will be programmed by one

member of the group.
Assign the high-level functions you identified evenly among your group.
If people have more than one thing to do, you should prioritize: w
hat can
be cut if you run out of time or if there is an unanticipated bump in the
road?
Once you have assigned functions, each group member can begin working
individually to program the components they have been assigned.

Complete the Project Component Table below; this is where you will declare
what functions you will write and who will do what.

Name(s)_____________________________________________________ Period _______ Date ______________

Project Description
Once you have chosen your topic, write a brief description of it below and include either a sketch or digital image that
shows what you are aiming to draw. Its fine if your image includes more components or detail than you will be including in
your digital scene. You can also have more than one representative image.

https://studio.code.org/projects/applab/tWL47pPyDkUWU2WObc7VEQ
Scene Title:
Cherry Blossoms
Group Members:
Jacek - ground, gradient sky
Lily - road
Quinn - cherry blossoms, sunshine
Ryan - branches
Short Description:
Our digital scene is of a an early morning sunrise in a park surrounded by cherry blossom trees.

Sketch / Digital Image:

Name(s)_____________________________________________________ Period _______ Date ______________

Project Component Table

With your group, identify the major components you would like to include in your digital scene. For each component,
provide a descriptive and meaningful name for the function that will draw that component, provide a short description of
what the function does, and assign the function to a member of the team.
You do not have to fill this table, but you can, and you can add more rows if necessary. This is just a template.

Component

Function Name

Description of Function Behavior

Group Member

ground

grassBlades

Makes 15,000 baldes of grass with vaiations in

thickness, color, and an angle range from -45 to 45
degrees.

Jacek

sky

gradientSky

Creates a gradient by adding various multiples of i

(found in a for loop) to progressively changing RGB
values.

Jacek

Branches

drawBranch(Left/R
ight)

Draws 30 branches for each tree by draw lines with

random turns based on a gradient to create flowing
patterns. Branches drawn with different lengths to
make the tree more full.

Ryan

road

rectangle

Makes rectangles of equal width and uses a

parameter for the length that decreases as the
rectangles stack

Cherry blossoms

cherryBlossoms

Creates a variety of pink dots that change in opacity

as it reaches the middle of the scene.

Quinn

Sun Beams

sunbeams

It creates transparent lines that originate at the

same spot but go off at different angles and go
until it hits the edge of the screen.

Quinn

Lily

ALL:
//Jack's
function gradientSky(startingPosition) {
penUp();
moveTo(0, startingPosition);
for (var i = 0; i < 300; i++) {
//i in this case defines the thickness of the sky, in addition to the extent of gradiency
penWidth(1);
//1-pixel pen
turnTo(90);
penDown();
moveForward(320);
//moves to edge of screen
moveTo(0, startingPosition + i);
//increases y position by 1
penRGB((4/3)*i, (2/3)*i, 255-(5/3)*i, 1);
//modifies RGB values to create a color gradient
//(feel free to modify coefficients as best suited) http://www.perbang.dk/rgbgradient/
}
}
function grassBlades() {
penUp();
penRGB(0, randomNumber(100, 175), 0, 1);
//sets random shade of green
penWidth(randomNumber(1, 5));
//sets random blade thickness
moveTo(randomNumber(0, 320), randomNumber(300, 450));
//defines boundaries by which grass can be drawn
penDown();
turnTo(randomNumber(-45, 45));
//sets grass blade angle
moveForward(randomNumber(5, 15));
//draws random length of grass
}
gradientSky(0);
for (var i = 0; i < 15000; i++) {
grassBlades();
//executes grass drawing 15000 times
}
//Lily
penRGB(170, 170, 170, 1);
penUp();
function rectangle(x, y, z) {
penWidth(15);
moveTo(x, y);
turnTo(0);
penDown();
moveForward(25);
turnRight(90);
penWidth(27);
moveForward(z);
turnRight(90);
penWidth(15);
6

moveForward(25);
}
rectangle(85, 455, 150);
penUp();
rectangle(90, 430, 140);
penUp();
rectangle(95, 405, 130);
penUp();
rectangle(100, 380, 120);
penUp();
rectangle(105, 355, 110);
penUp();
penUp();
rectangle(110, 330, 100);
//
moveTo(85, 450);
turnLeft(90);
penDown();
penWidth(25);
moveForward(150);
penUp();
//
penRGB(100, 100, 100, 1);
moveTo(80, 450);
penDown();
moveTo(100, 305);
penUp();
//
moveTo(250, 450);
penDown();
moveTo(220, 305);
//Ryan
penUp();
for (var i = 0; i < 15; i++) {
moveTo(randomNumber(10, 15), 350);
turnTo(randomNumber(15, -15));
drawAllBranchLeft(15);
drawAllBranchLeft2(15);
drawAllBranchLeft3(15);
}
for (var i = 0; i < 15; i++) {
moveTo(randomNumber(15, 20), 350);
turnTo(randomNumber(15, -15));
drawAllBranchLeft(10);
drawAllBranchLeft2(10);
drawAllBranchLeft3(10);
}
//Draws random branches
function drawAllBranchLeft(length) {
penDown();
penRGB(102, 51, 0, 1);
for (var i = 0; i < 5; i++) {
penWidth(3);
7

moveForward(length);
drawBranchLeft();
}
function drawBranchLeft() {
turnLeft(randomNumber(-15-i, 5-i));
moveForward(randomNumber(5, length));
}
penUp();
}
function drawAllBranchLeft2(length) {
penDown();
penRGB(102, 51, 0, 1);
for (var i = 0; i < 5; i++) {
penWidth(3);
moveForward(length);
drawBranchLeft2();
}
function drawBranchLeft2() {
turnRight(randomNumber(15-i, -5-i));
moveForward(randomNumber(5, length));
}
penUp();
}
function drawAllBranchLeft3(length) {
penDown();
penRGB(102, 51, 0, 1);
for (var i = 0; i < 5; i++) {
penWidth(3);
moveForward(length);
drawBranchLeft3();
}
function drawBranchLeft3() {
turnRight(randomNumber(-15-i, -20-i));
moveForward(randomNumber(5, length));
}
penUp();
}
penUp();
for (var i = 0; i < 15; i++) {
moveTo(randomNumber(305, 310), 350);
turnTo(randomNumber(15, -15));
drawAllBranchRight(15);
drawAllBranchRight2(15);
drawAllBranchRight3(15);
}
for (var i = 0; i < 15; i++) {
moveTo(randomNumber(300, 305), 350);
turnTo(randomNumber(15, -15));
drawAllBranchRight(10);
drawAllBranchRight2(10);
drawAllBranchRight3(10);
}
8

//Draws random branches

function drawAllBranchRight(length) {
penDown();
penRGB(102, 51, 0, 1);
for (var i = 0; i < 5; i++) {
penWidth(3);
moveForward(length);
drawBranchRight();
}
function drawBranchRight() {
turnLeft(randomNumber(15+i, -5+i));
moveForward(randomNumber(5, length));
}
penUp();
}
function drawAllBranchRight2(length) {
penDown();
penRGB(102, 51, 0, 1);
for (var i = 0; i < 5; i++) {
penWidth(3);
moveForward(length);
drawBranchRight2();
}
function drawBranchRight2() {
turnLeft(randomNumber(-15+i, 5+i));
moveForward(randomNumber(5, length));
}
penUp();
}
function drawAllBranchRight3(length) {
penDown();
penRGB(102, 51, 0, 1);
for (var i = 0; i < 5; i++) {
penWidth(3);
moveForward(length);
drawBranchRight3();
}
function drawBranchRight3() {
turnRight(randomNumber(15-i, 20-i));
moveForward(randomNumber(5, length));
}
penUp();
}
//Quinn's
function sunbeams() {
penUp();
penRGB(255, 255, 102, 0.2);
moveTo(160, 220);
turnTo(randomNumber(0, 360));
penWidth(7);
penDown();
9

moveForward(350);
}
function cherryBlossoms() {
penUp();
penRGB(255, 105, 180, 0.8);
moveTo(randomNumber(0, 50), randomNumber(0, 250));
dot(randomNumber(4, 7));
penRGB(255, 105, 180, 0.6);
moveTo(randomNumber(50, 100), randomNumber(0, 250));
dot(randomNumber(4, 7));
penRGB(255, 105, 180, 0.5);
moveTo(randomNumber(100, 150), randomNumber(0, 250));
dot(randomNumber(4, 7));
penRGB(255, 105, 180, 0.8);
moveTo(randomNumber(270, 320), randomNumber(0, 250));
dot(randomNumber(4, 7));
penRGB(255, 105, 180, 0.6);
moveTo(randomNumber(220, 270), randomNumber(0, 250));
dot(randomNumber(4, 7));
penRGB(255, 105, 180, 0.5);
moveTo(randomNumber(170, 220), randomNumber(0, 250));
dot(randomNumber(4, 7));
}
for (var i = 0; i < 110; i++) {
sunbeams();
cherryBlossoms();
}

Link:
https://studio.code.org/projects/applab/yKJeO0vXzIkvD2IEWToJ-A

10