p5.js

Creating a P5.js 2-Dimensional Array

由 非 Y 不嫁゛ 提交于 2019-12-10 12:04:24
问题 I'm trying to port my working processing sketch to p5.js so I can use it online. But I'm running into a problem when trying to set the values in a 2 dimensional array. I think I'm following the correct syntax shown in the 2d array section of the API, but am getting an uncaught type error that says "cannot set property 0 of undefined". The sketch is pretty simple, I'm just trying to read from a CSV and store the data in a 2D array: var cols = 8; var rows = 8; var month = 1; var values = [];

Send FormData through Ajax POST method return 403

由 心已入冬 提交于 2019-12-10 11:58:26
问题 I write an application with speech recognition. All I want is to record some speech and send it to server where I will convert it into text. And I have a problem with sending that sound file. I record voice using p5.js library and when I try to download it there is no problem. The problem is when I try to send it to server using ajax. script.js function toggleRecording(e) { if (e.classList.contains("recording")) { recorder.stop(); e.classList.remove("recording"); sendAudioToServer(soundFile)

Angular and p5.js - p5.loadSound is not a function

由 。_饼干妹妹 提交于 2019-12-10 10:32:00
问题 I have a problem when want to use p5.js in my Angular project. I use Angular CLI. Include p5.js in my .angular-cli.json file: "scripts": [ "../node_modules/p5/lib/p5.min.js", "../node_modules/p5/lib/addons/p5.sound.js", "../node_modules/p5/lib/addons/p5.dom.js" ], Then in my component I write: import { Component, OnInit } from '@angular/core'; import * as p5 from 'p5'; @Component({ selector: 'app-player', templateUrl: './player.component.html', styleUrls: ['./player.component.scss'] }) export

P5 with react at 60 FPS

由 孤者浪人 提交于 2019-12-08 11:09:21
问题 To get P5 to work with React, I am using the P5Wrapper import. I got a simple starfield animation to work on my tile, but the performance is an issue. The animation slows to a crawl at 512 "star" objects, so I scaled it back to 128. However, even at 128, the FPS seems much too low, averaging below 30 FPS. I am looking for ways to speed up P5's performance in React so that the animations can run closer to 60 FPS. P5 code: function sketch (p) { const star = () => { const x = p.random(-TILE_SIZE

Cannot use p5.js in typeScript and Webpack

由 不问归期 提交于 2019-12-08 02:02:04
问题 I have a project for a library using p5.js. Details My Webpack config is: const path = require('path'); module.exports = { entry: './start.ts', output: { filename: 'start.js', path: path.resolve(__dirname, 'out'), libraryTarget: "var", library: "at", }, resolve: { extensions: ['.ts', '.tsx', '.js', '.jsx'] }, module: { rules: [ { test: /\.ts$/, loader: "awesome-typescript-loader" } ] } }; My package.json is: { ..., "scripts": { "build": "./node_modules/.bin/webpack --config webpack.config.js"

Angular and p5.js - p5.loadSound is not a function

由 牧云@^-^@ 提交于 2019-12-06 11:43:53
I have a problem when want to use p5.js in my Angular project. I use Angular CLI. Include p5.js in my .angular-cli.json file: "scripts": [ "../node_modules/p5/lib/p5.min.js", "../node_modules/p5/lib/addons/p5.sound.js", "../node_modules/p5/lib/addons/p5.dom.js" ], Then in my component I write: import { Component, OnInit } from '@angular/core'; import * as p5 from 'p5'; @Component({ selector: 'app-player', templateUrl: './player.component.html', styleUrls: ['./player.component.scss'] }) export class PlayerComponent implements OnInit { play: boolean = false; constructor() { } ngOnInit() { const

Zoom in/out at mouse position in canvas

由 南笙酒味 提交于 2019-12-06 07:54:04
I'm trying to implement zoom feature using p5.js. Current zoom level and x and y positions are stored in controls.view object. Default or (0, 0) position is at top left corner. Problem is to adjust x and y position values on zoom in/out so that no matter what the current position of the view is, it will stay at point of zoom or mouse cursor. Scaling and translating is executed in draw function by x, y and zoom values so those values must be modified directly (can't run translate on canvas directly). Here is Codepen . let canvas, circles; const controls = { view: { x: 0, y: 0, zoom: 1 },

Cannot use p5.js in typeScript and Webpack

由 北城余情 提交于 2019-12-06 06:21:29
I have a project for a library using p5.js . Details My Webpack config is: const path = require('path'); module.exports = { entry: './start.ts', output: { filename: 'start.js', path: path.resolve(__dirname, 'out'), libraryTarget: "var", library: "at", }, resolve: { extensions: ['.ts', '.tsx', '.js', '.jsx'] }, module: { rules: [ { test: /\.ts$/, loader: "awesome-typescript-loader" } ] } }; My package.json is: { ..., "scripts": { "build": "./node_modules/.bin/webpack --config webpack.config.js" }, "devDependencies": { "awesome-typescript-loader": "5.0.0", "typescript": "2.8.3", "webpack": "4.9

Exporting a video in p5.js

由 笑着哭i 提交于 2019-12-05 01:49:53
问题 I am creating a simple animation program in p5.js. When a user clicks the save button, I want to download a video of the animation. I have an object called frames where each key is labelled frame_1 , frame_2 and so on. The value associated with each key is an array of line segments that makes up that frame. I am trying to think of an approach to take this data and create an mp4 video. p5.js has a built in save function that I thought might be helpful but it is not a full solution on its own.

Slow performance, using p5 in react

由 别来无恙 提交于 2019-12-05 00:50:15
I am trying to use p5 ( https://p5js.org/ ) in a react application and the performance of some sketches is really bad (same in development as after building the app). I'm using create-react-app for the project scaffold, without any changes to the build setup. The sketches run around 50-60fps when running them directly in the browser, but when loaded into react they drops to about 1-2fps. I am connecting the sketches with react like this: // React Component to interface the sketches class P5Wrapper extends React.Component { componentDidMount() { const { sketch, ...rest } = this.props; this
订阅 p5.js