Antonio Vallecillos: Fractal Tree v0.05

Código html (index.html):

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="Fractal Tree" content="App design and coding by Antonio Vallecillos.">
    <title>Fractal Tree</title>
    <script type="text/javascript" src="libraries/p5.js"></script>
    <script type="text/javascript" src="libraries/p5.dom.js"></script>
    <script type="text/javascript" src="index.js"></script>
    <script type="text/javascript" src="debug.js"></script>
</head>
  <body style="text-align:center; margin:0px">
  </body>
</html>

Código p5.js (index.js):

var button1;
var button2;

function setup(){
  //createCanvas(500,500);
  createCanvas(window.innerWidth,window.innerHeight);
  button1 = createButton('GO');
  button2 = createButton('ABOUT');
  var density = displayDensity();
    pixelDensity(density);

}

function draw(){
  background(255,215,0);
  textAlign(CENTER);
  textSize(36);
  text('FRACTAL TREE', width/2, 250);
  textSize(12);
  text('Press the "GO" button and enjoy', width/2, 265);
  button1.position((windowWidth/2)+(width/2)-90, 20);
  button2.position((windowWidth/2)+(width/2)-90, 110);
    button1.size(70, 70);
    button2.size(70, 70);
    button1.mousePressed(go);
    button2.mousePressed(about);
    textAlign(LEFT);
    debug();
}

function windowResized(){
  resizeCanvas(window.innerWidth,window.innerHeight);
}

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

function about(){
  window.location.href = "screen2.html";
}

function closeWindow(){
  var myWindow = window.open("", "_self");
  myWindow.close();
}

function leave(){
  var myWindow = window.open("", "_self");
  myWindow.document.write("");
  setTimeout (function() {myWindow.close();},1000);
}

function cierra(){
  window.open('','_parent','');
  window.close();
}

Código html (screen1.html):

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="Fractal Tree" content="App design and coding by Antonio Vallecillos.">
    <title>Fractal Tree</title>
    <script type="text/javascript" src="libraries/p5.js"></script>
    <script type="text/javascript" src="libraries/p5.dom.js"></script>
    <script type="text/javascript" src="screen1.js"></script>
    <script type="text/javascript" src="debug.js"></script>
</head>
  <body style="text-align:center; margin:0px">
  </body>
</html>

Código p5.js (screen1.js):

var slider1;
var slider2;
var slider3;
var button1;

function setup(){
  //createCanvas(500,500);
  createCanvas(window.innerWidth,window.innerHeight);
  slider1 = createSlider(100, 300, 120, 1);
  slider2 = createSlider(2/3, 3/4, 12/17, 0.0001);
  slider3 = createSlider(0, 3*PI/4, PI/8, PI/512);
  button1 = createButton('BACK');
  var density = displayDensity();
    pixelDensity(density*1);
}

function draw(){
  background(255,215,0);
  textSize(12);
  textAlign(RIGHT);
  text('LENGTH', (windowWidth/2)-(width/2)+100, 32);
  text('COMPLEXITY', (windowWidth/2)-(width/2)+100, 62);
  text('ANGLE', (windowWidth/2)-(width/2)+100, 92);

  longitud = slider1.value();
  relacion = slider2.value();
  angulo = slider3.value();

  stroke(0);
  strokeWeight(3);
  push();
  translate(width/2, height);
  rama(longitud);

  slider1.position((windowWidth/2)-(width/2)+110, 20);
  slider1.size(width-220, 10);
  slider2.position((windowWidth/2)-(width/2)+110, 50);
  slider2.size(width-220, 10);
  slider3.position((windowWidth/2)-(width/2)+110, 80);
    slider3.size(width-220, 10);
    button1.position((windowWidth/2)+(width/2)-90, 20);
    button1.size(70, 70);
    button1.mousePressed(back);
    pop();
    debug();
}

function windowResized(){
  resizeCanvas(window.innerWidth,window.innerHeight);
}

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 back(){
  window.location.href = "index.html";
}

function closeWindow(){
  var myWindow = window.open("", "_self");
  myWindow.close();
}

Código html (screen2.html):

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="Fractal Tree" content="App design and coding by Antonio Vallecillos.">
    <title>Fractal Tree</title>
    <script type="text/javascript" src="libraries/p5.js"></script>
    <script type="text/javascript" src="libraries/p5.dom.js"></script>
    <script type="text/javascript" src="screen2.js"></script>
    <script type="text/javascript" src="debug.js"></script>
</head>
  <body style="text-align:center; margin:0px">
  </body>
</html>

Código p5.js (screen2.js):

var button1;
var img;

function setup(){
  //createCanvas(500,500);
  createCanvas(window.innerWidth,window.innerHeight);
  img = loadImage("LogoAVapp.png");
  button1 = createButton('BACK');
  var density = displayDensity();
    pixelDensity(density);
}

function draw(){
  background(255,215,0);
  textAlign(CENTER);
  textSize(36);
  text('FRACTAL TREE', width/2, 250);
  textSize(12);
  text('Version 0.05 [2018.07.05]', width/2, 265);
  text('Design and coding by Antonio Vallecillos', width/2, 300);
  text('antoniovallecillos@blogspot.com', width/2, 315);
  text('Twitter: @a_vallecillos', width/2, 330);
  button1.position((windowWidth/2)+(width/2)-90, 20);
    button1.size(70, 70);
    button1.mousePressed(back);
    image(img, width/2, height/2);
    textAlign(LEFT);
    debug();
}

function windowResized(){
  resizeCanvas(window.innerWidth,window.innerHeight);
}

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

Código p5.js (debug.js):

function debug () {
  strokeWeight(0);
  textAlign(LEFT);
    text ("DEBUG:", 10, height - 3 * 15);
    text ("pixelDensity = " + pixelDensity(), 10, height - 2 * 15);
  text ("displayDensity = " + displayDensity(), 10, height - 1 * 15);
}

Páginas

2021/10/17

Fractal Tree v0.05