Instantly share code, notes, and snippets.

Embed
What would you like to do?
Fade Type
var r = new Rune({
container: "#canvas",
width: 1600,
height: 600
});
function drawCircle() {
r.ellipse(200, 200, 300, 300)
.fill(255, 0, 0)
}
// function drawT() {
// var shape1 = r.path(0, 0)
// .lineTo(r.width*5, 0)
// .lineTo(r.width*5, r.height*5)
// .lineTo(0, r.height*5)
// .fill(0)
// .stroke(0)
// .closePath()
// .moveTo(80, 80)
// .lineTo(200, 80)
// .lineTo(200, 140)
// .lineTo(80, 140)
// .fill(0)
// .closePath()
// console.log(shape1)
// // var shape2 = shape1
// // .copy()
// // //.move(50, 100)
// // .fillRule("evenodd");
// // shape1.removeParent()
// }
// Create a new Rune.Font object
var f = new Rune.Font("khmer.ttf");
// load() will actually load the font file and call the function
// when the loading is done.
f.load(function(err) {
// r.rect(0, 0, r.width, r.height)
// .fill('hsv',255, 50, 100)
// polygon_num = 50;
// poly_stroke = 0;
// //layer 1
// for(var i = -10; i < r.width; i+= 200) {
// for(var s = -10; s <r.height; s += 200) {
// var p0 = r.polygon(i, s)
// .stroke('hsv',255, 50, 100)
// .strokeWidth(1)
// //.stroke(false)
// .fill('hsv', 190, 100, 100)
// for (var t = 0; t < polygon_num; t++) {
// p0.lineTo(Math.random() * 300, Math.random() * 300)
// }
// }
// }
for (var i = 0; i < r.height + 90; i += 15) {
words = r.text("Now, your question is my project and our house is full of clues. I’m reading old letters and turning over rocks. I burry my face in your sweaters. I study a photograph taken at the beach, the sun in our eyes, and the water behind us.", 0, i)
.fill(0)
.stroke(0)
.fontSize(15.5)
.fontFamily("Didot")
}
// if (words.x > 1600) {
// }
//
// Get a path of the text "Rune" from the font
// a x,y 200,200 and font size 120.
word_start_x = 180;
for (j = word_start_x ; j < word_start_x + 60; j +=10) {
var path = f.toPath("fade", j, r.height/1.3, 550)
//.lineTo(0, 0)
.fill(false)
.stroke(255)
.strokeWidth(45)
.strokeDash("2, 5")
.fill(false)
r.stage.add(path);
}
//path.moveTo(300, 300)
// We need to specifically add the new path to the stage,
// as is wasn't created via the r.path() function.
// for(i = 0; i < 3; i += 0.2) {
// var tragic = path
// .copy()
// .move(200*i, r.height/i)
// .fill(false)
// .stroke('hsv',100, 30, 100)
// }
var highlight = r.rect(0, 559, 440, 15)
.fill('hsv', 60, 100, 100)
.stroke(false)
highlight.state.fill
.clearer(0.65)
var highlight2 = r.rect(442, 93, 320, 15)
.fill('hsv', 60, 100, 100)
.stroke(false)
highlight2.state.fill
.clearer(0.65)
var highlight3 = r.rect(765, 515, 230, 15)
.fill('hsv', 60, 100, 100)
.stroke(false)
highlight3.state.fill
.clearer(0.65)
var highlight3 = r.rect(1000, 19, 595, 15)
.fill('hsv', 60, 100, 100)
.stroke(false)
highlight3.state.fill
.clearer(0.65)
//.copy()
// var h = r.path(80, 80)
// .lineTo(200, 80)
// .lineTo(200, 140)
// .lineTo(80, 140)
// var g = h
// .copy()
// .move(200,200)
// .fillRule("evenodd")
//path.removeParent();
// var polys = path.toPolygons({ spacing: 40 });
// // polys.forEach(function(p) {
// // p.removeParent();
// // });
// // loop through the points and change them a little bit
// for(var i = 0; i < polys.length; i++) {
// var poly = polys[i];
// //poly.move(0, 200, true);
// for(var j = 0; j < poly.state.vectors.length; j++) {
// var vec = poly.state.vectors[j];
// vec.x += Rune.random(-5, 5);
// vec.y += Rune.random(-3, 3);
// r.circle(poly.state.x + vec.x, poly.state.y + vec.y, 3, 3);
// }
//drawCircle();
//drawT();
//console.log(words)
r.draw();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment