diff --git a/p5-experiments/plottable008.html b/p5-experiments/plottable008.html index 799f7993..6e88792d 100644 --- a/p5-experiments/plottable008.html +++ b/p5-experiments/plottable008.html @@ -29,21 +29,35 @@ var righttmargin = 36 var topmargin = 45 var bottommargin = 48 - var cnv, svgbtn + var cnv, imgbtn function setup() { - cnv = createCanvas(w, h, SVG); + getsvg() + //getpng() centerCanvas(); colorMode(HSB, 360, 100, 100, 250); strokeCap(SQUARE) svgbtn = createButton("save svg"); placebtn(); svgbtn.mouseClicked(savesvg); - background(0, 0, 0) noFill() + background(0, 0, 0) noLoop() } + function getsvg(){ + cnv = createCanvas(w, h, SVG); + imgbtn = createButton("save svg"); + placebtn(); + imgbtn.mouseClicked(savesvg); + } + function getpng(){ + cnv = createCanvas(w, h); + imgbtn = createButton("save png"); + placebtn(); + imgbtn.mouseClicked(savepng); + } + function centerCanvas() { var x = (windowWidth - w) / 2; var y = (windowHeight - h) / 2; @@ -53,34 +67,23 @@ function placebtn() { var x = (windowWidth - w) / 2; var y = (windowHeight - h) / 2; - svgbtn.position(x - 200, y + h / 2 + 42) + imgbtn.position(x - 200, y + h / 2 + 42) } function savesvg() { - save("plottable006.svg"); + save("plottable008.svg"); } + function savepng() { + save("plottable008.png"); + } + var step = 100 var offset = 20 function draw() { + driftingtriangles() } - function testtriangles(){ - stroke(0, 0, 100); - for (var x = 0; x < w - step; x += step + offset) { - for (var y = 0; y < h - step; y += 2 * step + 4 * offset) { - triangle(x, y, x + step, y, x + step / 2, y + step) - triangle(x + step + offset / 2, y + offset, x + step + step / 2 + offset / 2, y + step + offset, x + step - step / 2 + offset / 2, y + step + offset) - } - } - stroke(0, 100, 100); - for (var x = step / 2; x < w - step; x += step) { - for (var y = step + 2 * offset; y < h - step; y += 2 * step) { - triangle(x, y, x + step, y, x + step / 2, y + step) - } - } - } - var gap = 100; var offset = 10; function driftingtriangles() {