Aim: What computer terms have we learned in Computer Art?

Do Now: What are some of the concepts we learned last semester. Put a link or an example on this site below:



Made with Padlet



Aim: How can we make our designs interactive using conditional statements? (Learning ConditionalsConditional Examples)


Create a flowchart using this link (flowchart guide) make a flowchart based on the x and y position of your mouse.




  • You can change the color, size or position of a shape. See this example.
  • You can adapt a previous sketch and add interactivity to it.


 I. Variable video

II. Do the following if exercises


Look at site on conditionals

Join my class link


 IV. Take Test


































Fall 2018 Computer Art


Make sure everyone logs into

Aim: How do we use coordinates to manipulate objects on our screen?

Do Now:Watch video

Activity: Slides Complete worksheet by doing a code along

             Log into Wescheme at home



  • apply: use a given function on some inputs

  • arguments: the inputs to a function; expressions for arguments follow the name of a function

  • circle of evaluation: a diagram of the structure of an expression (arithmetic or code)

  • definitions area: the text box in the Editor, where definitions for values and functions are written

  • editor: software in which you can write and evaluate code

  • error message: information from the computer about errors in code

  • evaluate: perform the computation in an expression, producing an answer

  • evaluates to: the result of computing an expression

  • expression: a computation written in the rules of some language (such as arithmetic, code, or a Circle of Evaluation)

  • function: a mathematical object that consumes inputs and produces an output

  • interactions area: the text box in the Editor, where we enter expressions to evaluate

  • legal expression: code that follows the Code Rules for a language

  • mathematical expression: a computation in arithmetic

  • programming language: a set of rules for writing code that a computer can evaluate

  • value: a specific piece of data, like 5 or "hello"

Aim: How can knowing Contracts, Strings and Images help us understand programming?


Do Now: Log into 

complete this exercise digital worksheet site insert this code VY4PWP

Activity 1: Use this access code DF3BJ-X76F8 to create an account in

Download the Workbook on your computer



Click on link to take test Quiz Code for Ms. Mason's Class DNP78B


Take Test


Activity 2


1.Write the functions in the Contract handout


ellipse:  Number Number String String -> Image


triangle: Number String String        -> Image


circle:   Number String String        -> Image


star: Number String String -> Image


rectangle: Number Number String String -> Image


triangle : Number String String -> Image


square : Number String String -> Image


+: Number Number -> Number


Can you write the Contract for *, -, / and sqrt?


(bitmap/url "")


flip-horizontal : Image -> Image






Part 2: Game Set-Up - Write a paragraph describing a theme for a game you would like to create then ->

Search for:


(Image Files must PNG or Gif) (Must contain Transparent Background)


use the target code (bitmap/url "")


-       Background Image


-       Character


-       Enemy


-       Projectile

Save it in a target code



Aim: How to Create art using Racket Code?

Do Now: What does Abstract Art look like?

               Abstract Art



Final Project: Type code to make an abstract artwork. Pick an abstract art piece as a background and add 15 shapes in addition to the shapes below.

 Computer Art Whitney Musuem

My Art 


Once finished share your link in Wescheme. Upload your final project to Schoology.

Create an account in Careerzone. Answer questions in My Portfolio


November 8 2018

I. Part of the class will finish the assignment below:

Use the Class code jtqnuq. Click link to complete assignment

III. Do extra credit assignments


November 9th 2018

Take this test



2nd Semester 

Activity 1 

 Aim: How can using the Design Recipe help us code?

 Do Now: Upload the following to Schoology:

Your Rocket-Height Code

Using the Racket code from your game make an object move


Creating art


How to code movement on a screen using transformation of the x and y coordinates?

Vocabulary - Transformation, coordinate plane, vertical translation, horizontal translation, troubleshooting, error analysis, input, output, given, constant, scale, window dimension, vertical stretch/compression, dilation, average rate of change, slope

Interpreting parts of word problems:

Takes in: what is the input, domain or the variable

Produces/returns: the output or the range

That is: What the function does, whats the function doing and/or what is the givens or constants

Write a function: Name the function

Do Now: To have student manipulate objects along a x - y plane and describe the transformation  link


Place a (T) for Target on (100, 100) on the screen. Mark and move the (T) 500 pixels to the right and mark and move 200 to the left.


Place a (D) for Danger on (200, 300) on the screen. Mark and move the (D) 200 pixels to the left and mark and move 100 to the right.


Place a (P) for Projectile on (300, 200) on the screen. Mark and move the (P) 200 pixels up and mark and move 100 down.



Complete the Design Recipe for moving the objects along the x-y coordinate plane.

Finish Target-Leap, Update-Danger and Update-Target design recipe hand outs

Make game changes to Game Template


Aim: How can functions compare coordinates?


Do Now: Look at peanut butter and jelly flowchart pbj part 1.pdf


1. Write booleans in contract

2. Do comparisons on grid along the x coordinates

3. Complete Unit 6 package



How can we break down a robot into basic shapes in p5.js?


II. Make a p5.js account Go to this site to learn Processing site

 Video tutorial: 1.2 Basics of Drawing

Making shapes 

Activity: Read this for directions robot.docx



Aim: How to use variables to make our coding easier?

Activity: Upload your Edit version to the Variable on Schoology.

Next assignment you will alter the code and fill the canvas with a pattern

Change the color and size of the shape


Aim: How to use variables to make animated shapes?

Do Now: What does it mean to animate shapes?


Discuss Animating shapes