Skip to content

Instantly share code, notes, and snippets.

@brendandawes

brendandawes/README.md

Last active January 12, 2023 08:29
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save brendandawes/08a0b5e3867426dad100 to your computer and use it in GitHub Desktop.
Save brendandawes/08a0b5e3867426dad100 to your computer and use it in GitHub Desktop.
Download ZIP
Sine waves created with p5.js
Raw
README.md

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.

Raw
index.html
<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>
Raw
sketch.js
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
Copy link

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