Contenido principal
La Hora de Código
Curso: La Hora de Código > Unidad 1
Lección 1: Dibujar con código- ¡Bienvenido a nuestra Hora de Código™!
- Aprender a codificar en Khan Academy
- Hacer dibujos con código
- Consejo rápido: arrastrar números
- Desafío: muñeco de nieve sencillo
- Dibujar más figuras con código
- Desafío: muñeco de nieve que saluda
- Colorear con código
- Consejo rápido: seleccionar color
- Desafío: día nevado soleado
- Consejo rápido: ¡usa la documentación!
- ¡Elige un proyecto de dibujo!
- Proyecto: super muñeco de nieve
- Proyecto: animal salvaje
- Proyecto: autorretrato
- Codifica más allá de una hora
© 2023 Khan AcademyTérminos de usoPolítica de privacidadAviso de cookies
Consejo rápido: seleccionar color
En la guía paso a paso pasada, exploramos cómo usar el selector de color para, fácilmente, encontrar un color. Como no puedes ver el selector de color en acción en nuestras guías paso a paso, aquí hay un GIF que muestra cómo se usa:
Haz clic en cualquier lugar en los números para hacer que el selector de color aparezca. Después, haz clic en la barra de colores del lado derecho para cambiar el color general que estés seleccionando y haz clic en el lado izquierdo para cambiar la luminosidad/brillo del color. ¡Vas a probarlo en el siguiente desafío!
¿Quieres unirte a la conversación?
quien invento este programa(24 votos)
Solo corrigiendo un poco: ProcessingJS no es un lenguaje, es una librería del lenguaje JavaScript sino me equivoco. Saludos...(23 votos)
¿Se puede descargar el programa de hacer dibujos en mi pc?(11 votos)
No, el editor de codigo que usan es una aplicación Web por Khan Academy. Se llama Khan Live Editor (https://github.com/Khan/live-editor).
Necesitas ProcessingJS (una biblioteca de JavaScript) para programar en su propia computadora como programas en Khan Academy. Puedes conseguirla aquí: https://raw.githubusercontent.com/processing-js/processing-js/v1.4.8/processing.min.js
Luego, pon un archivo HTML yprocessing.min.jsen una carpeta.
El archivo HTML deber ser como esto:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Processing.js entre HTML</title>
</head>
<body>
<!-- Processing.js -->
<script src="processing.min.js"></script>
<!-- Canvas -->
<canvas id = "canvas"></canvas>
<!-- el codigo -->
<script type="application/processing" data-processing-target="canvas">
// ¡Su codigo aquí!
</script>
</body>
</html>
Reemplaza// ¡Su codigo aquí!con su codigo
Tambien puedes usar esta plantilla: https://es.khanacademy.org/computer-programming/processingjs-inside-webpages-template/5157014494511104(58 votos)
Quien le gusta la programacion voten a favor(8 votos)
esto se puede hacer en otra plataforma?(7 votos)
Hay varios programas que se les pueden agregar plugins para tener un selector de color y algunos lo traen integrado. Pero no sabria decirte con certeza(12 votos)
- Se puede poner el código de colores pantone?(6 votos)
Los colores pantone se utilizan para impresión con una pantonera o cartas de color; colores luz y colores pigmento/tinta son diferentes y en la práctica todo lo que hagas para soportes digitales va a estar en colores luz. Para uso digital se utilizan códigos hexadecimales o RGB con los valores de cada uno establecidos. A menos de que quieras utilizar javascript con processing.js para hacer un dibujo e imprimirlo en un soporte específico con una tinta en específico no vería la utilidad de utilizar un número de pantone en especial. Esta forma de programar está más orientada a hacer programas/páginas web con gráficos 2D y 3D o animaciones que enriquezcan su visualización. También puedes hacer la conversión de un pantone (vía algún editor de imágenes) a un color cercano en RGB, HEX o en HSL para tener una reproducción muy parecida. Aunque ahí también varía el tipo de monitor y su interpretación del color en pantalla. Saludos.(11 votos)
- hola saludos espero aprender mucho.(6 votos)
- me parece que esto si nos ayuda pero sirve para algo mas aparte de programacion en los computadores?(5 votos)
Por supuesto, el orden que se usa en esta programación se puede comparar al orden que usan los diseñadores gráficos también. Para hacer diseños y aplicar efectos trabajan en diferentes capas que necesitas mantener en orden para que un efecto no afecte otros objetos o para que no queden ocultos. En Photoshop e Ilustrator, por ejemplo, se trabaja con capas ordenadas de manera similar.(9 votos)
es muy util esta informacion gracias compañeros(5 votos)
eeeeee...¡¿me pueden responder(3 votos)- ¿Automaticamente te aparecen los colores con el mouse?(3 votos)
si, solamente tienes que comenzar escribiendo background, abrir paréntesis y automáticamente se llenará el resto del código con el color predeterminado que creo que es rojo, pero luego puedes oprimir tu mouse en el código de los colores, es decir en los números y con el mouse puedes escoger el color que desees! genial no?(5 votos)
