Vine
to generate a new and unique variation
Every variart piece is a small program. This is the one that drew what you're looking at.
var background = '#F3EEE3';
var stemColors = ['#A68C69', '#594433'];
var leafColors = ['#9BA657', '#7C8C3F', '#B5BF6E', '#5E6E34'];
var margin = 60;
var vines = intVariable('Vines', 2, 8);
var leafiness = intVariable('Leafiness', 4, 14);
s.rect(0, 0, width, height).attr({fill: background});
// A lens-shaped leaf lying along the x axis from the stem out to its tip,
// then turned to its angle.
function leaf(x, y, size, angle, color){
var w = size * 0.45;
s.path('M0,0 C' + size * 0.3 + ',' + -w + ' ' + size * 0.8 + ',' + -w + ' ' + size + ',0' +
' C' + size * 0.8 + ',' + w + ' ' + size * 0.3 + ',' + w + ' 0,0')
.attr({fill: color})
.transform('t' + x + ',' + y + 'r' + angle + ',0,0');
}
var spacing = (width - margin * 2) / vines;
for (var v = 0; v < vines; v++){
var baseX = margin + spacing * (v + 0.5);
var sway = Math.min(spacing / 4, 20);
var phase = getRandomArbitary(0, Math.PI * 2);
var waves = getRandomArbitary(1, 2.5);
var top = getRandomInt(margin, 160);
function stemX(y){
return baseX + Math.sin(phase + y / height * Math.PI * 2 * waves) * sway;
}
var d = 'M' + stemX(top) + ',' + top;
for (var y = top; y <= height - margin; y += 10){
d += ' L' + stemX(y) + ',' + y;
}
s.path(d).attr({fill: 'none', stroke: stemColors[v % 2], strokeWidth: 3, strokeLinecap: 'round'});
// Leaves alternate sides, smaller towards the growing tip at the top.
var count = Math.round(leafiness * (height - margin - top) / (height - margin * 2));
var maxSize = Math.min(spacing * 0.55, 60);
for (var i = 0; i < count; i++){
var ly = top + 10 + (height - margin - top - 20) * (i + getRandomArbitary(0.2, 0.8)) / count;
var side = i % 2 == 0 ? -1 : 1;
var size = maxSize * (0.5 + 0.5 * (ly - top) / (height - margin - top)) * getRandomArbitary(0.8, 1.1);
var angle = side == 1 ? getRandomInt(-50, -15) : getRandomInt(195, 230);
leaf(stemX(ly), ly, size, angle, leafColors[getRandomInt(0, leafColors.length - 1)]);
}
}
Copyright © 2014–2026 Logic and Matter. All rights reserved. Questions? Comments? hello@variart.io