Skip to content

Instantly share code, notes, and snippets.

@brendandawes brendandawes/README.md
Last active Nov 5, 2018

Embed
What would you like to do?
Sine waves created with p5.js

This was born out of weekend of playing with p5.js that eventually ended up being my Twitter profile banner updated every hour via a cron job on the server, using Phantomjs to snap the resultant image.

<html>
<head>
<title>Test</title>
<style type="text/css">
body{
margin: 0;
padding: 0
}
</style>
<script src="http://cloud.brendandawes.com/js/p5.min.js"></script>
<script type="text/javascript" language="javascript" src="sketch.js"></script>
</head>
<body bgcolor="#000000" lang="en" text="#ffffff">
</body>
</html>
var colors = [];
function setup() {
createCanvas(1500,500);
noFill();
addColors();
smooth(8);
background(20);
noLoop();
}
function addColors() {
var c;
c = color(0, 138, 176);
colors[0] = c;
c = color(241,100,93);
colors[1] = c;
c = color(0,176,133);
colors[2] = c;
c = color(233,108,31);
colors[3] = c;
c = color(241,114,172);
colors[4] = c;
c = color(222,57,108);
colors[5] = c;
c = color(231,206,0);
colors[6] = c;
c = color(72,22,108);
colors[7] = c;
c = color(44,164,74);
colors[8] = c;
}
function getRandomColor() {
var i = Math.floor(random(colors.length));
var c = colors[i];
return c;
}
function draw() {
makeRibbons();
}
function makeRibbons() {
for (var i=0; i < random(10)+2; i++) {
var strokeW = random(5)+3;
var amount = 500;
var frequency = random(1.0)/15;
var offset = random(200)+5;
var col = getRandomColor();
strokeWeight(strokeW);
stroke(col,180);
var startY = height/2;
beginShape();
vertex(0, startY);
for (var c=1; c < amount; c++) {
var sinoffset = sin(frequency*c);
var sinX = c*(width/amount);
var sinY = startY + (sinoffset*offset);
bezierVertex(sinX,sinY,sinX,sinY-1,sinX,sinY);
}
endShape();
}
}
@lewiswalsh

This comment has been minimized.

Copy link

commented Aug 13, 2014

Neat! But I'm wondering if there's a good reason why you're doing the following:

c = color(0, 138, 176);
colors[0] = c;
c = color(241,100,93);
colors[1] = c;
...

Rather than this:

colors[0] = color(0, 138, 176);
colors[1] = color(241,100,93);
...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.