two-ticks / p5.teach.js Goto Github PK
View Code? Open in Web Editor NEWA beginner friendly math animation library for p5.js
Home Page: https://two-ticks.github.io/p5.teach.js/
A beginner friendly math animation library for p5.js
Home Page: https://two-ticks.github.io/p5.teach.js/
pull request #20
GObject can deal with 2D, polar and parametric plots, but lacks primary shapes such as lines, rectangles and ellipses. p5.js shapes are difficult to animate and would be slow. SVGs can be easily animated.
What should be the syntax to add rectangle, circle, lines and arrows to graphs (or outside the graph) ?
Do we even need SVG shapes?
Example APIs :
graph.rect(x, y, width, height) //this would work but how to remove this object or reference it
Currently p5.teach
doesn't support p5 instance mode. How can we go forward to add support p5 instance mode?
I tried this but it is not working.
p5.prototype.creatText = function createText(...args: any[])
What changes to environment should I make ?
branch : develop-instance
Which syntax we should use to call the animation
functions?
We can avoid creating many functions for animations by implementing text animations in some what similar manner to manim
let text1 = addText(text, x, y); // adds text to the scene (not visible on screen)
text1.play(fadeOut, 1); // play(‘animation-type’, duration)
In the proposal we have following (web-editor example writing)
fadeOut(object, duration) //every animation having unique function
manim has following syntax
self.play(FadeOut(first_line)) #fadeOut animation
self.wait(1)
@two-ticks I'm trying to use IBM's color blind safe palette for visualizations in my book whenever possible and find myself copying the hex colors to new sketches a lot. What do you think about exporting the following constants?
export const ULTRAMARINE40 = '#648fff';
export const MAGENTA50 = '#dc267f';
export const GOLD20 = '#ffb000';
export const INDIGO50 = '#785ef0';
export const ORANGE40 = '#fe6100';
A function that accepts the same parameters as line and draws an arrow is very useful. In math and physics, there are a lot of places where this can come handy.
arrow(x1, y1, x2, y2) will be the function
I think we should make it simple to generate nice plots. @two-ticks just created a SVG grapher, @JithinKS97 previously wrote p5.2DGraph, and I tried to distill mainim's 2D and 3D primitives when I started planning p5.plot.
A few questions come to mind:
Personally, I've wanted to implement the grammar of graphics for p5.js for awhile now but haven't had the occasion. Here is an introductory chapter for visualizing data in R with ggplot2.
I want to test whether add
method is called or not. I have tried these ways but all are giving the same error.
it('add should be called', () => {
const tex = createTeX('2^2');
const spy = jest.spyOn(tex, 'add');
tex.add();
expect(spy).toHaveBeenCalled();
//expect(tex.position()).toEqual([10, 20]);
});
it('add should be called', () => {
const tex = createTeX('2^2');
const element = createDiv();
global.createDiv = function(html){return element}
const spy = jest.spyOn(tex, 'add');
tex.add();
expect(spy).toHaveBeenCalled();
//expect(tex.position()).toEqual([10, 20]);
});
other working tests in commit : 0ed4891
The broken logo "assets/p5-astrik-teach.png" is visible on the docs page:
https://two-ticks.github.io/p5.teach.js/docs/index.html
and the bad link line is here:
https://github.com/two-ticks/p5.teach.js/blob/main/docs/index.html#L64
We can use event triggers for scenes. For example this sketch uses space bar for scene switching https://editor.p5js.org/radium.scientist/sketches/g7oDq0M87
time
for long scenes where event triggering can be tediouswe can decide how to implement scenes
and how to add individual animations
to the scene
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.