Embedded Files
Overview
Overview
Students will explore basic art and computer science concepts and create static works of art in the p5.js.
skill builders
skill builders
Below are Skill Builders, short practice activities that students can complete individually or with a partner. The Skill Builders are connected to each assignment and reinforce essential Art and Computer Science concepts and ideas and should be included in student sketchbooks wherever possible.
Art & Algorithms
Art & Algorithms
Draw any image from a step-by-step tutorial
Tutorials can be found for almost any type of image (animals, plants, portraits, automobiles, pop culture characters, etc.)
Go beyond the basic steps of the tutorial by adding extra details, colors, or other flourishes
With a partner, try to re-create the composition to the right, or another composition that both partners agree upon in p5.js
Take turns as Driver and Navigator
Customize colors, shapes, composition, etc.
Skills:
Skills:
Algorithmic Programming (step-by-step, in the correct order)
Passing Parameters into Functions (x, y, width, height, color, etc.)
Collaboration
Perseverance
Useful Code:
Useful Code:
background('colorname'); | rect(x, y, w, h); | ellipse(x, y, w, h); | line(x1, y1, x2, y2); | point(x, y | stroke('colorname'); | strokeWeight(px); | noStroke(); | fill('colorname');
Binary Numbers & Icon Design
Binary Numbers & Icon Design
Draw out a 32 x 32 grid on 1/4" graph paper
Try to create the initials of your name by filling or not filling in the boxes of the grid. Use only vertical, horizontal, and 45º angle lines
Alternatively, try to re-create one of the icons to the right or an original design
Each box of the grid represents 1 pixel
Each filled-in box is the Binary Number 1 or "on"
Each empty box is the Binary Number 0 or "off"
Write out the complete Binary Number of each row of your icon
Skills:
Skills:
Computer Science coordinate grid
Binary Number System
Intro to shapes & color
Intro to shapes & color
With a partner, try to re-create the Olympic Rings image to the right
Take turns as Driver and Navigator
Hint: You will need to draw some circles multiple times in order to get the correct layering
Skills:
Skills:
Computer Science coordinate grid
Algorithmic Programming (step-by-step, in the correct order)
Passing Parameters into Functions (x, y, width, height, color, etc.)
Collaboration
Perseverance
Complex shapes, shape properties, color
Complex shapes, shape properties, color
With a partner, practice converting between Binary, RGB, and Hexadecimal
Skills:
Skills:
Binary Number System
RGB color values
Hexadecimal color values
Intro to typography
Intro to typography
Create a typeface based on your own handwriting.
Begin by writing out each letter of the alphabet in your own regular handwriting
Write it out a few times and look for commonalities in similar letters (a's, b', and d's; w's, v's, y's; etc.)
Try to keep each letter as Proportional as possible (the same height, width, etc.)
Add dimension to the letters by thickening lines
Try to maintain the look and feel of your own handwriting
You might also try writing with a thick marker
Use graph paper and block out 26 equal sections
The size of the blocks will depend on your own handwriting
Each block should be the same size even though each letter may take up different amounts of space within the blocks
Review the resources below before beginning typeface sketches
Conceptual composition
Conceptual composition
In the culminating project for Unit 1, students will apply all of their previously learned art and computer science skills to create a Composition that evokes a specific feeling, emotion, or concept.
Click the image to view the code for this project
Report abuse