PROCESSING

 >>> you can download it here

Processing is an open-source programming language and integrated development environment based on Java, used as a medium for teaching and creating multimedia and interactive digital design projects. It is developed by artists and designers as an alternative tool to proprietary software.

Processing es un lenguaje de programación y entorno de desarrollo integrado de código abierto basado en Java, que sirve como medio para la enseñanza y producción de proyectos multimedia e interactivos de diseño digital. Es desarrollado por artistas y diseñadores como una herramienta alternativa al software propietario. 

PIXELS AND COLORS

Computer screens are made up of a matrix of dots that we call PIXELS. The more pixels a screen or digital image has, the higher its resolution. Each pixel can have a different color, which is a combination of three components: RED (R), GREEN (G), and BLUE (B). This is the RGB code, which expresses each component as a number between 0 and 255.

Thus, 0,0,0 is black and 255,255,255 is white.

You can visit this webpage to get the RGB code of any color:  https://htmlcolorcodes.com/

COORDINATES

The coordinate origin (0,0) on a computer screen is the top-left corner. Each pixel has two coordinates (x, y) to indicate its position on the screen. 

The x coordinate (width) is the horizontal distance from the left edge of the screen, and

The y coordinate (height) is the vertical distance from the top edge of the screen.

WINDOW SIZE

You can define the size of the window where you run the program with the command size(x,y);

x = width    y=height

URL to download the program: https://processing.org/

You can download processing-4.3.3. for windows x64 here (you dont need to install anything only run the exe file)

PRACTICES

P1-Hello world

P2-Geometric Shapes 1

P3-Geometric Shapes 2

P4-House

P5-Olympic Rings

P6-Hello Mouse

P7-Advanced Hello Mouse

P8-Traffic Lights

P9-Tunk

P10-Free activity

**P 1: Hello Word - Drawing a dot and a line - Dibujar un punto y una línea

To draw a dot use the sentence: point (x,y);

To draw a line use: line (x1,y1,x2,y2);

**P2: Geometric shapes (photocopy)

**P3.: Geometric shapes (2) - Dibujar formas geométricas simples

Reproduce exactly this model

P4: Drawing a house

You can follow Amalia's model, but it´s better you design yours!

P5: Olympic Rings

Help:

- The stroke weight refers to the edge of the shape. Use at least 5 >> strokeWeight(5);

- Transparent shapes >> fill(R,G,B,0); >> the last number is the opacity 0=transparent

- White Backgound >> background(255);

✧ ➷༄*ੈ✩ ✧ ➷ೃ༄*ੈ✩ ✧ ➷ೃ༄*ੈ✩

VARIABLES

A variable is a memory address where data can be stored. The use of variables involves three actions:

1.-Defining the variable (int, float, boolean, char, string)

2.-Assigning it a value

3.-Using the variable

Una variable es una dirección de memoria donde se puede guardar un dato. El uso de variables implica tres acciones:

1. Definir la variable (int, float, boolean, char, string)

2. Asignarle un valor

3. Utilizar la variable

FUNCTIONS

A function is a set of instructions grouped under a single name. There are functions defined in the development environment, such as draw() and setup(), as well as others that can be defined by the user. To execute a function, you need to use the following syntax:

Una función es un conjunto de instrucciones agrupadas bajo un mismo nombre. Existen funciones definidas en el entorno de desarrollo como draw() y setup(), y otras que puede definir el usuario. Para que se ejecute una función hay que usar la sintaxis:

void setup (){

código que se va a ejecutar

}

P6: Create a program to control the mouse - Hello Mouse!

Elaborar un programa para controlar el ratón - Hola Mouse!

BUCLES Y CONDICIONALES

Cuando el programa tenga que tomar una decisión utilizaremos la sentencia condicional if / else que indicarán las instrucciones que se ejecutarán si se cumple o no una condición. Se utilizarán los signos =>< para establecer esas condiciones.

if (nombre ==5){

//instrucciones que se ejecutarán si se cumple la función

}

else{

//insrucciones que se ejecutarán si no se cumple la función

}

 

Para repetir una o más instrucciones un número determinado de veces utilizaremos la sentencia for o while ...

for (byte i=0; i<10 ; i=i+1){

//instrucciones a repetir

}

  *********************

while (boton==0);{

//instrucciones a repetir

}

P7: Advanced Hello Mouse - the color is changing!

Hola Mouse Avanzado - el color del trazo va cambiando de color

P8: TRAFFIC LIGHTS - SEMÁFORO

https://fdiazuceda.blogspot.com/2023_12_12_archive.html

Para dibujar este semáforo copiamos el siguiente código:

void setup() {

  size (400,400);                                        // Creamos una ventana de 400x400 pixeles

  rect(120,20,120,360);                             // Dibujamos un rectángulo

  triangle(20,20,120,20,120,120);             // Triángulo  en la parte superior izquierda

  triangle(240,20,340,20,240,120);           // Triángulo  en la parte superior derecha

  triangle(20,140,120,140,120,240);        // Triángulo  en la parte central izquierda

  triangle(240,140,340,140,240,240);      // Triángulo  en la parte central derecha

  triangle(20,260,120,260,120,350);        // Triángulo  en la parte inferior izquierda

  triangle(240,260,340,260,240,350);      // Triángulo  en la parte inferior derecha

  fill(0,0,0);                                                 // Ponemos el relleno del fondo en negro

  ellipse (180,80,100,100);                        // Dibujamos el círculo superior

  ellipse (180,200,100,100);                      // Dibujamos el círculo central

  ellipse (180,320,100,100);                      // Dibujamos el círculo inferior

}

A continuación programamos el siguiente código para que vaya encendiéndose de cada color:

* No olvidar definir la variable time al principio para poner el tiempo a cero:

Y finalmente definimos el dibujo para cada color:

P9: DEPÓSITO

El depósito debe simular que se llena con la letra "a" y se vacía con la tecla "z" 

   

TAREA PARA EL LUNES 23 DE MARZO

 - Si no has podido terminar la aplicación personal, puedes continuar con ella y enviarme el nuevo archivo aia para revisarlo justo antes de la evaluación y subir algo la nota.

- Si ya la has terminado, realiza esta otra aplicación (un juego) que contará ya para la nota final de curso!!

Puedes elegir entre:

>> PRÁCTICA 8 de la web de Justo: JUEGO PONG

>> PRÁCTICA 9 de la web de Justo: JUEGO TOPO

Cómo ya sabes, tienes los recursos, las instrucciones y un vídeo explicativo en la web (solo es necesario hacer un juego a elegir entre los dos que son de una dificultad similar)

APP INVENTOR

 

Enlace a web App Inventor

Web de Justo Rodríguez Orta - App Inventor Bloque1 - PRÁCTICAS -

Web de Justo Rodríguez Orta - App Inventor Bloque 2 

✿ -------------------- ✿ ----------------------- ✿

Guía de Turismo con App Inventor del IES Fray Luis de León - Youtube -

Creación de enlaces externos - vídeo explicativo del siguiente código  -

APLICACIÓN TURÍSTICA

Conditions:

1. - At least 4 different windows (screen1 and 3 more) conected with buttons to come back to the main screen. 
2. - Al least one link to an external URL 
3. - At least one link to an audio that must work with one clic and stop with a double clic 
4. - One button to close the app 
5. - One of the screens must have a map with some markers 
6. - One lable with your name in the main screen 
7. - A description of the places must be written as text in lables and the same text must be reproduced by audio (you can create the mp3 file using an AI or recording your voice) - Texto a voz vidnoz
   
   
   
8.  - Use buttons with different shapes, colours, icons... you can visit this webpage to download icons: https://icon-icons.com/es/
9. - Use different layouts to place images, buttons, etc (horizontal, vertical or table arrangements) 
10. - Original design (you can visit some other applications to look for ideas for your design). Scketch a draft on a paper before starting your app!

CONDICIONES

1. Al menos 4 ventanas diferentes (pantalla1 y 3 más) conectadas con botones para volver a la pantalla principal.

2. Al menos un enlace a una URL externa.

3. Al menos un enlace a un audio que funcione con un clic para reproducir y doble clic para detenerlo.

4. Un botón para cerrar la aplicación.

5. Una de las pantallas debe tener un mapa con algunos marcadores.

6. Una etiqueta (label) con tu nombre en la pantalla principal.

7. La descripción de los lugares debe estar escrita como texto en etiquetas y el mismo texto debe reproducirse en audio (puedes crear el archivo mp3 usando una IA o grabando tu voz).

8. Utiliza botones con diferentes formas y colores.

9. Usa diferentes diseños (layouts) para colocar imágenes, botones, etc. (disposición horizontal, vertical o en tabla).

10. Diseño original (puedes visitar otras aplicaciones para buscar ideas para tu diseño). ¡Haz un boceto en papel antes de empezar tu aplicación!

Smartphone Applications (aplicaciones para móviles) - Introduction

Smartphone applications, commonly called apps, are programs designed to help users perform different tasks on their mobile devices. There are thousands of apps available, so it is useful to classify them into categories. This helps users understand what each app is used for and makes it easier to choose the right one.

Apps can be classified according to their purpose. For example, communication apps allow people to send messages, make calls, or join video meetings. Social media apps help users share content and interact with others online. Entertainment apps are used for games, music, videos, or reading.

Another way to classify apps is by their functionality. Productivity apps help users organize their time, take notes, or manage tasks. Educational apps are designed for learning and include language apps, math games, or study tools. Utility apps provide basic services such as calculators, calendars, or file managers.

Apps can also be classified by how they are used. Some apps work offline, while others need an internet connection. Finally, apps can be free or paid, depending on how they are distributed. 

Understanding these classifications students become more responsible and effective smartphone users.

>> How to organise your phone apps

>> 10 Crazy Apps

3 Types of  mobile apps development

Calculator with Scratch - 4PINF

 Have a look to this tutorial by Fernando Arciniega. Thanks collegue!

You can download buttoms here

Variables:

• Num1
• Num2
• Operation
• Screen

For each number:

For operations:

For the result botton:

To clear data:

                                        or  

4. VISUAL PROGRAMMING - Scratch Games- 4PINF

 

Challenge 1: A dodge game

- 2 sprites, 3 lives (variable), 2 backdrops

- Sprite 1 moves randomly.

- Sprite 2 moves with the arrow keys to dodge Sprite 1.

-  You start with 3 lives, and every time you touch Sprite 1 you loose one life.

- When lives come to 0, change the backdrop showing Game Over and stop all.

ADVANCED: Create a new sprite that moves ramdomly and when you touch it you can have an extra live!!

Challenge 2: A clicker game with fallling objects

Watch the tutorial you find in the Scratch webpage:

Also follow the instructions to this link for creating falling objects

ADVANCED: Create other objects falling with a diffirent score. You can also add sprites to loose points or even to end the game. 

>> Create a line at the botton and in case the sprite comes to the floor you loose one live!

Challenge 3: A catch game with falling objects

Help: https://www.create-learn.us/blog/beginner-scratch-challenges-for-kids/

Or watch this video:

ADVANCED: 

- When the falling object touches the floor you loose one point

- If you get to -1 points the game is over (change backdrop and stop all)

- Create another falling object moving faster with extra score

- When you get 10 points the falling objects goes faster

>>> Some clues to programming:

To add one point when catching the apple and go up to a random position:

To loose one point when the apple touches the floor and go up to a random position:

To end the game when the score is under 0:

To move the bowl:

Challenge 4: A maze game

https://www.create-learn.us/blog/how-to-make-a-maze-in-scratch/

Challenge 5: A Flappy Bird Game

https://www.youtube.com/watch?v=PfQiTBbHHY4&ab_channel=Fuelvin

Other challenges: 

https://sites.google.com/tldsb.on.ca/coding/challenges/jr-int-challenges-year-one