Make sure everyone logs into everyday


Create your blog using

Once you create your blog go to my blog at Masonstudio and post the URL of your blog in  


Computer Art Syllabus 

Class Agreement








Aim: How can we make our designs interactive using conditional statements? 


Do Now: Discuss when to use if, else if and else


(Learning ConditionalsConditional Examples)


Monday March 23rd

Please create Khancademy and account

Homework - recreate this art or another abstract art work using this code link 




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






I. Copy the code in the p5 editor then write comments for the code 


II. When finished add a snippet of code to the game




Aim: How do we use Logical Operators to create a button


Do Now: Play game


I. Random Cards, AlgorithmsExel


Activity: Do Project go to slide 43 or slide 44











Activity 1

Aim: What are the rules and routines we must use in Computer Art?


Do Now: 

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


                     III. Create your blog using,, or Google (blogger). Once you                         create your blog go to my blog at Masonstudio and post the URL of your blog in  

                                  the comment section of Computer Art.


Due Monday Homework:

1. Make sure everyone has a composition book.

2. Google drive or flash drive

3. Blog completed and url on 

Do Now:Watch video. What is peer programming?



  • 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"


Activity 2

Aim: How can code be used as a creative and expressive medium?

Do Now: Prompt: Look around the room. Identify how something could be along the

                             x axis and y axis.

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

 Video tutorial: 1.2 Basics of Drawing

Making shapes 


In this course we are going to make projects using p5.js. Before we explain what is p5.js, watch this video and see for yourself what kind of projects you can make it with it!


p5.js (or simply p5) is a JavaScript library for creating visual and interactive art in web browsers. p5.js works with the three native web languages (JavaScript, HTML, and CSS) to make work that is easily shareable on the Internet.
This programming language will be used in this course to introduce basic programming concepts and apply them to create computational media by building expressive and interactive computer applications and media.


Activity: Read this for directions robot.docx


For advanced students, try the challenges on Peblio.
* Challenge 1
* Challenge 2 

Project 1 - Make an emoji with variables


Practice variables in Khan Academy

Watch variable video


Make the entire face using variables. 



Do Now: Read slides 1-30 Slide deck 

Activity: Make a design using the following either Monochromatic or analogous color scheme. Refer to the work of Josef Albers

Use the following functions: noFill, fill, stroke, strokeWeight, noStroke and color values



Activity 3


Week of February 24th


Aim: How can code be used as an expressive and creative medium?


Do Now: In your journal answer the following:


How do we write code that creates movement?



Do Now: Read slides 1-30 Slide deck  

First remix this code. Second make a pattern or landscape that includes animation.

Project 1 - Intro to  




Activity 4 

Aim: How can we use the random function to generate different designs?

 In this learning activity, students will understand the concept of functions in a different way because unlike other functions we have been using (i.g. ellipse and rect) random will return a value. Rect() "returns" an image by generating it onto the canvas. The random() function will be one of many functions that will be used in future units in order to make sketches more complex and interactive.

P5JS Reference


*Look at this code and make a pattern design


Final Project - Make An Abstract Album Cover


 You have to use at least 15 of the Functions below- 

  1. fill()
  2. noFill()
  3. noStroke()
  4. arc()
  5. ellipse()
  6. circle()
  7. line()
  8. point()
  9. quad()
  10. rect()
  11. square(
  12. triangle()
  13. rectMode()
  14. frameRate()
  15. width
  16. height
  17. mouseX
  18. mouseY
  19. random()
  20. text()
  21. textFont()
  22. textAlign()
  23. textSize()


Take Pretest  test on Friday

Activity 5


Aim: How can control flow allow for user interactions?

Do Now: 

Activity: Watch Video tutorial: Conditional Statements


Use this example and try turning the canvas black when the Y position of your mouse is greater than 60, or another number. See what happens when you change the variable to mouseY.


Lesson Procedure:


  • Create more than two variations by writing a conditional statement using the x position 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.

  Lesson 1


Aim: How can control flow allow for user interactions?



  • 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. Do the following if exercises


Look at site on conditionals


Aim: How can we make our designs interactive using conditional statements? 

Do Now: Discuss when to use if, else if and else

(Learning ConditionalsConditional Examples)

More with Khancademy


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



I. Copy the code in the p5 editor then write comments for the code 

II. When finished add a snippet of code to the game


Aim: How do we use Logical Operators to create a button

Do Now: Play game

I. Random Cards, Algorithms, Exel

Activity: Do Project go to slide 43 or slide 44



Aim: How can sounds, images, and fonts can be combined and manipulated with code?

Do Now:Click on this link - loops slides 

 Just for more info on loops Peblio


Activity 1: 

Watch video on while and for loops


Choose a previous project add a while loop play around with the arguments in your code and remix your design.

Add a loop variable to the fill, shape parameters.

Change the size, color and position 


More with loops 


*Today Remix this code* add comments







Photoshop Blend + coding + Illustrator + geometric formulas + raster Math + scripting + p5 lines + tangent


Aim: Introduction to Photoshop

Do Now:   handoutText

Activity: Make a pattern of shapes and a logo



Aim: Introduction to selecting objects

Do Now:   handoutText

Activity: Cut out shapes and objects


1. Look at examples of a still life

2.Go to Google>Images

3. Get pictures of fruit, interiors of dining rooms or kitchens

4. Download pictures.  On the photo press the mouse pad until you see Download Image to Disk or go to File>Save As save on desktop or document folder.

5. Click Photoshop>Open the picture you downloaded

6. Open another document - File>New Document>Save>StillLife 
this will be your work area. You will copy and paste parts of images and compose a still life.

7. Use the Quick Selection or Background EraserMagnetic Lasso  to select around the object in the downloaded images. Only select the object if using the selection tool or delete the background. Go to Edit>Copy

8. Go to the StillLife file and go to Edit>Paste   

8. Once you have a bowl of fruit or objects sitting on a table Save as a jpg and go to Filters  select a filter that has a style that reflects an art style.


*Upload picture to the blog and answer the following questions: 

1. What is a still life?

2. Give an example of a still life that is similar to your still life. Describe how it is similar.

3. What tools did you use in Photoshop?

4. What filter did you use?


1. Open Photoshop and put these two images in separate layersCF-2002-07-19_23.jpg




Final Activity

Aim: How can Photoshop create a magazine cover?

Do Now: Do the following Photoshop handout,  activity.

Activity: Create two different magazine covers: magazine cover

Look at the tips of a magazine covercover1

I. Here are some possible topics for your magazine:

cooking, travel, fashion, sports, music, technology, art, Brooklyn Studio, Brooklyn Teen Hotspots

II. Requirements for cover

a. Title and logo design

b. Headline

c. Famous person on cover

d. Design must be based on one of the covers on the link above

e. Must have at least four topics subheadlines 



Answer the questions below on your blog.


  1. Explain the main idea of your magazine?
  2. What techniques did you use to create your cover page?
  3. What techniques did you use to create your editor's page?
  4. What techniques did you use to create your advertising page?
  5. What techniques did you use to create your topic page?
  6. What did you learn about how magazines use Photoshop?
  7. How was the Principle of Design Emphasis or Contrast applied to you cover page?
  8. How can Photoshop be used in a misleading way?
  9. How were you successful or unsuccessful in executing this project?
  10. What was your best page?


Aim: How to manipulate an image? 

Do Now: What are the ways to manipulate an image?


Activity: Photoshop this picture using the smudge, liquify filter, healing brush tool


 Post Mr. Goren




































Discuss Animating shapes

















 IV. Take Test




Aim: How to create a music presentation using Garageband

For this exercise you will create two soundtracks one will be a composition composed solely by you and the other will be a remix.

Once you have the soundtracks you will choose one and you will use the track in a music animation.
1. Song must have a beginning middle and end
2. Organize by separating or grouping loops
3. Song should have the structure of peaks and valleys that gradually build
4. Start should be simple, or soft
5. Have one consistent rhythm or beat throughout
6. Song should have an element of unpredictability to it

Using Garageband

 You can look at the following link

  1. Think about what what kind of song you want to write (e.g. jazzy, rock) and what instruments would be suitable to achieve this.
  2. Decide if you want to use GarageBand's own included library of loops, your own voice/instruments, or the keyboard, or maybe a combination of these.
  3. Using Keyboard/Recorder: Click the plus symbol in the lower left hand corner of the screen. This will create a new track (you can also do this by clicking 'Track', then 'New Track'). If you want to use either the built in keyboard or your own MIDI keyboard, select "Software Instrument". If you want to record yourself, using perhaps your voice, click "Real Instrument". The round red button is the record button. Use this.
  4. Decide if you want to use loops, your own voice/instruments, or the keyboard, or maybe a combination of these.
  5. The round red button is the record button. Use this to record the keyboard or voice/instruments.
  6. Using Loops: Loops are the easiest way to create a professional-sounding song without much work. Drag a loop onto the main part to create a new track. You can then add more loops of the same instrument to this track. To make a new track, repeat. 1 track = 1 instrument.
  7. Add loops of the same key and similar rhythms for a better sound.
  8. Go to Share > Export to export the file as an m4a. Then you can add the file to iTunes. Find how to use this in the external link.


To speed up a song


  1. Drag in the song from iTunes, or record yourself.
  2. Select the song and press Control-Option-G and deselect the song.
  3. The song now turns purple, and you can open up the track editor and check the check box that says Follow Tempo & Pitch.

In Garageband share your song by selecting Export to Disk. Turn into a mp3 file. Upload the song to Padlet. Write your name, the name of the song and what is the genre of the song.



Tuesday March 25th 2019

Take Practice Exam


Thursday March 28th 2019

Take Practice Exam


Friday March 29th 2019

Take Midterm


Monday April 1, 2019

Aim: How do we manipulate different types of media in p.5?

In this unit students learn about working with media and asynchronicity. The preload function is used to load image, font and sound files before sketches are run, and callback functions are introduced. In the final project students combine images, fonts and sound to create their own random meme generator.

Do Now: What is your favorite meme?

Activity: Come up with an idea for three different memes komar?


Copy code and find a picture


var tree;


function preload() {
tree = loadImage("birch.png")


function setup() {
createCanvas(400, 400);
//I turned the loop off so it would load faster


function draw() {


for(x=0; 300 > x; x+=50){


for(x=0; 300 > x; x+=50){


for(x=0; 300 > x; x+=50){


Click example 

Use unique font that goes with your image's style 


Project Remix click Mini-Project: Kinetic Type


Project Remix


Aim: How can I utilize the preload function and load images into my program?

Do Now: Discuss how the following code works: More about font


Loadimage function, Digital Collage, Poem,



Aim: How can I utilize the preload sounds into my program?

Do Now: Look at code on this link 

 Lesson Link

Activity: Here is a copy of template of a sound code 

if statements and sounds

Stop and play code

Choose snippets of the code above into your code


Aim: Making a game



Aim: How do we create an interactive story line?

Do Now: Brainstorm your idea for your story or game due May 14th.

Activity: Due May 24th create one of the following:

               1. A game with five levels

                2. A story featuring Marvel verses DC comics

                3. Your favorite childhood cartoon or Anime



1. In Google Images get your backgrounds, characters and objects for all five scenes.

The background images does need to have transparencies, it can be a .jpg or png.

The characters or objects have to have transparent backgrounds which means they are either .gifs or png files.

2. You have create five scenes in p5. You can copy your Storyteller Challenge code from KhanAcademy and paste it into p5. 

3. Story has to make logical sense. Main character who wants something in the beginning, has a problem achieving there goal and at the  end the may or may not get what they want.

4. Animation, interactivity, transformations


Script for P.5 final project

Simpler code




May 29th 20019

Please take this Review for the test

Review for final


Post final Projects


June 13th 

Take the Final
































Fall 2018 Computer Art



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