Created
December 14, 2018 10:26
-
-
Save iosonosempreio/ba2d521779f945a572f72d429ae609b9 to your computer and use it in GitHub Desktop.
p5 experiment
This file contains 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"> | |
<meta name="viewport" width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0> | |
<style> body {padding: 0; margin: 0;} </style> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.min.js"></script> | |
<script src="sketch.js"></script> | |
</head> | |
<body> | |
</body> | |
</html> |
This file contains 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 preload(){ | |
// put preload code here | |
} | |
function setup() { | |
// put setup code here | |
createCanvas(windowWidth,windowHeight); | |
rectMode(CENTER); | |
angleMode(DEGREES) | |
let rects = [ | |
// {'x': random(50,450), 'y': random(50,450), 'deg': random(0,360)}, | |
// {'x': random(50,450), 'y': random(50,450), 'deg': random(0,360)} | |
] | |
for (var i=0; i<150; i++) { | |
rects.push({'x': random(50,windowWidth-50), 'y': random(50,windowHeight-50), 'deg': random(0,360)}) | |
} | |
// rects.forEach( (r) => { | |
// fill('white'); | |
// stroke('#34495E'); | |
// drawingContext.setLineDash([1,0]); | |
// push(); | |
// translate(r.x,r.y) | |
// rotate(r.deg); | |
// rect(0,0,20,20); | |
// pop(); | |
// noStroke(); | |
// fill('#DC7633'); | |
// r.x1 = 150 * cos(r.deg) + r.x; | |
// r.y1 = 150 * sin(r.deg) + r.y; | |
// ellipse(r.x1, r.y1, 8, 8); | |
// fill('#1ABC9C'); | |
// r.x2 = 10 * cos(r.deg) + r.x; | |
// r.y2 = 10 * sin(r.deg) + r.y; | |
// ellipse(r.x2, r.y2, 8, 8); | |
// }) | |
for(var i = 0; i < rects.length; i +=2){ | |
for (var ii = 0; ii < 2; ii++){ | |
fill('white'); | |
stroke('#34495E'); | |
drawingContext.setLineDash([1,0]); | |
push(); | |
translate(rects[i+ii].x,rects[i+ii].y) | |
rotate(rects[i+ii].deg); | |
rect(0,0,20,20); | |
pop(); | |
// noStroke(); | |
// fill('#DC7633'); | |
rects[i+ii].x1 = 150 * cos(rects[i+ii].deg) + rects[i+ii].x; | |
rects[i+ii].y1 = 150 * sin(rects[i+ii].deg) + rects[i+ii].y; | |
// ellipse(rects[i+ii].x1, rects[i+ii].y1, 8, 8); | |
// fill('#1ABC9C'); | |
rects[i+ii].x2 = 10 * cos(rects[i+ii].deg) + rects[i+ii].x; | |
rects[i+ii].y2 = 10 * sin(rects[i+ii].deg) + rects[i+ii].y; | |
// ellipse(rects[i+ii].x2, rects[i+ii].y2, 8, 8); | |
} | |
noFill(); | |
stroke('#34495E'); | |
drawingContext.setLineDash([3,5]); | |
bezier(rects[i].x2,rects[i].y2, rects[i].x1,rects[i].y1, rects[i+1].x1,rects[i+1].y1, rects[i+1].x2,rects[i+1].y2) | |
for (var ii = 0; ii < 2; ii++){ | |
noStroke(); | |
fill('#DC7633'); | |
ellipse(rects[i+ii].x1, rects[i+ii].y1, 8, 8); | |
fill('#1ABC9C'); | |
ellipse(rects[i+ii].x2, rects[i+ii].y2, 8, 8); | |
} | |
} | |
} | |
function draw() { | |
// put drawing code here | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment