Serie Practica Jugando con triangulos y giros #1
Los proyectos estan realizados con p5js @patxangas
Serie Practica Jugando con triangulos y giros #1
Los proyectos estan realizados con p5js @patxangas
| (function($, undefined) { | |
| console.log("hola"); | |
| })(jQuery); |
| <!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> |
| var x; | |
| var y; | |
| var outsideRadius = 400; | |
| var insideRadius = 40; | |
| function setup() { | |
| createCanvas(1200, 960); | |
| background(204); | |
| x = width/2; | |
| y = height/2; | |
| } | |
| function draw() { | |
| background(0); | |
| var numPoints = int(map(mouseX, 0, width, 3, 150)); | |
| var angle = 0; | |
| var angleStep = 180.0/numPoints; | |
| noFill(); | |
| beginShape(TRIANGLES); | |
| stroke(203,62,118,200); | |
| for (var i = 0; i <= numPoints; i++) { | |
| var px = x + cos(radians(angle)) * outsideRadius; | |
| var py = y + sin(radians(angle)) * outsideRadius; | |
| angle += angleStep+mouseY; | |
| vertex(px, py); | |
| px = x + cos(radians(angle)) * insideRadius; | |
| py = y + sin(radians(angle)) * insideRadius; | |
| vertex(px, py); | |
| angle += angleStep+mouseX; | |
| } | |
| endShape(); | |
| } | |
| function mousePressed() { | |
| save("movida.jpg"); | |
| } |
| 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; | |
| } |