Last active
March 3, 2018 03:36
-
-
Save jacoyutorius/1bd29f8b170312f613aa6445dddfa6a9 to your computer and use it in GitHub Desktop.
sample html page (made by 'https://www.venezia-works.com/bst/index.html')
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="js"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | |
| <meta name="description" content=""> | |
| <meta name="author" content=""> | |
| <title>my page</title> | |
| <link rel="stylesheet" href="https://getbootstrap.com/dist/css/bootstrap.min.css"> | |
| <link href="https://getbootstrap.com/docs/4.0/examples/starter-template/starter-template.css" rel="stylesheet"> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.js"></script> | |
| </head> | |
| <body> | |
| <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top"> | |
| <a class="navbar-brand" href="#"></a> | |
| </nav> | |
| <div id="container" class="container"> | |
| <div class="starter-template"> | |
| <h2>Hi</h2> | |
| <p class="lead">How Are You?</p> | |
| </div> | |
| </div><!-- /.container --> | |
| <div id="canvas-container"></div> | |
| <!-- Bootstrap core JavaScript | |
| ================================================== --> | |
| <!-- Placed at the end of the document so the pages load faster --> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> | |
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script> | |
| <script>/** JS：Area */ | |
| /** JS：Area */ | |
| var WIDTH = screen.width; | |
| var HEIGHT = screen.height * 0.7; | |
| var t, x1, y1, x2, y2; | |
| function setup() | |
| { | |
| // p5.jsでcanvasの位置を変える方法 | |
| // http://p5aholic.hatenablog.com/entry/2015/05/16/163251 | |
| var canvas = createCanvas(WIDTH, HEIGHT); | |
| canvas.parent("canvas-container"); | |
| colorMode(RGB, 255, 255, 255, 1); | |
| noFill(); | |
| t = 0; | |
| } | |
| function draw() | |
| { | |
| x1 = width * noise(t + 0); | |
| y1 = height * noise(t + 10); | |
| x2 = width * noise(t + 20); | |
| y2 = height * noise(t + 30); | |
| line(x1, y1, x2, y2, 1); | |
| stroke(200, 200, 200, 0.1); | |
| t += 0.005; | |
| } | |
| </script> | |
| <style>/** CSS：Area */ | |
| body { | |
| padding-top: 50px; | |
| } | |
| .starter-template { | |
| padding: 40px 15px; | |
| text-align: center; | |
| } | |
| #container { | |
| position: relative; | |
| padding-top: 200px; | |
| } | |
| #canvas-container { | |
| top: 0; | |
| left: 0; | |
| position: absolute; | |
| z-index: 10; | |
| } | |
| </style> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment