Skip to content

Instantly share code, notes, and snippets.

@ndrhzn

ndrhzn/index.html

Last active June 16, 2019 14:51
Show Gist options
  • Save ndrhzn/3673c556da2a9b4b0fc6df5bfb57849e to your computer and use it in GitHub Desktop.
Save ndrhzn/3673c556da2a9b4b0fc6df5bfb57849e to your computer and use it in GitHub Desktop.
Download ZIP
P5 - Random
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Random</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">
<meta charset="utf-8" />
<style media="screen">
html, body {
margin: 0;
padding: 0;
}
canvas {
display: block;
}
</style>
</head>
<body>
</body>
<script type="text/javascript">
let direction = ['h', 'v'];
let x2;
let y2;
function setup() {
createCanvas(windowWidth, windowHeight);
frameRate(20);
graphics = createGraphics(windowWidth, windowHeight);
graphics.background(255);
graphics.stroke(1);
graphics.strokeWeight(0.05);
}
function draw() {
let startX = random(0, windowWidth);
let startY = random(0, windowHeight);
let step = windowHeight/10;
let x = startX;
let y = startY;
for(i = 1; i < 100; i++) {
dir = direction[Math.floor(Math.random() * direction.length)];
if(dir == 'h') {
x2 = x + int(random(-step, step));
y2 = y;
} else {
x2 = x;
y2 = y + int(random(-step, step));
}
noFill();
graphics.line(x, y, x2, y2);
x = x2;
y = y2;
}
image(graphics, 0, 0);
noFill();
stroke('white');
strokeWeight(4);
textSize(windowWidth/8);
textAlign(CENTER);
textStyle(BOLD);
textFont('Orbitron');
text('random', windowWidth/2, windowHeight/2);
}
function windowResized() {
resizeCanvas(windowWidth, windowHeight);
}
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment