Pencil code 100 pequeños proyectos

Versión original “A Programming Primer” por David Bau -Traducido al español por codemas.org

Pencil Code

100 pequeños proyectos

Para realizar los proyectos, visita http://pencilcode.net/

Puedes ver y descargar la versión original en Inglés de David Bau en PDF aquí:

Pencil_Code_A_Programming_Primer

http://pencilcode.net/

https://drive.google.com/drive/folders/0B8fxC8OKfle4REtwajU4TGcwRGs


Sin umbrales y sin límites El objetivo de este libro es enseñar a escribir programas como lo haría con un lápiz: como una salida para la creatividad y como herramienta para la comprensión. Estas páginas siguen una tradition de cincuenta años de utilizar la programación como una herramienta educativa liberadora, sin umbrales para los principiantes, y no hay límites para los expertos. LOGO de Seymour Papert es la inspiración. Comenzar con unas pocas líneas de código, y el progreso de los programas de escritura para explorar el arte, las matemáticas, el lenguaje, algoritmos, simulación, y el pensamiento.

El lenguaje es CoffeeScript. A pesar de que CoffeeScript es un lenguaje de

programación utilizado por los profesionales, fue elegido aquí porque tiene una

elegancia y simplicidad muy adecuada para principiantes. Mientras que los primeros

ejemplos hacen que el lenguaje parezca trivial, CoffeeScript tiene una buena notación

para todas las ideas importantes: expresiones algebraicas, listas, bucles, funciones,

objetos, y concurrencia. A medida que aprenda el lenguaje, recuerde que el objetivo

debe ser no el dominio de la sintaxis, si no el dominio de los conceptos subyacentes.

Edite y ejecute sus programas en pencilcode.net. El sitio es un experimento en el aprendizaje comunitario: todo lo publicado es público. Escribir programas que puedan ser interesante para otros. Las cuentas son gratuitas. A medida que experimente mediante la construcción de sus propias ideas, notara que al principio sus programas se comportaran de una manera que no se pretendía. Los detalles son importantes, y la persistencia da sus frutos. Si usted es paciente en el ajuste y el perfeccionamiento de su trabajo, usted será recompensado. Lea, piense, juegue, y creer algo hermoso. David Bau, 2013


Índice

1. Líneas

2. Puntos

3. bucles

4. anidamiento

5. Funciones

6. Parámetros

7. Tiempo

8. salida

9. entrada

10. números

11. Cálculo

12. Objetos

13. Las matrices

14. La recursividad

15. La aleatoriedad

16. Conjuntos

17. Texto

18. movimiento

19. concurrencia

20. Estilos

21. Selectores

22. Eventos

23. El rebanar

24. Clasificación

25. Buscar

26. Inteligencia


100 pequeños proyectos

En las siguientes páginas, los conceptos básicos de la programación informática moderna se muestran en una serie de breves ejemplos. Ninguno de los ejemplos viene con explicaciones. Solo inténtalos. Una vez que funciona un programa, parar y pensar acerca de cómo funciona. Hacer su propia versión personalizada. ¿Puedes dibujar una violeta con un tallo? ¿Se puede hacer un copo de nieve que realmente se ve como un copo de nieve? Y ¿se puede hacer estas cosas de una manera elegante? Para una introducción tutorial para CoffeeScript, vaya al apéndice que comienza siguiendo el ejemplo establecido 26. También asegúrese de probar el comando "help" en el panel de prueba. Suficientes consejos. Vamos a jugar.


1. Líneas


2. Puntos


3. Bucles


4. Anidamientos


5. Funciones


6. Parámetros


7. Tiempo


8. Salida


9. Entrada


10. Números


11. Cálculo


12. Objetos


13. Matrices


14. Recursividad


15. Aleatoriedad


16. Conjuntos


17. Texto


18. Movimiento


19. Concurrencia


20. Estilos


21. Selectores


22. Eventos


23. Rebanar


24. Clasificación


25. Buscar


26. Inteligencia


Proyecto


Ahorcado

Un proyecto en detalle

En esta sección, usamos Pencil Code para hacer un juego de ahorcado desde

cero.

Dura un par de horas aprender la programación suficiente para hacer el juego

ahorcado.

Aprenderemos:

Memoria y nombramiento

Aritmética computacional

Funciones utilizables

Gráficos simples

Cómo hacer un programa

Entradas y salidas

Bucles y elecciones

Retrasos y sincronización

Conectarse a internet

Al final tendremos un juego que podremos jugar.


1. Ir a Pencil Code

Ve a pencilcode.net

Clic en “lets play”

La pantalla debería verse así:

El lado izquierdo de la pantalla es donde se escribe el programa, y el derecho es donde se ejecutan los programas. El lado bajo derecho es un panel de ensayo en donde escribir código y ejecutarlo de forma inmediata. Mientras se exploran los proyectos en este libro, también se puede utilizar el panel de ensayo en la esquina de abajo derecha para pedir ayuda con el funcionamiento de los comandos.

pencilcode.net


2. Mantener un secreto

Vamos a empezar por trabajar en el panel de ensayo. CoffeeScript puede recordar cosas. Digamos que una palabra secreta. Escribe las palabras azules abajo en el panel de ensayo.

Ves lo que pasa cuando presionas Enter.

Revela tu secreto tecleando “write secret”

¡Revisa el panel superior derecho!

Ahora intenta con algo que CoffeScript no sabe. Intenta escribir “number”.

No te preocupes. No pasa nada. Solo tienes que enseñarle a CoffeScript que

es “number” e intentarlo de nuevo


3. Los ordenadores son buenas calculadoras

Un ordenador es mejor que cualquier calculadora en las matemáticas. Vamos a

probarlo.

En CoffeScript, más y menos utilizan los símbolos habituales + y -. La multiplicación y división se realizan mediante los símbolos * y /

Valores nombrados pueden usarse en formulas

El e+24 al final es la forma en que se escriben los números largos en CoffeScript.

Significa 1.8816763717891548 × 1024. CoffeScript calcula números con

precisión de 15 dígitos.

Hay varias maneras de cambiar un número. Por ejemplo, += cambia una variable

añadiéndolo a

Algunos símbolos importantes

Código significado

+ Suma

- Resta

* Multiplicación

/ División

X = 95 Guardar 95 como x

X is 24 ¿Es X igual a 24?

X < 24 ¿x es menor que 24?

X > 24 ¿x es más que 24?

“a” in Word ¿la palabra contiene “a”?

String (num)

Convierte num en un hilo de dígitos

n+= 1 Cambia n añadiendo uno


Estas operaciones pueden ser combinadas.

CoffeScript obedece el mismo orden de operaciones en Algebra.

¿Cuál sería la respuesta para (2 * 3 + 3 * 5) / 7 - 1?

¿Qué haría cuando probamos '7' in String(99 * 123)?

Prueba tus propias formulas. No te preocupes si obtienes errores.

4. Hilos y números

¿Qué crees que pasa cuando probamos sumas con palabras?

Cuando ponemos algo entre comillas, CoffeeScript lo trata como una cadena de cartas, incluso si se trata de todos los dígitos. Esa es la razón por la que '34' + 5 es 345. valores citados como estos son llamados "cadenas ". La función Number () se puede utilizar para convertir una cadena en un número, de modo que podemos hacer la aritmética ordinaria con él. La función String () es opuesta, y convierte números en cadenas

Si tratamos de convertir una cadena a un numero de una manera que no tenga

sentido, obtenemos NaN, que significa "Not a Number" (no es número).


5. Creando Gráficos

En Pencil Code, podemos crear gráficos usando la tortuga. Existen cinco

funciones básicas de la tortuga.

Código significado

Pen red Elige el lápiz de color rojo

fd 100 Moverse hacia adelante 100 pixeles

rt 90 Girar 90 grados hacia la derecha

lt 120 Girar 120 grados hacia la izquierda

Bk 50 Ir hacia atrás 50 pixeles

En el panel de prueba, escribe dos comandos para dibujar una línea:

La referencia al final de este libro enlista muchos otros colores que pueden

utilizarse. Para parar de dibujar, dibuja “pen null” para seleccionar no pen (no

lápiz)

Intenta voltear a la tortuga y dibujar otra línea. Observe que rt gira a la tortuga

en su lugar y necesitamos mover a la tortuga con fd para dibujar una esquina.

Lea sobre la función rt usando help:

Si le damos un segundo número a rt, la tortuga se moverá mientras gira

formando un arco. Intente hacer un círculo:

Recuerde poner coma entre los dos números.


6. Haciendo nuestro primer programa

Estamos listos para hacer el juego de ahorcado. En el editor del lado izquierdo

de Pencil Code:

Seleccione y borre el programa de ejemplo

Ahora, teclee el siguiente programa.

¡Presione el botón triangular de play!

Si no funciona, revise el programa cuidadosamente e inténtelo de nuevo. Cosas

que revisar:

Deletrear cada función correctamente y en minúscula.

No ponga sangría en ninguna de las funciones del programa

Recuerde poner espacio después del nombre de las funciones.

Cada vez que se ejecuta el programa, se aclara la pantalla e inicia de nuevo.

Ahora, renombre el programa como “ahorcado” (hangman) editando el nombre

al lado del Lápiz y guarde con el botón de la derecha en la parte de arriba

Un sitio web será creado con el nombre de tu cuenta. Si elijo el nombre "novato" para la cuenta, un sitio web se creara en "novato.pencilcode.net". Una vez que haya guardado el programa con el nombre de "ahorcado", estará disponible en dos direcciones diferentes en pencilcode:

http://tunombre.pencilcode.net/edit/hangman - aquí es donde cualquier persona

puede ver y editar el programa , pero necesitas contraseña para guardar algún cambio.

http://yourname.pencilcode.net/home/hangman - aquí es donde puedes compartir y ejecutar el programa sin mostrar el código .


7. Apresúrate y espera

Escribe un mensaje de bienvenida después di dibujar la forma del ahorcado:

Notaras que la tortuga de Pencil Code es tan lenta como ¡una tortuga! A menos que la aceleremos con la función speed, la tortuga toma su propio tiempo lento mucho después de que le hemos pedido que se mueva, y aparece el mensaje de bienvenida antes de la tortuga haya terminado. Podemos hacer dos cosas para ayudar con la lenta tortuga:

Cambiar el número de movimientos que hace por segundo usando "speed”.

Pedir al programa que esperare a la tortuga, usando "await donde defer ()".

Ahora, la tortuga se mueve más rápido, y el programa espera hasta que la tortuga termina antes de escribir el mensaje de bienvenida. Un par de cosas que debe saber:

No utilice un espacio entre las diferir y el paréntesis " Defer ( )".

Podemos hacer que la tortuga se mueve al instante mediante el uso de " Speed Infinity”.

Incluso si ha programado antes, await/ defer puede ser nuevo para usted. Estas palabras clave crean continuaciones, y son parte de Iced CoffeeScript . Para explorar cómo funcionan en más detalle, revise la página en línea Iced CoffeeScript de Max Krohn


8. Usando “for” para repetir

Podemos repetir pasos en un programa con el comando "for". Trate de añadir tres líneas al final de nuestro programa para que se parezca a esto:

Debería ver esto:

El programa está diciendo: por cada letra en el secreto, escribir carta. Entonces el ordenador repite "Carta de escritura " nueve veces, una vez para cada letra. Si esto no funciona, compruebe el programa y asegurarse de que la línea después de for tiene sangría; así es como CoffeeScript sabe qué línea se repite. Una vez que tienes esto, mantener la palabra secreta cambiando el programa para escribir guiones en lugar de letras:

Note que “append” en lugar de “write” pone texto en la misma línea en lugar

de iniciar una nueva línea cada vez:


9. Usando “if” para elegir

En nuestro juego del ahorcado, deberíamos mostrar dónde encontrar todas las cartas que son adivinadas. Para decidir ya sea imprimir una línea en blanco o una carta, tendremos que utilizar " si " y "else”.

Añadir cuatro nuevas líneas de nuestro programa:

No olvide alinear todo, y recuerde guardarlo. ¿Qué pasa cuando lo ejecutas? Revela todas las cartas en “show”: todas las vocales. Nuestra pantalla luce así:

Así es como funciona. La línea de "if letter in show" hace una elección.

Si la Letra esta entre nuestra muestra, se añade la letra rtogether con un espacio después.

De lo contrario ("else") se añade un poco de subrayado con un espacio.

