Shapes And Color
Animation And Variables
Imported Media
No alt text
शब्द
फ़ॉन्ट लोड करें और टेक्स्ट बनाएं
No alt text
छवि डेटा कॉपी करें
एक छवि फ़ाइल से कैनवास पर पेंट करें।
No alt text
अल्फा मास्क
किसी अन्य छवि के एक भाग को काटने के लिए एक छवि का उपयोग करें
No alt text
छवि पारदर्शिता
कैनवास पर एक छवि को पारदर्शी बनाएं
No alt text
ऑडियो प्लेयर
किसी ऑडियो फ़ाइल के लिए एक प्लेयर बनाएं
No alt text
वीडियो प्लेयर
वीडियो फ़ाइल के लिए एक प्लेयर बनाएं
No alt text
वीडियो कैनवास
कैनवास पर एक वीडियो प्रदर्शित करें और उसे शैलीबद्ध करें
No alt text
विडियो रिकॉर्ड
कैमरे से लाइव वीडियो फ़ीड प्रदर्शित करें
Input Elements
Transformation
Calculating Values
Repetition
No alt text
रंग अंतर्वेशन
दो रंगों के बीच फीका पड़ना।
No alt text
रंग पहिया
रंग स्पेक्ट्रम का एक विज़ुअलाइज़ेशन बनाएं।
No alt text
बेज़ियर
वक्रों का एक सेट बनाएं.
No alt text
बहुरूपदर्शक
माउस से प्रतिबिम्बित डिज़ाइन बनाएं।
No alt text
शोर
पर्लिन शोर का उपयोग करके प्राकृतिक बनावट उत्पन्न करें।
No alt text
पुनरावर्ती वृक्ष
स्वयं कॉल करने वाले फ़ंक्शन का उपयोग करके एक वृक्ष बनाएं।
Listing Data with Arrays
Angles And Motion
Games
3D
Advanced Canvas Rendering
No alt text
ग्राफ़िक्स बनाएं
ऑफ-स्क्रीन इमेजरी बनाएं.
No alt text
एकाधिक कैनवस
पेज पर एकाधिक कैनवस डालने के लिए इंस्टेंस मोड का उपयोग करें।
No alt text
एक बनावट के रूप में शेडर (GLSL)
शेडर का उपयोग करके 3डी आकार के लिए एक बनावट तैयार करें।
No alt text
एक बनावट के रूप में शेडर (p5.strands)
शेडर का उपयोग करके 3डी आकार के लिए एक बनावट तैयार करें।
Classes And Objects
Loading And Saving Data
No alt text
स्थानीय भंडारण
डिवाइस पर ब्राउज़र से डेटा सहेजें.
No alt text
JSON
जावास्क्रिप्ट ऑब्जेक्ट नोटेशन में डेटा संग्रहीत करें।
No alt text
तालिका
डेटा को अल्पविराम से अलग किए गए मानों के रूप में संग्रहीत करें।
Three random images loaded and displayed on a canvas after using async/await and Promise.all.
Load Multiple Images with Promise.all
Load multiple files at the same time before drawing on canvas.
Math And Physics
No alt text
गैर-ऑर्थोगोनल प्रतिबिंब
एक झुकी हुई सतह पर उछलती हुई गेंद का अनुकरण करें।
No alt text
नरम शरीर
माउस की ओर तेजी से बढ़ते एक नरम शरीर की भौतिकी का अनुकरण करें।
No alt text
ताकतों
तरल के माध्यम से चलते समय कई पिंडों पर बलों का अनुकरण करें।
No alt text
धुएँ के कण
एक कण प्रणाली के साथ धुएं का अनुकरण करें।
No alt text
Game of Life
Recreate John Conway's cellular automaton.
No alt text
Mandelbrot Set
Visualize a mathematical set that produces fractal structures.
Shaders
No alt text
फ़िल्टर शेडर (p5.strands)
शेडर के साथ इमेजरी में हेरफेर करें।
No alt text
फ़िल्टर शेडर (GLSL)
शेडर के साथ इमेजरी में हेरफेर करें।
No alt text
शेडर के साथ स्थितियों को समायोजित करना (p5.strands)
आकार के शीर्षों को समायोजित करने के लिए शेडर का उपयोग करें।
No alt text
शेडर के साथ स्थितियों को समायोजित करना (GLSL)
आकार के शीर्षों को समायोजित करने के लिए शेडर का उपयोग करें।
No alt text
फ़्रेमबफ़र धुंधला
कैमरे के क्षेत्र की गहराई का अनुकरण करें।
A gradient from red to blue.
Gradient (p5.strands)
Draw a radial gradient between two points in p5.strands.
A dithered gradient from red to blue.
Dithered Gradient (p5.strands)
Draw a dithered radial gradient between two points in p5.strands.
A row of five orange spheres. The closest and farthest spheres from the camera appear blurred.
Depth Blur (p5.strands)
Simulate a camera's depth of field, with a shader written in p5.strands.
A city scene blurred around the edges of the frame
Variable Blur (p5.strands)
Create a blur shader with a different amount of blur at different parts of the canvas.
Sound
An image of sound waves rendered in p5.js.
Making a Beep
Creating tones with an Oscillator.
An image of sound waves rendered in p5.js.
Filtering Sound
Simulate the sound of waves and wind with white noise.
An image of sound waves rendered in p5.js.
Playing Melodies
Create melodic music using an array of pitch values.
An image of sound waves rendered in p5.js.
Echo Synth
Trigger a short sound with an echo effect.
An image of sound waves rendered in p5.js.
Sample Playback
Load a soundfile and change its properties.
An image of sound waves rendered in p5.js.
Measuring Amplitude (Visualization)
Analyze the amplitude of sound with p5.Amplitude.
An image of sound waves rendered in p5.js.
Visualizing Sound
Spectral analysis for audio-responsive animations.
An image of sound waves rendered in p5.js.
Connecting to ToneJS
Working with AudioContexts and cross-library synthesis.