Comments (3)
Your code is very hard to read but there are some things I have noticed:
- You don't need to use
window.onresize
, you can just usep5.windowResized
which is thep5
version and thus best to use for sketches - You repeatedly initialise your canvas in the
draw
loop, you should instead move the canvas initialisation and styling into thesetup
function - You are missing
p5.[something]
declarations within your code in places
As an example, I tidied some things up but your code is quite a mess in the draw
loop so I leave that up to you to fix as I really don't know what it's meant to do. Here are some of the fixes I made though for you to take away and work on:
export default function sketch(p5) {
let t = 0;
let canvas = null;
let w = window.innerWidth;
let h = window.innerHeight;
let x, y, d, T;
function centerCanvas(x, y) {
canvas.position(x, y);
}
function setDimensions() {
w = p5.windowWidth;
h = p5.windowHeight;
}
p5.setup = () => {
canvas = p5.createCanvas(p5.windowWidth, p5.windowHeight);
setDimensions();
centerCanvas(w / 2, h / 2);
t = 0;
}
p5.windowResized = () => {
p5.resizeCanvas(p5.windowWidth, p5.windowHeight);
setDimensions();
centerCanvas(w / 2, h / 2);
}
p5.draw = () => {
t += .01;
for (var j = 2; x = y = j--;) {
for (var i = w; d = p5.noise(t - i / 99) * 3, i--; x += Math.cos(d) * 6, y += Math.sin(d) * 6) {
j ? i - w / 2 || (T = p5.translate)(-x, -y) : p5.push() + T(x + w / 2, y + w / 2) + p5.rotate(d + Math.PI / 4) + p5.line(-600, 100, 600, 100) + p5.pop(i % 100 || p5.scale(80));
}
}
}
}
If you need further help, please tidy the code and be more specific by including line numbers and a description of what you have tried thusly. Hope this gave some insights for you though!
from react.
Hi James ,
I just solved , turns out your wrapper doesn't accept the + operator for a reason i ignore
Here is the snippet of the correct working code :
export default function sketch(p){
let t;
let canvas ;
let w = window.innerWidth;
let h = window.innerHeight;
let x ; let y ; let d ;
p.setup=()=>{
canvas =p.createCanvas(w-50, h-50);
canvas.style('display','block');
// put setup code here
t=0;
const x_center = (p.windowWidth - w) / 2;
const y_center = (p.windowHeight - h) / 2;
canvas.position(x_center, y_center);
}
p.draw = () => {
p.background(255);
t += .0008;
for (let j = 2; x = y = j--;){ // j >0
for (let i = w-200; d = p.noise(t - i / 99) * 3, i--; x += Math.cos(d) * 6, y += Math.sin(d) * 6, i>0){ // i >0
if (j){ i - w / 2 || (p.translate)(-x, -y) ;
}else{
p.push() ;
p.translate(x + w / 2, y + w / 2) ;
p.rotate (d + Math.PI / 4) ;
p.line(-600, 100, 600, 100) ;
p.pop(i % 100 || p.scale(80) +
p.text("Testing", Math.cos(i) * 12 - 7, Math.sin(i - t) * 1));
}
}
}
}
}
from react.
react-p5-wrapper
doesn't affect any operators, it is pure JavaScript. The code itself was the issue in that case. Either way I am glad you could resolve the issue, raise another ticket if you require further support 😄!
from react.
Related Issues (20)
- Duplicate canvas when running in vite dev HOT 5
- TypeError: p5.loadSound is not a function HOT 4
- P5-wrapper size HOT 5
- Stop rerender of p5 component when redux variables update HOT 3
- Latest commits not in the npm registry HOT 5
- Issue building with Vite 5 HOT 16
- npm ERR! Usage Error: This project is configured to use npm HOT 2
- windowResized() not firing HOT 4
- Error in nextjs HOT 7
- Change p5 dependency version to minimum 1.4.1 HOT 9
- Examples directory doesn't exist, link broken on README HOT 3
- Module parse failed: Identifier 'XX' has already been declared (7762:41) HOT 3
- Is this package supported in React Native? HOT 1
- How to access custom props using abstracted updateWithProps
- Custom updaters as props for use in abstracted methods
- Missing typings for `ReactP5WrapperGuard` in 5.0.0-rc.0 HOT 2
- npm package for version 4.4.1 is empty HOT 3
- It creates new canvas once state is changed HOT 4
- How can I use @P5-wrapper/react in react native HOT 1
- drawingContext is not definied HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react.