Skip to content

Instantly share code, notes, and snippets.

@dviramontes

dviramontes/index.html

Last active May 22, 2017 05:24
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save dviramontes/d9f61ba0d260bdc0e89da1289b5687a8 to your computer and use it in GitHub Desktop.
Save dviramontes/d9f61ba0d260bdc0e89da1289b5687a8 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin [p5.js] // source http://jsbin.com/qitexamoki
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="[p5.js]" />
<meta charset="utf-8">
<title>JS Bin</title>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/processing.js/1.4.8/processing.min.js"></script>
</head>
<body>
<canvas id="canvas1" width="200" height="200" border="1"></canvas>
<script id="jsbin-javascript">
var centerX, centerY, pHeight, pWidth, mouse_x, mouse_y,
frameRate = 24;
function sketchProc(p5){
function LFO(max){
var that = this;
this.max = max;
this.min = 0.0;
var frameCount = p5.frameCount;
this.count = frameCount + 1;
this.run = function(){
var osc = that.max * Math.sin(p5.radians( Math.PI *
frameCount )) ;
return osc;
};
}
function drawShape(){
var lfo = new LFO(300);
var n = parseInt(lfo.run(),10);
// lerp(value1, value2, amt) function
var xRand = p5.lerp(n,1,n,1);
// console.log(xRand);
for (var i=1; i < 100; i++) {
var noise = p5.noise(5) * 200 ;
p5.pushMatrix();
p5.translate(centerX, 110 );
p5.rotate(i);
p5.fill(
n,20,i,77
);
p5.strokeWeight(0.5);
p5.stroke(120.0);
p5.bezier(i,i,n,noise,i,i * noise,noise ,i);
p5.popMatrix();
}
}
p5.setup = function(){
p5.size(570,300);
centerX = p5.width/2; centerY = p5.height/2;
pWidth = p5.width; pHeight = p5.height;
//var fontA = p5.loadFont("Gulim.ttf");
//p5.textFont(fontA,34);
// p5.smooth();
p5.frameRate(frameRate);
};
p5.draw = function(){
p5.background(200);
mouse_x = p5.mouseX;
mouse_y = p5.mouseY;
p5.pushMatrix();
drawShape();
p5.popMatrix();
p5.pushMatrix();
p5.translate(centerX, centerY);
p5.fill(200,330,10);
p5.textAlign(p5.CENTER);
//p5.text(items[0],0,0);
// p5.text("item[0]",0,0);
p5.popMatrix();
};
}
var canvas = document.getElementById("canvas1");
var p5 = new Processing(canvas, sketchProc);
</script>
<script id="jsbin-source-javascript" type="text/javascript">var centerX, centerY, pHeight, pWidth, mouse_x, mouse_y,
frameRate = 24;
function sketchProc(p5){
function LFO(max){
var that = this;
this.max = max;
this.min = 0.0;
var frameCount = p5.frameCount;
this.count = frameCount + 1;
this.run = function(){
var osc = that.max * Math.sin(p5.radians( Math.PI *
frameCount )) ;
return osc;
};
}
function drawShape(){
var lfo = new LFO(300);
var n = parseInt(lfo.run(),10);
// lerp(value1, value2, amt) function
var xRand = p5.lerp(n,1,n,1);
// console.log(xRand);
for (var i=1; i < 100; i++) {
var noise = p5.noise(5) * 200 ;
p5.pushMatrix();
p5.translate(centerX, 110 );
p5.rotate(i);
p5.fill(
n,20,i,77
);
p5.strokeWeight(0.5);
p5.stroke(120.0);
p5.bezier(i,i,n,noise,i,i * noise,noise ,i);
p5.popMatrix();
}
}
p5.setup = function(){
p5.size(570,300);
centerX = p5.width/2; centerY = p5.height/2;
pWidth = p5.width; pHeight = p5.height;
//var fontA = p5.loadFont("Gulim.ttf");
//p5.textFont(fontA,34);
// p5.smooth();
p5.frameRate(frameRate);
};
p5.draw = function(){
p5.background(200);
mouse_x = p5.mouseX;
mouse_y = p5.mouseY;
p5.pushMatrix();
drawShape();
p5.popMatrix();
p5.pushMatrix();
p5.translate(centerX, centerY);
p5.fill(200,330,10);
p5.textAlign(p5.CENTER);
//p5.text(items[0],0,0);
// p5.text("item[0]",0,0);
p5.popMatrix();
};
}
var canvas = document.getElementById("canvas1");
var p5 = new Processing(canvas, sketchProc);</script></body>
</html>
Raw
jsbin.qitexamoki.js
var centerX, centerY, pHeight, pWidth, mouse_x, mouse_y,
frameRate = 24;
function sketchProc(p5){
function LFO(max){
var that = this;
this.max = max;
this.min = 0.0;
var frameCount = p5.frameCount;
this.count = frameCount + 1;
this.run = function(){
var osc = that.max * Math.sin(p5.radians( Math.PI *
frameCount )) ;
return osc;
};
}
function drawShape(){
var lfo = new LFO(300);
var n = parseInt(lfo.run(),10);
// lerp(value1, value2, amt) function
var xRand = p5.lerp(n,1,n,1);
// console.log(xRand);
for (var i=1; i < 100; i++) {
var noise = p5.noise(5) * 200 ;
p5.pushMatrix();
p5.translate(centerX, 110 );
p5.rotate(i);
p5.fill(
n,20,i,77
);
p5.strokeWeight(0.5);
p5.stroke(120.0);
p5.bezier(i,i,n,noise,i,i * noise,noise ,i);
p5.popMatrix();
}
}
p5.setup = function(){
p5.size(570,300);
centerX = p5.width/2; centerY = p5.height/2;
pWidth = p5.width; pHeight = p5.height;
//var fontA = p5.loadFont("Gulim.ttf");
//p5.textFont(fontA,34);
// p5.smooth();
p5.frameRate(frameRate);
};
p5.draw = function(){
p5.background(200);
mouse_x = p5.mouseX;
mouse_y = p5.mouseY;
p5.pushMatrix();
drawShape();
p5.popMatrix();
p5.pushMatrix();
p5.translate(centerX, centerY);
p5.fill(200,330,10);
p5.textAlign(p5.CENTER);
//p5.text(items[0],0,0);
// p5.text("item[0]",0,0);
p5.popMatrix();
};
}
var canvas = document.getElementById("canvas1");
var p5 = new Processing(canvas, sketchProc);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment