Howdy, Stranger!
We are about to switch to a new forum software. Until then we have removed the registration on this forum.
Categories
- All Categories 25.7K
- Announcements & Guidelines 13
- Common Questions 30
- Using Processing 22.1K
- Programming Questions 12.2K
- Questions about Code 6.4K
- How To... 4.2K
- Hello Processing 72
- GLSL / Shaders 292
- Library Questions 4K
- Hardware, Integration & Other Languages 2.7K
- Kinect 668
- Arduino 1K
- Raspberry PI 188
- Questions about Modes 2K
- Android Mode 1.3K
- JavaScript Mode 413
- Python Mode 205
- Questions about Tools 100
- Espanol 5
- Developing Processing 548
- Create & Announce Libraries 211
- Create & Announce Modes 19
- Create & Announce Tools 29
- Summer of Code 2018 93
- Rails Girls Summer of Code 2017 3
- Summer of Code 2017 49
- Summer of Code 2016 4
- Summer of Code 2015 40
- Summer of Code 2014 22
- p5.js 1.6K
- p5.js Programming Questions 947
- p5.js Library Questions 315
- p5.js Development Questions 31
- General 1.4K
- Events & Opportunities 288
- General Discussion 365
In this Discussion
- Ater February 2016
- BarbaraAlmeida February 2016
- GoToLoop February 2016
Can a sketch (or multiple sketches) be embedded in an existing web page?
I have some existing web pages that would be enhanced by the addition of a sketch or two if it were possible. But, in all the examples that I've seen, the sketch appears to replace the entire body of the web page. Is there a way to just put a sketch in a div?
Tagged:
Answers
You need to use an "instance mode", then, you can parent canvas to an existing div.
@Ater, we don't need "instance mode" in order to parent() the
<canvas>created by createCanvas().It works for both modes. >-)
However for more than 1 sketch, the others needs to use the "instance mode" approach.
Or at least put each 1 into an
<iframe>. 8-XThis length thread below shows both approaches. Worth checking out: :D
https://forum.Processing.org/two/discussion/14798/how-to-split-a-p5-js-sketch-into-multiple-files
https://github.com/processing/p5.js/wiki/Embedding-p5.js