JavaScript - P5JS DISTRIBUIR OBJETOS

   
Vista:

P5JS DISTRIBUIR OBJETOS

Publicado por ana (3 intervenciones) el 11/12/2017 12:38:38
Tengo que distribuir 5 objetos (triangulos, cuadrados, da igual..) en diagonal.
puedo hacerlo por coordenadas, pero quiero que salgan centrados en cualquier ordenador.
el Canvas lo tengo asi:
createCanvas(windowWidth, windowHeight);

Se que es simple.. pero no se como hacerlo.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Enrique

P5JS DISTRIBUIR OBJETOS

Publicado por Enrique (15 intervenciones) el 11/12/2017 18:46:11
tienes alguna captura de como lo quieres mostrar y que es lo que actualmente tienes. Así estamos a ciegas amigo xD
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

P5JS DISTRIBUIR OBJETOS

Publicado por ana (3 intervenciones) el 11/12/2017 20:02:56
Captura-de-pantalla-2017-12-11-a-las-20.00.54

Necesito algo como esta imagen, dos formas básicas minimo y que ambas se repitan 5 veces en una diagonal.

Y tener.. pues la verdad que no sé ni como empezar.
Tengo mi archivo así:

1
2
3
4
5
6
7
function setup() {
  createCanvas(windowWidth,windowHeight)
  background(239, 185, 237)
}
 
function draw() {
}
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Enrique

P5JS DISTRIBUIR OBJETOS

Publicado por Enrique (15 intervenciones) el 11/12/2017 21:03:54
El codigo de como hacer esto ya lo tengo en la cabeza pero no se trata hacerte la tarea, así que te dare el pseudocódigo:

+Obtener el ancho y alto del canvas
+Asignar padding en base al ancho del 8% a cad lado
+Generar 5 div que midan el 15% del ancho del div(Cuadros):
+Dento de este div generar dos div más que midan el 50% del lado del cuadro y que tenga un border-radious del 50% y darle
posicionamiento absoluto(Circulos)
+El primer al primer ciculo darle un centro con left: 25% y top : 25%
+Al segundo circulo darle top:75% y left: -75%
+posicionar el div a 0, el segundo a 15%+2% del ancho del canvas y el tercero haces lo mismo tomando como punto de partida el segudo y así sucesivamente (Esto para pocicionar de izquierda a derecha)
+Posicionar el primer div al 0px, segundo al 50% de lo que miden cada cuadrado el tercero al 100% el cuarto 150% y quinto a 200%

Creo que con esto deberías tratar de intentar este ejercicio
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

P5JS DISTRIBUIR OBJETOS

Publicado por Andrés (7 intervenciones) el 12/12/2017 00:36:48
Los objetos son del mismo tamaño? es decir, al cambiar de tamaño la ventana
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Enrique

P5JS DISTRIBUIR OBJETOS

Publicado por Enrique (15 intervenciones) el 12/12/2017 00:46:55
Si todo es variable
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

P5JS DISTRIBUIR OBJETOS

Publicado por Andrés (7 intervenciones) el 12/12/2017 01:29:19
Prueba:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html>
<html>
<head>
<title>Objetos</title>
<style>
body {
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
}
</style>
</head>
	<body>
	    <canvas id="myCanvas" />
	    <script>
 
	        function setUp() {
 
				var c = document.getElementById("myCanvas");
 
				c.width = window.innerWidth;
				c.height = window.innerHeight;
 
 
				var foo = Math.min(c.width , c.height-50 );
				var length = foo/5;
 
 
				var cx = c.width/2;
				var cy = c.height/2;
 
 
				var ctx = c.getContext("2d");
 
				drawGroup(ctx, cx-2*length, cy-2*length,length);
				drawGroup(ctx, cx-length, cy-length,length);
				drawGroup(ctx, cx, cy,length);
				drawGroup(ctx, cx+length, cy+length,length);
				drawGroup(ctx, cx+2*length, cy+2*length,length);
 
			}
 
			function drawGroup(ctx, cx, cy, length) {
 
				//Dibuja cuadro
				ctx.rect(cx-length/2,cy-length/2,length,length);
				ctx.stroke();
 
				//Dibuja la circunferencia del centro 
				ctx.beginPath();
				ctx.arc(cx,cy,length/4,0,2*Math.PI);
				ctx.stroke();
 
			    //Dibuja la circunferencia exterior
				ctx.beginPath();
				ctx.arc(cx-length/2,cy+length/2,length/4,0,2*Math.PI);
				ctx.stroke();
 
			}
 
			setUp();
 
			window.addEventListener("resize", setUp);
 
		</script>
	</body>
</html>

Screenshot-from-2017-12-11-18-23-25
Screenshot-from-2017-12-11-18-35-37
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de kip

P5JS DISTRIBUIR OBJETOS

Publicado por kip (101 intervenciones) el 12/12/2017 04:43:47
Hola Andres, muy buena solucion, a partir de la funcion que creaste para dibujar el grafico se podria hacer algo para no escribir manualmente cada argumento que le envias, hice algo asi:

1
2
3
4
var total = 0;
while (total++ < 5) {
    drawGroup(ctx, length * total + 10 * (total - 1), (length * total) / 1.5, length);
}

Entonces este seria el resultado https://repl.it/repls/SimpleDeepskyblueAmethystinepython
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

P5JS DISTRIBUIR OBJETOS

Publicado por ana (3 intervenciones) el 12/12/2017 14:28:08
MUCHAAS GRACIAS. Soy novata y la verdad que solo lo quiero para un trabajo de clase.. solo tengo que usar la programación para eso.. sabes como puedo pasar esto a .js
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Enrique

P5JS DISTRIBUIR OBJETOS

Publicado por Enrique (15 intervenciones) el 12/12/2017 16:57:21
Esta bueno el ejemplo pero no esta como lo muestra la imagen
+Los recuadros no estan esquinados superior izquierda con inferior derecha
+existe una separación entre cada recuadro
+Después del segundo recuadro debería comenzar a 75% de alto del recuadro anterior

Estos detalles con los que marcan la diferencia en el ambito laboral, Si un cliente te pone esta clase de cosas y si no lo haces tal cual, te dira que esta mal.

Y este mismo problema yo lo he puesto como ejemplo con algunos alumnos y obviamente comente el mismisimo error de la respuesta que dierón arriba.

Esta mal la respuesta
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar