Conceptos básicos de programación en javaScript. Processing.

1. App y Videojuegos

2. HISTORIA

3. INJERENCIA ACTUAL

4. PROGRAMACIÓN

6. PROCESSING
• LENGUAJE PRÁCTICO Y SENCILLO
• LENGUAJE ORIENTADO A OBJETOS
(ESTANDAR DE PROGRAMACIÓN HOY EN
DÌA)
2001

7. https://processing.org/
• LENGUAJE PRÁCTICO Y SENCILLO
• LENGUAJE ORIENTADO A OBJETOS
(ESTANDAR DE PROGRAMACIÓN HOY EN
DÌA)
2001

8. Ben Fry & Casey Reas
2001

9. Ben Fry
http://benfry.com

11. Casey Reas
https://processing.org/books/
http://reas.com

12. PROJECTS
http://www.newrafael.com/websites/

13. http://onecm.com/projects/mycelium/

14. http://wearechopchop.com/“unnamed-soundsculpture”/

15. http://wearechopchop.com/“unnamed-soundsculpture”/

16. PONG

17. http://benhem.com/games/wayfarer/

18. PROCESSING

19. Interfaz
• Espacio y herramientas asignado para trabajar
en el software.

20. Interfaz
• Espacio y herramientas asignado para trabajar en el software.
Canvas
Estructura del lenguaje
Visualizador
Selector de color

21. Void
()
{}
;
Estructura del lenguaje

22. Size
&
Draw
Estructura del lenguaje

23. Axis
“X” y “Y”
Estructura del lenguaje

25. 2D primitives
Point(int,int);
Point(200,200);
Estructura del lenguaje

26. 2D primitives
line(x,y,x2,y2);
line(30, 20, 85, 75);
Estructura del lenguaje

27. 2D primitives
triangle(x, y, x1, y1, x2, y2);
triangle(30, 75, 58, 20, 86, 75);
Estructura del lenguaje

28. 2D primitives
rect(x, y, int, int);
rect(30, 20, 55, 55);
Estructura del lenguaje

29. 2D primitives
ellipse(x, y, int, int);
ellipse(56, 46, 55, 55);
ellipse(250,250,100,100);
Estructura del lenguaje

30. Color
Estructura del lenguaje

31. ColorRGB
R= red
G = green
B= Blue
Estructura del lenguaje

32. Color
0-255
0 = negro
255 = blanco
Estructura del lenguaje

33. Color
fill(153);
fill(100,50,200);
Estructura del lenguaje

34. Color
fill(100,50,200);
rect(100,100,50,50)
Estructura del lenguaje

35. Color
background(????);
Estructura del lenguaje

36. Estructura del lenguaje
Ejercicio # 1
recrear una pintura de pierre
mondrian

38. Transparencia
fill(255,0,0,)
fill(255,0,0,?)
ColorEstructura del lenguaje

39. //
/* ___ */
Estructura del lenguaje

40. Random
fill(random(0,255),0,0);
ColorEstructura del lenguaje

41. stroke(int);
strokeWeight(int);
noStroke();
fill(_,_,_);
noFill();
Estructura del lenguaje

42. noStroke();
strokeWeight(_);
mouseX,mouseY;
noFill;
Estructura del lenguaje

43. Ejercicio # 2
Crear una composición con
figuras primitivas triangulares
y transparencia.

44. RICHARD MIERNICZAK

47. mouse X
mouse Y
pmouseX
pmouseY
Estructura del lenguaje
previousmousePosition
= pmouseX & Y

48. Estructura del lenguaje
mousePressed
keyPressed
void keyPressed () {
background(255);
}

49. Estructura del lenguaje
width
Declaration :
ellipse(0,0,width,height);
ellipse(0,0,width/2,height/2);

50. Estructura del lenguaje
Variables
1-declare the variable!: (on top)
type = datatype
int = integr,4,3,5,6
float = decimal 5.434)
+ name;"any name"

51. Estructura del lenguaje
Variables
2- initialize the variable (insetup)
3- use the variable (indraw)

52. Estructura del lenguaje
Variables
variables can be:
1- declare TOP - function SETUP - execute
DRAW
2 declare + function in top + execute DRAW;

53. Estructura del lenguaje
RANDOM
Function
random (100);
0——>100
random(50,100);
50——->100;

54. Estructura del lenguaje
RANDOM
Function
random (100);
0——>100
random(50,100);
50——->100;

55. Print();
Prinln();
println("circleX" +
circleX);
Estructura del lenguaje

56. operaciones
+,-,*,/,
Estructura del lenguaje

57. Conditions
Estructura del lenguaje
if (_?__){
———
———
———
}

58. Conditions
Estructura del lenguaje
? = boolean Expression
boolean Expression are relational
expressions

59. Estructura del lenguaje
> - mayor que
< - menor que
>= - mayor o igual a
<= - menor o igual a
== - igual o igual
!= - no igual
Conditions

60. Conditions
Estructura del lenguaje
if (6>5 ){
———
———
———
}
true
execute
if (6<5 ){
———
———
———
}
false
don´t
execute

61. Conditions
Estructura del lenguaje
if (mouseX > width/2) {
background (255,100,0);
}