Serie wave La onda del señor Daniel Shiffman #1
Los proyectos estan realizados con p5js @patxangas
Created
August 20, 2016 17:07
-
-
Save karlosgliberal/e8fc3a5ec24546688f34403091acc0b6 to your computer and use it in GitHub Desktop.
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
| (function($, undefined) { | |
| console.log("hola"); | |
| })(jQuery); |
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> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>moon</title> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js" type="text/javascript"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js" type="text/javascript"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/addons/p5.dom.js" type="text/javascript"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/addons/p5.sound.js" type="text/javascript"></script> | |
| <script src="app.js" type="text/javascript"></script> | |
| <script src="sketch.js" type="text/javascript"></script> | |
| <link rel="stylesheet" href="style.css" media="screen" title="no title" charset="utf-8"> | |
| <style> body {padding: 0; margin: 0;} canvas {vertical-align: center; horizontal-aling: center;} </style> | |
| </head> | |
| <body> | |
| </body> | |
| </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
| var xspacing = 26; // Distance between each horizontal location | |
| var w; // Width of entire wave | |
| var theta = 1.0; // Start angle at 0 | |
| var amplitude = 100.0; // Height of wave | |
| var period = 700.0; // How many pixels before the wave repeats | |
| var dx; // Value for incrementing x | |
| var yvalues; // Using an array to store height values for the wave | |
| function setup() { | |
| createCanvas(1200, 960); | |
| w = width+100; | |
| dx = (TWO_PI / period) * xspacing; | |
| yvalues = new Array(floor(w/xspacing)); | |
| } | |
| function draw() { | |
| background(0); | |
| calcWave(); | |
| renderWave(); | |
| } | |
| function calcWave() { | |
| // Increment theta (try different values for | |
| // 'angular velocity' here | |
| theta += map(mouseX,0,960,0.01,0.09); | |
| amplitude = map(mouseY,0,1000,50,400); | |
| // For every x value, calculate a y value with sine function | |
| var x = theta; | |
| for (var i = 0; i < yvalues.length; i++) { | |
| yvalues[i] = sin(x)*amplitude; | |
| x+=dx; | |
| } | |
| } | |
| function renderWave() { | |
| noStroke(); | |
| fill(9203,62,118,200); | |
| // A simple way to draw the wave with an ellipse at each location | |
| for (var x = 0; x < yvalues.length; x++) { | |
| for (var j = 0; j < 1000; j += 40) { | |
| ellipse(x*xspacing+j, height/2+yvalues[x]+j, x*0.5, x*0.5); | |
| } | |
| } | |
| } |
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
| canvas { | |
| padding: 0; | |
| margin: auto; | |
| display: block; | |
| width: 800px; | |
| height: 600px; | |
| position: absolute; | |
| top: 0; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| } | |
| body { | |
| background-color: #000; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment