Please enable JavaScript to use CodeHS

Ciencias de la computación New York 7-8

Description

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().

Objective

Students will be able to:

  • Bridge connections between computation and creative expression
  • Explore the p5.js reference guide and example projects
  • Understand the HTML5 canvas and coordinate system
  • Differentiate the function of setup() and draw()
  • Set the size of the canvas: createCanvas()
  • Use p5 shape-drawing functions for primitive shapes (ellipse, rect, line)
  • Call and pass parameters to functions
Description

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.

Objective

Students will be able to:

  • Define terminology related to color theory
  • Set the RGB values and opacity for shapes
  • Change the color of the canvas: background()
  • Change the color of shapes: fill(), noFill(), stroke(), noStroke()
  • Use advance shape-drawing functions (triangle, quad, arc, beginShape, endShape)
Description

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.

Objective

Students will be able to:

  • Utilize built-in variables, width and height, to position shapes
  • Define custom variables to reduce repetition in a program
Description

Esta 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.

Objective

Students will be able to:

  • Use the frameRate() function to change the speed of animated sketches
  • Use the frameCount system variable to draw shapes dynamically
Description

En 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.

Objective

Students will be able to:

  • Declare and initialize variables
  • Pass variables as arguments to p5.js drawing functions
  • Increment and decrement variables
Description

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().

Objective

Students will be able to:

  • create static and animated shape transformations
  • statically and dynamically change the origin and resulting direction of a shape using the translate() function
  • statically and dynamically rotate a shape using the rotate() function
  • statically and dynamically change the size of a shape using the scale() function
Description

En 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.

Objective

Students will be able to:

  • animate horizontal motion by incrementing and decrementing x coordinates.
  • animate vertical motion by incrementing and decrementing y coordinates.
  • animate diagonal motion.
Description

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.

Objective

Students will be able to:

  • use the mouseX system variable to keep track of the current horizontal position of the cursor
  • use the mouseY system variable to keep track of the current vertical position of the cursor
  • use the mouseButton system variable to check whether the mouse is left, right, or center clicked
Description

Esta 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.

Objective

Students will be able to:

  • use the keyIsPressed system variable to create interactive p5.js sketches that respond to any pressed key
  • use keyIsDown() function to create interactive p5.js sketches that respond to a specific key being pressed
  • Represent a physical key on the keyboard digitally using key code
  • Include text in a p5.js sketch
Description

En 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.

Objective

Students will be able to:

  • Plan a p5.js sketch on graph paper
  • Create a color palette of containing RGB values
  • Include two ore more shapes in a p5.js sketch
  • Use two or more colors in a p5.js sketch
  • Animate the color, transformation, and position of shapes