Instantly share code, notes, and snippets.

anonymous /randomizationKlee
Created Aug 30, 2017

Embed
What would you like to do?
Randomization_Klee
var r = new Rune({
container: "#canvas",
width: 800,
height: 1100,
debug: true
});
//background rect
var back2 = r.rect(0,0, r.width, r.height)
.fill('hsv', 250, 100, 40)
.stroke(false)
//top ellipses
for(i = 0; i < 200; i++) {
var back1 = r.ellipse(r.random(0, r.width), r.random(0, r.height), 100, 100)
.fill('hsv', 260, 100, 40)
.stroke(false)
back1.state.fill
.clearer(0.75)
}
//lines
var noise = new Rune.Noise();
var linePoints = [];
var x = 0;
var y = -300;
while(y < 700) {
// increment y with a random amount
y += Rune.random(60, 150);
// use noise to find a x value from 500 to 600.
// x = 300 + (noise.get(x / 150) * 200);
x = Rune.random(300, 600)
// push this point into the array
linePoints.push(new Rune.Vector(x, y));
}
// Draw shapes based on those points
// -------------------------------------
// loop through each point but the last one
for(var i = 0; i < linePoints.length - 1; i++)
{
// then find all the points we need for this rectangle
var bottomLeft = linePoints[i];
var bottomRight = linePoints[i + 1];
// aaaand the line
r.line(bottomLeft.x, bottomLeft.y, bottomRight.x, bottomRight.y)
.strokeWidth(2)
.stroke('hsv',20, 80, 60);
}
var linePoints2 = [];
var x = 300;
var y = 300;
// increment y with a random amount
y += Rune.random(60, 150);
// use noise to find a x value from 500 to 600.
x = 300 + (noise.get(x / 150) * 200);
while(y < 900) {
x = Rune.random(100, 600)
// // push this point into the array
linePoints2.push(new Rune.Vector(x, y));
}
for(var i = 0; i < linePoints2.length - 1; i++)
{
// // then find all the points we need for this rectangle
var bottomLeft2 = linePoints2[i];
var bottomRight2 = linePoints2[i + 1];
// // aaaand the line
r.line(bottomLeft2.x, bottomLeft2.y, bottomRight2.x, bottomRight2.y)
.strokeWidth(2)
.stroke('hsv',20, 80, 90);
}
var linePoints3 = [];
var x = 300;
var y = 300;
while(y < 600) {
// // increment y with a random amount
y += Rune.random(60, 150);
// // use noise to find a x value from 500 to 600.
// x = 300 + (noise.get(x / 150) * 200);
x = Rune.random(100, 600)
// // push this point into the array
linePoints3.push(new Rune.Vector(x, y));
}
for(var i = 0; i < linePoints3.length - 1; i++)
{
// // then find all the points we need for this rectangle
var bottomLeft3 = linePoints3[i];
var bottomRight3 = linePoints3[i + 1];
// // aaaand the line
r.line(bottomLeft3.x, bottomLeft3.y, bottomRight3.x, bottomRight3.y)
.strokeWidth(2)
.stroke(0);
}
var linePoints4 = [];
var x = 300;
var y = 400;
while(y < 2000) {
// // increment y with a random amount
y += Rune.random(60, 150);
// // use noise to find a x value from 500 to 600.
// x = 300 + (noise.get(x / 150) * 200);
x = Rune.random(100, 600)
// // push this point into the array
linePoints4.push(new Rune.Vector(x, y));
}
for(var i = 0; i < linePoints4.length - 1; i++)
{
// // then find all the points we need for this rectangle
var bottomLeft4 = linePoints4[i];
var bottomRight4 = linePoints4[i + 1];
// // aaaand the line
r.line(bottomLeft4.x, bottomLeft4.y, bottomRight4.x, bottomRight4.y)
.strokeWidth(2)
.stroke('hsv',40, 100, 100);
}
var p0 = r.polygon(0, 700)
.stroke(255)
.strokeWidth(.2)
.strokeDash(100,.06)
.fill(false)
for (var i = 0; i < 20; i++) {
p0.lineTo(Math.random() * (300), Math.random() * (r.height - 200))
}
//black tinges
var noise = new Rune.Noise();
var xStep = 7;
for(var i = 0; i < 500; i++) {
var noisePath = r.path(r.random(100, r.width) , 0)
.stroke(0)
.fill(false)
.strokeWidth(2);
var noiseStep = 10;
for(var y = 0; y < r.height; y += xStep) {
var x = noise.get(noiseStep) * 2*i;
noisePath.lineTo(x, y);
noiseStep += .1;
}
}
// //moon
var moon = r.ellipse(r.width*0.75, r.height*0.12, 100, 100)
.fill('hsv',20, 80, 100)
.stroke(false)
var noise = new Rune.Noise()//.noiseDetail(0.6);
var numPoints = 100;
var pointDegree = 360/numPoints;
var radius = 150;
var noiseSteps = 200;
for (var i = 0; i < 10; i++) {
var noiseCircle = r.polygon(r.width*0.75, r.height*0.12)
.stroke(255)
.fill(false)
.strokeWidth(.2);
radius = 45 - 5*i;
for(var j = 0; j < numPoints; j++) {
var noiseRadius = (noise.get(noiseSteps) * 10) + radius; //adjust here
var x = Math.cos(Rune.radians(pointDegree * j)) * noiseRadius;
var y = Math.sin(Rune.radians(pointDegree * j)) * noiseRadius;
noiseCircle.lineTo(x,y);
noiseSteps += 80; //adjust here
}
}
// //white on the left
var noise = new Rune.Noise();
var xStep = 10;
for(var i = 0; i < 200; i++) {
var noisePath = r.path(r.random(-200, 300) , 0)
.stroke(255)
.fill(false)
.strokeWidth(.04);
var noiseStep = 0;
for(var y = 0; y < r.height; y += xStep) {
var x = noise.get(noiseStep) * 2*i;
noisePath.lineTo(x, y);
noiseStep += .1;
}
}
//white on the right
for(var i = 0; i < 200; i++) {
var noisePath = r.path(r.random(500, 1000) , 0)
.stroke(255)
.fill(false)
.strokeWidth(.05);
var noiseStep = 0;
for(var y = 0; y < r.height; y += xStep) {
var x = noise.get(noiseStep) * 2*i;
noisePath.lineTo(x, y);
noiseStep += .1;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment