En esta lección, los estudiantes aprenden cómo crear un lienzo dentro de la función setup()
y aprenden su sistema de coordenadas. Los estudiantes también aprenderán cómo dibujar formas básicas en el bucle de funciones draw()
.
Students will be able to:
setup()
and draw()
createCanvas()
ellipse
, rect
, line
)En esta lección, los estudiantes personalizan el color de fondo, el color de relleno y el color de Stoke con la cadena, la escala de grises y los valores de color RGB. Usando las paletas de colores proporcionadas así como las suyas, los estudiantes agregan color a los bocetos P5.js proporcionados.
Students will be able to:
background()
fill()
, noFill()
, stroke()
, noStroke()
triangle
, quad
, arc
, beginShape
, endShape
)En esta lección, los estudiantes aprenden a usar variables para almacenar información utilizada para posicionar y colorear bocetos p5.js. Los estudiantes usan las variables del sistema ancho
y `altura’ como parámetros para posicionar dinámicamente formas en relación con las dimensiones del lienzo.
Students will be able to:
width
and height
, to position shapesEsta lección presenta a los estudiantes al mundo de la animación. Los estudiantes exploran la historia de la animación y aprenden cómo establecer la velocidad de cuadro para ajustar la velocidad de un boceto animado de p5.js.
Students will be able to:
frameRate()
function to change the speed of animated sketchesframeCount
system variable to draw shapes dynamicallyEn esta lección, los estudiantes crean una animación de transición de color. Usando variables, los estudiantes establecen el estado de color inicial, luego agregan y eliminan gradualmente los valores de rojo, verde y azul de un color, creando un gradiente de color animado.
Students will be able to:
Esta lección introduce a los estudiantes en tres transformaciones de forma: traducción, rotación y escala. Los estudiantes crean transformaciones de forma estática y animada en p5.js usando las funciones translate()
, rotate()
y scale()
.
Students will be able to:
translate()
functionrotate()
functionscale()
functionEn esta lección, los estudiantes practican estableciendo dinámicamente las coordenadas X e Y para formas e incremento y disminución de dichos valores para mover figuras en diferentes direcciones. Los estudiantes animan movimiento horizontal, vertical y diagonal en sus bocetos p5.js.
Students will be able to:
Esta lección enseña a los estudiantes cómo desarrollar bocetos interactivos que respondan a la entrada del usuario del mouse, incluido el movimiento del mouse y los clics del mouse.
Students will be able to:
mouseX
system variable to keep track of the current horizontal position of the cursormouseY
system variable to keep track of the current vertical position of the cursormouseButton
system variable to check whether the mouse is left, right, or center clickedEsta lección enseña a los estudiantes cómo desarrollar bocetos interactivos que respondan a las entradas del usuario desde el teclado. Los estudiantes también exploran cómo se utilizan los códigos clave para representar las teclas físicas en el teclado y usarlas en sus bocetos.
Students will be able to:
keyIsPressed
system variable to create interactive p5.js sketches that respond to any pressed keykeyIsDown()
function to create interactive p5.js sketches that respond to a specific key being pressedEn este proyecto, los estudiantes crean un boceto de su propio emoji. Un emoji es un pequeño icono utilizado para representar una emoción, símbolo u objeto. Estos íconos nos ayudan a expresarnos mejor y más imaginativamente. Los estudiantes completan una propuesta de proyecto para planificar su boceto y luego usan las funciones de dibujo y color que han aprendido hasta ahora para crearla usando p5.js.
Students will be able to: