2018/06/08

Fractal App (WIP)



Código html:
<!doctype html>
<html>
  <head>
    <title>Fractal</title>
    <script src="libraries/p5.js"></script>
    <script src="libraries/p5.dom.js"></script>
    <script src="code.js"></script>
</head>
  <body style="text-align:center; margin:0px">
  </body>
</html>

Código j5.js:
var button;

function setup(){
  createCanvas(500,500);
  button = createButton('GO');
    button.position((windowWidth/2)+(width/2)-50, 12);
    button.mousePressed(go);
}

function draw(){
  background(255,215,0);
  textAlign(CENTER);
  textSize(24);
  text('FRACTAL TREE', width/2, 220);
  textSize(12);
  text('Desing and coding by Antonio Vallecillos', width/2, 235);
  text('Press de upper right button and enjoy', width/2, 250);
}

function go(){
  window.location.href = "screen1.html";
}

Código html:
<!doctype html>
<html>
  <head>
    <title>Fractal</title>
    <script src="libraries/p5.js"></script>
    <script src="libraries/p5.dom.js"></script>
    <script src="code_screen1.js"></script>
</head>
  <body style="text-align:center; margin:0px">
  </body>
</html>

Código j5.js:
var slider1;
var slider2;
var button;

function setup(){
  createCanvas(500,500);
  slider1 = createSlider(0, 3*PI/4, PI/8, PI/512);
  slider1.position((windowWidth/2)-(width/2)+10, 10);
  slider2 = createSlider(2/3, 3/4, 12/17, 0.0001);
  slider2.position((windowWidth/2)-(width/2)+10, 40);
  button = createButton('BACK');
    button.position((windowWidth/2)+(width/2)-66, 12);
    button.mousePressed(go);
}

function draw(){
  background(255,215,0);
  angulo = slider1.value();
  relacion = slider2.value();
  stroke(0);
  strokeWeight(1);
  translate(width/2, height);
  rama(120);
}

function rama(longitud){
  line(0, 0, 0, -longitud);
  translate(0, -longitud);
  if (longitud > 8) {
    push();
    rotate(angulo);
    rama(longitud * relacion);
    pop();
    push();
    rotate(-angulo);
    rama(longitud * relacion);
    pop();
  }
}

function go(){
  window.location.href = "index.html";
}