JavaScript - P5JS DISTRIBUIR OBJETOS

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 clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Pos: 32

Val: 55

P5JS DISTRIBUIR OBJETOS

Publicado por Enrique (16 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 clara

No me gusta: Está respuesta no esta clara o no es útil

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í:

function setup() {

  createCanvas(windowWidth,windowHeight)

  background(239, 185, 237)

function draw() {

Valora esta respuesta

Comentar

Pos: 32

Val: 55

P5JS DISTRIBUIR OBJETOS

Publicado por Enrique (16 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

Comentar

Pos: 52

Val: 36

P5JS DISTRIBUIR OBJETOS

Publicado por Andrés (9 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

Comentar

Pos: 32

Val: 55

P5JS DISTRIBUIR OBJETOS

Publicado por Enrique (16 intervenciones) el 12/12/2017 00:46:55

Si todo es variable

Valora esta respuesta

Comentar

Pos: 52

Val: 36

P5JS DISTRIBUIR OBJETOS

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

Prueba:

<!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>

Valora esta respuesta

Comentar

Pos: 8

Val: 553

P5JS DISTRIBUIR OBJETOS

Publicado por kip (107 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:

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

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

Comentar

Pos: 32

Val: 55

P5JS DISTRIBUIR OBJETOS

Publicado por Enrique (16 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

Comentar

QR Escanner

Pasar id a variable para poder hacer consulta