Dado que todo el asunto se pone con sangría debajo de "for letter in secret," esta elección se repite para cada letra. Comprobar la ortografía, el espaciado y la puntuacion si se producen errores. Tómese su tiempo para conseguir que funcione.


10. Salida con “read” Nuestro juego no es bueno si los jugadores no pueden adivinar. Para permitir que el jugador adivine, escriba: Funciona así:

"read" se abre un cuadro de entrada y recoge la entrada. Los comandos "await " y "defer" trabajan juntos para hacer que el programa espere hasta que se realiza la función de lectura. "guess" es el nombre de la entrada recogida por "read”. Trate de añadir estas líneas al programa:

Añadir “write guess a letter” hará saber a los jugadores cuando entrar una

adivinanza.

La línea “show w += guess" agrega la adivinanza al hilo de letras mostradas.

Ejecutemos.

Cuando ejecutemos el programa, nos mostrara donde aparecen nuestras letras

adivinadas.


11. Usando “while” para repetir

Debemos dejar a los jugadores tomar más de un turno.

“while turns > 0” repite todo en sangría debajo mientras el jugador aún tiene giros

a la izquierda.

Agrega sangría a todo lo que este debajo del comando “while” para que funcione.

El editor pondrá sangría a todo un bloque de código si lo seleccionas todo y

presionas “tab” en el teclado. “shift-tab”.

"Vueltas - = 1" significa restar uno de "turns". Se hará cuenta regresiva cada vez

que el jugador adivine. Cuando "turns" por fin este a cero, el comando "while"

dejara de repetirse.

Pruebe a ejecutar el programa. ¿Funciona?

En cualquier momento en que queramos ver el valor de una variable, podemos

escribir su nombre en el panel de ensayo.

¿Cómo le dará al jugador más adivinanzas?


12. Mejorando nuestro juego

Ya podemos jugar nuestro juego. Ahora debemos mejorarlo para hacerlo divertido.

Los jugadores deben ganar inmediatamente después de que no quedan letras por adivinar.

Los jugadores solo deben perder un turno si se equivocan

Cuando los jugadores pierden, el juego debe decir el secreto. Prueba esto:

Cada vez que se imprime la palabra, el número de "blanks" (espacios en blanco) comienza en cero y cuenta el número de espacios en blanco. Si termina en cero, significa que no hay espacios en blanco. Por lo que el jugador ha adivinado todas las cartas y ha ¡ganado! En ese caso, el comando "breaks" rompe fuera de la sección temprana “while", a pesar de que todavía hay giros a la izquierda.


13. Hacerlo que parezca un ahorcado

Sera más divertido si nuestro juego realmente parece al ahorcado.

Lo único que debemos hacer es dibujar partes del pobre ahorcado cuando hay

respuestas equivocadas. Prueba agregar algo así a la parte errónea:

El punto y coma (;) permite poner más de un paso en la misma línea. Dese

cuenta que al poner el "if" en la misma línea que los comandos a ejecutar,

debemos utilizar la palabra “then" entre la prueba y los comandos.

Trate de hacer variaciones en los dibujos del ahorcado para cada paso.

Siempre que queramos hacer una pausa en el programa para que la tortuga

termine el dibujo, podemos utilizar "await donde defer"


14. Eligiendo un secreto al azar

El único problema con el juego es que siempre juega con la misma palabra

secreta. Así que deberíamos usar la función “random” para elegir una palabra

random (al azar).

Cambia la línea que establece el secreto para que luzca así:

Los paréntesis cuadrados y comandos hacen una lista, y la función random elige

una cosa al azar de la lista.

Por supuesto, podemos hacer la lista tan larga como queramos, aquí hay una

lista larga:

Los paréntesis no tienen por qué estar en la misma línea, ¡pero si necesitamos

que estén los dos! Cuando enlistamos ítems en sus propias líneas, los comandos

son opcionales.


15. Descargando una lista de Internet

Hay una gran lista de animales en la dirección de internet

http://pencilcode.net/data/animals.

Podemos descargar estos datos usando una función JQuery “$.get”.

El código se ve así:

Significa que:

Pausa el programa hasta que $.get haya terminado.

Abre la dirección http://pencilcode.net/data/animals

Dile a $.get que resuma el programa después de poner la respuesta en “animals”.

El hilo especial '\n es el carácter nueva línea entre líneas en un archivo.

Note que "\" es un slash hacía atrás, no es el slash ordinario.

Separe los hilos de animales en una formación, con una sola entrada por línea.

Elija un ítem de la formación al azar.

Llame a esto palabra random “secret”.

http://pencilcode.net/data/animals.


16. El programa entero de ahorcado

Aquí está todo el programa de inicio a fin.


17. Haciéndolo suyo

La mejor parte de la programación es la adición de su propio estilo personal.

Trate de hacer el juego para que se reproduzca de nuevo automáticamente después de que este hecho. ¿Se puede hacer el juego más difícil o más fácil? ¿Se puede dar al jugador un premio por ganar? Asegúrese de explorar las funciones en la ayuda en línea, y experimentar con los ejemplos en el resto de este libro. Por ejemplo, se puede añadir efectos de sonido y música. Intente explorar la función "juego" y buscar en el Internet para aprender acerca de ABC notación, acordes, formas de onda, y envolventes ADSR. A veces las ideas más simples pueden hacer una gran diferencia. La función "ct ( )" borra el texto en la pantalla y el " cg ( ) " función borra los gráficos. Tal vez esto podría ser utilizado para hacer un juego de dos jugadores donde una persona se le ocurre la palabra secreta , o en el que dos jugadores compiten para adivinar la palabra en primer lugar. Pronto se dará cuenta de que la verdadera diversión de la programación es en poner su imaginación en el código.


Vocabulario

Movimiento

fd 50 avanzar 50 pixeles

bk 10 atrás 10 pixeles

rt 90 girar derecha 90 grados

lt 120 girar izquierda 120 grados

home ir a la página central

slide x, y deslizar derecha “x” y avanzar “y”

moveto x, y ir a x, y en relación con el hogar

turnto 45 establecer dirección a 45 (NE)

turn obj apuntar hacia obj

velocidad 30 hacer 30 movimientos por segundo

Dibujo

pen blue dibujar en azul

pen red, 9 9 pixel de ancho lápiz rojo

pen null no usar color

pen off uso pausado del lápiz

pen on usa lápiz de nuevo

mark “x” marcar con una X

dot Green dibujar un punto verde

dot gold, 30 punto dorado de 30 pixeles

pen “path” trazar un patrón invisible

fill cyan llenar camino trazado en cyan

Apariencia

ht() esconder tortuga

st() mostrar tortuga

scale 8 hacer todo 8 veces más grande

wear yellow usar caparazón amarillo


fadeout desvanecer y esconder tortuga

remove remover totalmente la tortuga

Propiedades

Turtle nombre de la tortuga principal

getxy() (x, y) posición relativa a casa

direction() dirección de la tortuga

hidden () si la tortuga está escondida

touches (obj) si la tortuga toca obj

inside (window) si está cubierto por ventana

lastamousemove donde el mouse tuvo movimiento la última vez

Salidas

Escribir “hi” añade HTML a la página

= write “fast” recordar escrito HTML

p.html “quick” cambiar texto antiguo

button “go”, fd 10 añadir botón con una acción

read (n) write n*n añadir un texto de salida con una acción

t = table 3,5 agrega un <tabla> de 3x5

t.cell (o, o) selecciona la primera celda de la tabla y establece texto

text “aloha

Sets

g = hatch 20

g = $ (“img”) selecciona todas las <img> en conjunto

g. plan (j) -> direcciona la tortuga jth para ir hacia delante 10j pixeles

@fd j * 10


Otros objetos

$ (window) ventana visible

$ (“p”). eq (0) el primer elemento <p>

$ (“·zed”) el elemento con id=”zed”

Otras funciones

See obj inspeccionar el valor del obj

Speed 8 establecer velocidad default

Rt 90, 50 90 grados de arco recto de radio 50

Tick 5, fd 10 ir 5 veces por segundo

Click fd 10 ir cuando clikea

Random [3, 5, 7] regresar 3, 5 o 7

Random 100 aleatorio [o..99]

Jugar “ceg” play notas musicales

Colores

Education

Pencil code 100 pequeños proyectos