Code with Byte · Syllabus
Digital Art with p5.js
School year 2026–27 · Mr. Comen
Course overview
Digital Art with p5.js is where art meets computer science. Students use p5.js, a free JavaScript library made for artists, to create digital drawings, animations and interactive sketches while they learn to code. Every lesson is guided step by step, with Byte the bulldog as their art buddy. No coding experience is needed.
| Course detail | |
|---|---|
| Course | Digital Art with p5.js |
| Grade | Grades 5–8, no experience needed |
| Teacher | Mr. Comen |
| Where students work | The Code with Byte website, codewithbyte.com; sketches run right in the browser |
| What students need | A school Chromebook and their school Google account |
| Course size | 3 units, 47 lessons (including 6 quizzes and 3 projects) |
By the end of the course, students can:
- Place shapes on a canvas with x and y coordinates
- Mix any color with red, green and blue values, and style shapes with fill and stroke
- Store and reuse values in variables
- Animate position, color, rotation and size with the draw loop
- Make sketches that react to the mouse and the keyboard with if statements
- Plan, build, test and present an original interactive artwork
Units and lessons
| Unit | What students learn | Lessons |
|---|---|---|
| 1. Getting Started | Creative coding, the canvas, coordinates, shapes, RGB color, fill and stroke, variables | What Is Creative Coding?; Create a Canvas; Canvas Coordinates; Line; Rectangle; Ellipse; Shapes Quiz; RGB Color; Fill; Stroke; Making Variables; Reusing Variables; width and height; Color & Variables Quiz; Project: Create Your Own Emoji |
| 2. Animation | The draw loop, frame rate, frameCount, color transitions, translate, rotate, scale, speed and direction | The Draw Loop; Frame Rate; No Loop; Frame Count; Draw Loop Quiz; Grayscale Gradient; Grayscale to Color; Color to Grayscale; Translation; Animated Translation; Rotation; Animated Rotation; Scale; Animated Scale; Color & Transform Quiz; Up and Down; Left and Right; Diagonal; Project: Animate a Song |
| 3. Interactivity | mouseX, mouseY, mouseIsPressed, mouseButton, key, keyCode, keyIsDown and if statements | What Is Interactivity?; mouseX; mouseY; mouseX and mouseY; mouseButton; Paint and Erase; Mouse Quiz; keyIsPressed; key; Key Codes; keyIsDown(); Keyboard Quiz; Project: Your Interactive Sketch |
Pacing calendar
The course runs about one semester (17 weeks) at two class periods a week. Each unit ends with a quiz and a creative project.
| Weeks | Unit | Focus |
|---|---|---|
| 1 | Getting started | Sign in, join the class, What Is Creative Coding? |
| 2–3 | 1. Shapes and coordinates | Create a Canvas, Canvas Coordinates, Line, Rectangle, Ellipse, Shapes Quiz |
| 4–5 | 1. Color and variables | RGB Color, Fill, Stroke, Making Variables, Reusing Variables, width and height, Quiz |
| 6 | Project: Your Own Emoji | Design an emoji with shapes, colors and a variable |
| 7–8 | 2. The draw loop | The Draw Loop, Frame Rate, No Loop, Frame Count, Draw Loop Quiz |
| 9–10 | 2. Color and transformations | Grayscale Gradient, Grayscale to Color, Color to Grayscale, Translation, Rotation, Scale and their animations, Quiz |
| 11 | 2. Direction | Up and Down, Left and Right, Diagonal |
| 12 | Project: Animate a Song | A music video made of shapes |
| 13–14 | 3. Mouse data | What Is Interactivity?, mouseX, mouseY, mouseX and mouseY, mouseButton, Paint and Erase, Mouse Quiz |
| 15 | 3. Keyboard data | keyIsPressed, key, Key Codes, keyIsDown(), Keyboard Quiz |
| 16–17 | Final project and showcase | Your Interactive Sketch: build, play test, present |
NJ standards
The course addresses the 2020 New Jersey Student Learning Standards for Computer Science and Design Thinking, grades 6–8 (NJSLS-CS&DT; grade 5 students meet the matching 8.1.5 standards), and connects to the Visual Arts standards.
| Standard | What it asks | Where students practice it |
|---|---|---|
| 8.1.8.AP.1 | Design and illustrate algorithms that solve complex problems using flowcharts and/or pseudocode | Planning each project on paper before coding |
| 8.1.8.AP.2 | Create clearly named variables that represent different data types and perform operations on their values | Unit 1 Making Variables, width and height; Unit 2 color and position variables |
| 8.1.8.AP.3 | Design and iteratively develop programs that combine control structures, including nested loops and compound conditionals | Unit 2 bouncing (if / ||); Unit 3 mouse and keyboard (if / else if / &&) |
| 8.1.8.AP.4 | Decompose problems and subproblems into parts to facilitate the design, implementation and review of programs | Unit 2 translate and push / pop with a house() function |
| 8.1.8.AP.6 | Refine a solution that meets users’ needs by incorporating feedback from team members and users | Project peer reviews and the interactive-sketch play test |
| 8.1.8.AP.7 | Design programs, incorporating existing code, media and libraries, and give attribution | Every lesson: drawing with the p5.js library |
| 8.1.8.AP.8 | Systematically test and refine programs using a range of test cases and users | Run, read the checks, fix, run again; testing sketches with the mouse and keys |
| 1.5.8.Cr1a | Visual Arts: generate innovative ideas for artmaking (NJSLS-VPA) | Emoji, music animation and interactive sketch projects |
Grading and expectations
Grades come from the work students complete on Code with Byte, which saves to their account and shows on the teacher dashboard.
| Category | Weight | What counts |
|---|---|---|
| Lessons | 45% | The exercises and quizzes completed, checked by the site when they run |
| Projects | 40% | Emoji, Animate a Song and the final interactive sketch, graded with a rubric: works, creative, uses the unit’s ideas, commented |
| Habits and participation | 15% | On task, helps classmates, gives kind and useful feedback in critiques |
Class expectations:
- Sign in with your school Google account every class, so your work saves.
- Try first, then ask: read the checks and the message under the canvas, test again, ask a neighbor, then ask Mr. Comen.
- Mistakes are part of making art. Change one thing, run it, and look.
- Your art is your own. Help others by explaining, not by typing it for them.
- Take care of the Chromebooks and the computer lab.
Late and missed work: lessons stay open all course long, so students can catch up at any time before the marking period closes. Assignments with a due date in the Courses menu should be done by that date.
For families
Families can look at the whole course without signing in.
- See the course: go to codewithbyte.com and choose Digital Art in the Courses menu. You will see every unit and lesson. Only students can open the lessons.
- Ask to see their art: every sketch runs right in the browser, so your child can show you their drawings, animations and games.
- At home: your child can sign in with their school Google account on any computer and pick up where they left off.
- Questions: contact Mr. Comen through the school or Google Classroom.
Code with Byte · Programa del curso
Arte digital con p5.js
Año escolar 2026–27 · Mr. Comen
Descripción del curso
Arte digital con p5.js une el arte con las ciencias de la computación. Los estudiantes usan p5.js, una biblioteca gratuita de JavaScript hecha para artistas, para crear dibujos, animaciones y bocetos interactivos mientras aprenden a programar. Cada lección es guiada paso a paso, con Byte el bulldog como compañero de arte. No se necesita experiencia previa.
| Detalle del curso | |
|---|---|
| Curso | Arte digital con p5.js (Digital Art with p5.js) |
| Grado | Grados 5 a 8, sin experiencia previa |
| Maestro | Mr. Comen |
| Dónde trabajan | El sitio Code with Byte, codewithbyte.com; los bocetos funcionan en el navegador |
| Qué necesitan | Una Chromebook de la escuela y su cuenta de Google de la escuela |
| Tamaño del curso | 3 unidades, 47 lecciones (incluye 6 pruebas y 3 proyectos) |
Al terminar el curso, los estudiantes pueden:
- Colocar figuras en un lienzo con coordenadas x e y
- Mezclar cualquier color con rojo, verde y azul, y dar estilo con fill y stroke
- Guardar y reutilizar valores en variables
- Animar la posición, el color, la rotación y el tamaño con el ciclo draw
- Hacer bocetos que responden al ratón y al teclado con instrucciones if
- Planear, crear, probar y presentar una obra interactiva original
Unidades y lecciones
| Unidad | Qué aprenden | Lecciones |
|---|---|---|
| 1. Primeros pasos | Programación creativa, el lienzo, coordenadas, figuras, color RGB, relleno y contorno, variables | What Is Creative Coding?; Create a Canvas; Canvas Coordinates; Line; Rectangle; Ellipse; Shapes Quiz; RGB Color; Fill; Stroke; Making Variables; Reusing Variables; width and height; Color & Variables Quiz; Project: Create Your Own Emoji |
| 2. Animación | El ciclo draw, frameRate, frameCount, transiciones de color, translate, rotate, scale, velocidad y dirección | The Draw Loop; Frame Rate; No Loop; Frame Count; Draw Loop Quiz; Grayscale Gradient; Grayscale to Color; Color to Grayscale; Translation; Animated Translation; Rotation; Animated Rotation; Scale; Animated Scale; Color & Transform Quiz; Up and Down; Left and Right; Diagonal; Project: Animate a Song |
| 3. Interactividad | mouseX, mouseY, mouseIsPressed, mouseButton, key, keyCode, keyIsDown e instrucciones if | What Is Interactivity?; mouseX; mouseY; mouseX and mouseY; mouseButton; Paint and Erase; Mouse Quiz; keyIsPressed; key; Key Codes; keyIsDown(); Keyboard Quiz; Project: Your Interactive Sketch |
Los nombres de las lecciones aparecen en inglés, como en el sitio.
Calendario de ritmo
El curso dura aproximadamente un semestre (17 semanas), con dos clases por semana. Cada unidad termina con una prueba y un proyecto creativo.
| Semanas | Unidad | Enfoque |
|---|---|---|
| 1 | Primeros pasos | Entrar, unirse a la clase, ¿Qué es la programación creativa? |
| 2–3 | 1. Figuras y coordenadas | Crear un lienzo, Coordenadas, Línea, Rectángulo, Elipse, Prueba de figuras |
| 4–5 | 1. Color y variables | Color RGB, Relleno, Contorno, Variables, width y height, Prueba |
| 6 | Proyecto: tu propio emoji | Diseñar un emoji con figuras, colores y una variable |
| 7–8 | 2. El ciclo draw | El ciclo draw, frameRate, noLoop, frameCount, Prueba |
| 9–10 | 2. Color y transformaciones | Degradados de gris y color, translate, rotate, scale y sus animaciones, Prueba |
| 11 | 2. Dirección | Arriba y abajo, Izquierda y derecha, Diagonal |
| 12 | Proyecto: anima una canción | Un video musical hecho de figuras |
| 13–14 | 3. Datos del ratón | ¿Qué es la interactividad?, mouseX, mouseY, mouseButton, Pintar y borrar, Prueba |
| 15 | 3. Datos del teclado | keyIsPressed, key, códigos de teclas, keyIsDown(), Prueba |
| 16–17 | Proyecto final y exposición | Tu boceto interactivo: crear, probar con compañeros, presentar |
Estándares de NJ
El curso cubre los Estándares de Aprendizaje de Nueva Jersey de 2020 para Ciencias de la Computación y Pensamiento de Diseño, grados 6 a 8 (NJSLS-CS&DT; los estudiantes de 5.º grado cumplen los estándares 8.1.5 equivalentes) y se conecta con los estándares de Artes Visuales.
| Estándar | Qué pide | Dónde lo practican |
|---|---|---|
| 8.1.8.AP.1 | Diseñar e ilustrar algoritmos que resuelven problemas complejos con diagramas de flujo o pseudocódigo | Planear cada proyecto en papel antes de programar |
| 8.1.8.AP.2 | Crear variables con nombres claros que representan distintos tipos de datos y operar con sus valores | Unidad 1 Crear variables, width y height; Unidad 2 variables de color y posición |
| 8.1.8.AP.3 | Diseñar y desarrollar programas que combinan estructuras de control, incluidos bucles anidados y condicionales compuestos | Unidad 2 rebotes (if / ||); Unidad 3 ratón y teclado (if / else if / &&) |
| 8.1.8.AP.4 | Descomponer problemas en partes para facilitar el diseño, la implementación y la revisión de programas | Unidad 2 translate y push / pop con una función house() |
| 8.1.8.AP.6 | Mejorar una solución según las necesidades de los usuarios, con la opinión de compañeros y usuarios | Revisiones entre compañeros y prueba del boceto interactivo |
| 8.1.8.AP.7 | Diseñar programas que usan código, medios y bibliotecas existentes, y dar crédito | Cada lección: dibujar con la biblioteca p5.js |
| 8.1.8.AP.8 | Probar y mejorar programas de forma sistemática con varios casos de prueba y usuarios | Ejecutar, leer las comprobaciones, corregir y volver a ejecutar; probar con el ratón y el teclado |
| 1.5.8.Cr1a | Artes visuales: generar ideas innovadoras para crear arte (NJSLS-VPA) | Proyectos del emoji, la animación musical y el boceto interactivo |
Calificaciones y expectativas
Las calificaciones vienen del trabajo que los estudiantes completan en Code with Byte, que se guarda en su cuenta y aparece en el panel del maestro.
| Categoría | Peso | Qué cuenta |
|---|---|---|
| Lecciones | 45% | Ejercicios y pruebas completados, revisados por el sitio al ejecutarse |
| Proyectos | 40% | Emoji, Anima una canción y el boceto interactivo final, con una rúbrica: funciona, es creativo, usa las ideas de la unidad, tiene comentarios |
| Hábitos y participación | 15% | Concentrado, ayuda a sus compañeros, da opiniones amables y útiles |
Expectativas de la clase:
- Entrar con la cuenta de Google de la escuela en cada clase, para que el trabajo se guarde.
- Intentar primero y luego preguntar: leer las comprobaciones y el mensaje debajo del lienzo, probar otra vez, preguntar a un compañero y luego a Mr. Comen.
- Los errores son parte de hacer arte. Cambia una cosa, ejecútala y observa.
- Tu arte es tuyo. Ayuda a otros explicando, no escribiendo por ellos.
- Cuidar las Chromebooks y el laboratorio de computación.
Trabajo atrasado: las lecciones quedan abiertas todo el curso, así que los estudiantes pueden ponerse al día antes de que cierre el período de calificaciones. Las tareas con fecha de entrega en el menú Cursos deben completarse para esa fecha.
Para las familias
Las familias pueden ver todo el curso sin entrar.
- Ver el curso: entre a codewithbyte.com y elija Digital Art en el menú Cursos. Verá todas las unidades y lecciones. Solo los estudiantes pueden abrir las lecciones.
- Pida ver su arte: cada boceto funciona en el navegador, así que su hijo o hija puede mostrarle sus dibujos, animaciones y juegos.
- En casa: su hijo o hija puede entrar con su cuenta de Google de la escuela en cualquier computadora y seguir donde se quedó.
- Preguntas: comuníquese con Mr. Comen por medio de la escuela o de Google Classroom.