Implement saveGif as a native p5 function
#5709
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,268 @@ | ||
| /* eslint-disable no-unused-vars */ | ||
|
|
||
| // let saving = false; | ||
| // function setup() { | ||
| // // put setup code here | ||
| // createCanvas(500, 500); | ||
| // } | ||
|
|
||
| // function draw() { | ||
| // // put drawing code here | ||
| // let hue = map(sin(frameCount), -1, 1, 127, 255); | ||
| // let hue_2 = map(sin(frameCount / 100) + 0.791, -1, 1, 127, 255); | ||
|
|
||
| // strokeWeight(0); | ||
| // line(width / 2, 0, width / 2, height); | ||
| // line(0, height / 2, width, height / 2); | ||
|
|
||
| // fill(250, 250, 20); | ||
| // rect(0, 0, width / 2, height / 2); | ||
|
|
||
| // // fill(80, 80, hue); | ||
| // rect(width / 2, 0, width / 2, height / 2); | ||
|
|
||
| // fill(20, 250, 250); | ||
| // rect(0, height / 2, width / 2, height / 2); | ||
|
|
||
| // // fill(240, 240, 0); | ||
| // rect(width / 2, height / 2, width / 2, height / 2); | ||
|
|
||
| // fill(30); | ||
| // stroke(20, 250, 20); | ||
| // strokeWeight(4); | ||
| // circle( | ||
| // 100 * sin(frameCount / 20) + width / 2, | ||
| // // 100 * sin(frameCount / 20) + height / 2, | ||
| // // width / 2, | ||
| // height / 2, | ||
| // 100 | ||
| // ); | ||
|
|
||
| // if (saving) { | ||
| // save('frame' + frameCount.toString()); | ||
| // } | ||
| // } | ||
|
|
||
| // function mousePressed() { | ||
| // if (mouseButton === RIGHT) { | ||
| // saveGif('mySketch', 1, 3); | ||
| // } | ||
| // } | ||
|
|
||
| // function keyPressed() { | ||
| // switch (key) { | ||
| // case 's': | ||
| // frameRate(3); | ||
| // frameCount = 0; | ||
| // saving = !saving; | ||
|
|
||
| // if (!saving) frameRate(60); | ||
| // break; | ||
| // } | ||
| // } | ||
|
|
||
| // / COMPLEX SKETCH | ||
| let offset; | ||
| let spacing; | ||
|
|
||
| function setup() { | ||
| // randomSeed(1312); | ||
|
|
||
| w = min(windowHeight, windowWidth); | ||
| createCanvas(w, w); | ||
| print(w); | ||
| looping = false; | ||
| saving = false; | ||
| noLoop(); | ||
|
|
||
| divisor = random(1.2, 3).toFixed(2); | ||
|
|
||
| frameWidth = w / divisor; | ||
| offset = (-frameWidth + w) / 2; | ||
|
|
||
| gen_num_total_squares = int(random(2, 20)); | ||
| spacing = frameWidth / gen_num_total_squares; | ||
|
|
||
| initHue = random(0, 360); | ||
| compColor = (initHue + 360 / random(1, 4)) % 360; | ||
|
|
||
| gen_stroke_weight = random(-100, 100); | ||
| gen_stroke_fade_speed = random(30, 150); | ||
| gen_shift_small_squares = random(0, 10); | ||
|
|
||
| gen_offset_small_sq_i = random(3, 10); | ||
| gen_offset_small_sq_j = random(3, 10); | ||
|
|
||
| gen_rotation_speed = random(30, 250); | ||
|
|
||
| gen_depth = random(5, 20); | ||
| gen_offset_i = random(1, 10); | ||
| gen_offset_j = random(1, 10); | ||
|
|
||
| gen_transparency = random(20, 255); | ||
|
|
||
| background(24); | ||
| // saveGif('mySketch', 2); | ||
| } | ||
|
|
||
| function draw() { | ||
| colorMode(HSB); | ||
| background(initHue, 80, 20, gen_transparency); | ||
| makeSquares(); | ||
| // addHandle(); | ||
|
|
||
| if (saving) save('grid' + frameCount + '.png'); | ||
| } | ||
|
|
||
| function makeSquares(depth = gen_depth) { | ||
| colorMode(HSB); | ||
| let count_i = 0; | ||
|
|
||
| for (let i = offset; i < w - offset; i += spacing) { | ||
| let count_j = 0; | ||
| count_i++; | ||
|
|
||
| if (count_i > gen_num_total_squares) break; | ||
|
|
||
| for (let j = offset; j < w - offset; j += spacing) { | ||
| count_j++; | ||
|
|
||
| if (count_j > gen_num_total_squares) break; | ||
|
|
||
| for (let n = 0; n < depth; n++) { | ||
| noFill(); | ||
|
|
||
| if (n === 0) { | ||
| stroke(initHue, 100, 100); | ||
| fill( | ||
| initHue, | ||
| 100, | ||
| 100, | ||
| map( | ||
| sin( | ||
| gen_stroke_weight * (i + j) + frameCount / gen_stroke_fade_speed | ||
| ), | ||
| -1, | ||
| 1, | ||
| 0, | ||
| 0.3 | ||
| ) | ||
| ); | ||
| } else { | ||
| stroke(compColor, map(n, 0, depth, 100, 0), 100); | ||
| fill( | ||
| compColor, | ||
| 100, | ||
| 100, | ||
| map( | ||
| cos( | ||
| gen_stroke_weight * (i + j) + frameCount / gen_stroke_fade_speed | ||
| ), | ||
| -1, | ||
| 1, | ||
| 0, | ||
| 0.3 | ||
| ) | ||
| ); | ||
| } | ||
|
|
||
| strokeWeight( | ||
| map( | ||
| sin( | ||
| gen_stroke_weight * (i + j) + frameCount / gen_stroke_fade_speed | ||
| ), | ||
| -1, | ||
| 1, | ||
| 0, | ||
| 1.5 | ||
| ) | ||
| ); | ||
|
|
||
| push(); | ||
| translate(i + spacing / 2, j + spacing / 2); | ||
|
|
||
| rotate( | ||
| i * gen_offset_i + | ||
| j * gen_offset_j + | ||
| frameCount / (gen_rotation_speed / (n + 1)) | ||
| ); | ||
|
|
||
| if (n % 2 !== 0) { | ||
| translate( | ||
| sin(frameCount / 50) * gen_shift_small_squares, | ||
| cos(frameCount / 50) * gen_shift_small_squares | ||
| ); | ||
| rotate(i * gen_offset_i + j * gen_offset_j + frameCount / 100); | ||
| } | ||
|
|
||
| if (n > 0) | ||
| rect( | ||
| -spacing / (gen_offset_small_sq_i + n), | ||
| -spacing / (gen_offset_small_sq_j + n), | ||
| spacing / (n + 1), | ||
| spacing / (n + 1) | ||
| ); | ||
| else rect(-spacing / 2, -spacing / 2, spacing, spacing); | ||
|
|
||
| pop(); | ||
| } | ||
| // strokeWeight(40); | ||
| // point(i, j); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| function addHandle() { | ||
| fill(40); | ||
| noStroke(); | ||
| textAlign(RIGHT, BOTTOM); | ||
| textFont(font); | ||
| textSize(20); | ||
| text('@jesi_rgb', w - 30, w - 30); | ||
| } | ||
|
|
||
| function mousePressed() { | ||
| if (mouseButton === LEFT) { | ||
| if (looping) { | ||
| noLoop(); | ||
| looping = false; | ||
| } else { | ||
| loop(); | ||
| looping = true; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| function keyPressed() { | ||
| console.log(key); | ||
| switch (key) { | ||
| // pressing the 's' key | ||
| case 's': | ||
| saveGif('mySketch', 2); | ||
| break; | ||
|
|
||
| // pressing the '0' key | ||
| case '0': | ||
| frameCount = 0; | ||
| loop(); | ||
| noLoop(); | ||
| break; | ||
|
|
||
| // pressing the ← key | ||
| case 'ArrowLeft': | ||
| frameCount >= 0 ? (frameCount -= 1) : (frameCount = 0); | ||
| noLoop(); | ||
| console.log(frameCount); | ||
| break; | ||
|
|
||
| // pressing the → key | ||
| case 'ArrowRights': | ||
| frameCount += 1; | ||
| noLoop(); | ||
| console.log(frameCount); | ||
| break; | ||
|
|
||
| default: | ||
| break; | ||
| } | ||
| } |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -67,6 +67,7 @@ | |
| "grunt-mocha-test": "^0.13.3", | ||
| "grunt-newer": "^1.1.0", | ||
| "grunt-simple-nyc": "^3.0.1", | ||
| "grunt-babel": "^8.0.0", | ||
|
There was a problem hiding this comment. here we already use a library called babelify, which is i believe capable of transpiling the ecma versions. why dont we take advantage of already setup tool like this instead adding grunt-bable as some new dependecy. There was a problem hiding this comment. Main problemTo understand the main problem, let me explicitly state it here. The current build pipeline takes all the code and runs
Babelify and optionsInside the const babelifyOpts = {
// add some options
plugins: ['static-fs']
};which lets us modify the behaviour of We can pass in more options to change the behaviour: const babelifyOpts = {
// add some options
plugins: ['static-fs'],
presets: ['@babel/preset-env'],
global: true,
};This uses the No solution foundAfter playing with every combination, some problem arises.
Running "mochaChrome:yui" (mochaChrome) task
p5.js translator called before translations were loaded
p5.js translator called before translations were loaded
[stuck here forever]
Fatal error: /Users/jesi/repositorios/p5.js/node_modules/opentype.js/dist/opentype.js: Not able to statically evaluate the expression(s) for babel-plugin-static-fs.
Try changing your source code to something that can be evaluated at build-time, e.g.
const src = fs.readFileSync(__dirname + '/foo.txt', 'utf8');
while parsing file: /Users/jesi/repositorios/p5.js/node_modules/opentype.js/dist/opentype.jsMy initial solutionInitially, I simply included the For what it's worth, the If this is not enough to justify the |
||
| "html-entities": "^1.3.1", | ||
| "husky": "^4.2.3", | ||
| "i18next": "^19.0.2", | ||
|
|
@@ -85,7 +86,8 @@ | |
| "regenerator-runtime": "^0.13.3", | ||
| "request": "^2.88.0", | ||
| "simple-git": "^3.3.0", | ||
| "whatwg-fetch": "^2.0.4", | ||
| "gifenc": "^1.0.3" | ||
| }, | ||
| "license": "LGPL-2.1", | ||
| "main": "./lib/p5.min.js", | ||
|
|
@@ -154,7 +156,6 @@ | |
| "not dead" | ||
| ], | ||
| "author": "", | ||
| "husky": { | ||
| "hooks": { | ||
| "pre-commit": "lint-staged" | ||
|
|
||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
i came across babelify, which seems to be compatible with existing bundler technology browserify.
We need a good walkthrough why we are not using babelify and instead simply using babel directly.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
So sorry! Missed that one. I'll check if babelify works and remove babel!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
After an extensive session of researching how to make babelify transpile the ES6 code to ES5, I could not get it to work. I don't know if I am doing something wrong.
With the
grunt-babelpackage, thegruntcommand runs no problem. Without it, the uglify module spits out a problem saying "Unexpected token: '>'", which comes from the fact that there are some arrow functions in the code that should, by that point, been already transpiled to ES5 (no arrow functions). Either we can see how to make it work (I am probably missing something) or leave this as is, as it is a well-known, maintained package.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
taking jesus solution as of now and moving ahead...