openprocessing.org Open in urlscan Pro
188.114.96.3  Public Scan

Form analysis
1 forms found in the DOM

POST //preview.openprocessing.org/sketch/preview?random=0.032506194331607174

<form id="sketchForm" target="sketchIframe1217113" action="//preview.openprocessing.org/sketch/preview?random=0.032506194331607174" method="POST"><input id="sketchConfig" type="hidden" name="config"
    value="{&quot;codeObjects&quot;:[{&quot;title&quot;:null,&quot;codeID&quot;:null,&quot;code&quot;:&quot;\nlet particles = []\nlet colors = \&quot;FDCA40-f7b2b7-f7717d-de639a-7f2982-16001e-fcfcfc-f7567c-fffae3-88e1d9-5d576b\&quot;.split(\&quot;-\&quot;).map(a=>\&quot;#\&quot;+a)\n// let colors = \&quot;fff-fff-2176ff-33a1fd-fdca40-f79824-f72585-7209b7-3a0ca3-4361ee-4cc9f0\&quot;.split(\&quot;-\&quot;).map(a=>\&quot;#\&quot;+a)\nlet mainGraphics\nlet canvasTexture \n\nfunction preload(){\n\tcanvasTexture = loadImage(\&quot;canvas.jpg\&quot;);\n}\nfunction setup() {\n\tcolors=colors.concat(colors).concat(['#2176FF'])\n\tcreateCanvas(windowWidth,windowHeight);\n\tmainGraphics = createGraphics(width,height)\n\tbackground(255);\n\tpixelDensity(2)\n\tfill(255)\n\trect(0,0,width,height)\n\tmainGraphics.noStroke()\n\tlet gridSpan = random(50,66)\n\tfor(var x=0;x<=width;x+=gridSpan){\n\t\tfor(var y=0;y<=height;y+=gridSpan){\n\t\t\tparticles.push(new Particle({\n\t\t\t\tp: createVector(x,y),\n\t\t\t\tcolor: random(colors),\n\t\t\t\tr: random([1,5,5,10,10,20,40,40,80]),\n\t\t\t\ttargetColor: random(colors)\n\t\t\t}))\n\t\t}\n\t}\n}\n\nfunction draw() {\n\tparticles.forEach(p=>{\n\t\tp.update()\n\t\tp.draw(mainGraphics)\n\t})\n\tparticles = particles.filter(p=>p.r>0.001)\n\timage(canvasTexture,0,0)\n\timage(canvasTexture,1920,0)\n\tpush()\n\t\tblendMode(MULTIPLY)\n\t\timage(mainGraphics,0,0)\n\tpop()\n\t// ellipse(mouseX, mouseY, 20, 20);\n}\nclass Particle{\n\tconstructor(args){\n\t\tlet def = {\n\t\t\tp: createVector(0,0),\n\t\t\tv: createVector(random([-1,0,1]),random([-1,1])),\n\t\t\ta: createVector(0,0),\n\t\t\tr: 30,\n\t\t\tsinDiv: random(30,80),\n\t\t\trandomId: int(random(50000)),\n\t\t\tcolor: color('white'),\n\t\t\ttargetColor: color('white')\n\t\t}\n\t\tObject.assign(def,args)\n\t\tObject.assign(this,def)\n\t}\n\tdraw(mainGraphics){\n\t\tmainGraphics.push()\n\t\t\tmainGraphics.translate(this.p)\n\t\t\tmainGraphics.fill(this.color)\n\t\t\tmainGraphics.ellipse(0,0,this.r,this.r)\n\t\t\tif (random()<0.99){\n\t\t\t\tmainGraphics.circle(random(-0.92,0.92)*this.r,random(-0.92,0.92)*this.r,this.r/8)\n\t\t\t}\n\t\tmainGraphics.pop()\n\t}\n\tupdate(){\n\t\tthis.p.add(this.v)\n\t\tthis.v.add(this.a)\n\t\tthis.v.mult(0.9995)\n\t\tthis.v.x+=sin(this.p.x/(100+this.randomId%5))/this.sinDiv\n\t\tthis.r*=0.99\n\t\tif ((frameCount+this.randomId) % 500==0){\n\t\t\tthis.targetColor = random(colors)\n\t\t}\n\t\tthis.color = lerpColor(color(this.color),color(this.targetColor),0.02)\n\t\n\t}\n}&quot;}],&quot;visualID&quot;:&quot;1217113&quot;,&quot;isPjs&quot;:&quot;2&quot;,&quot;giveFocus&quot;:false,&quot;fileBase&quot;:&quot;https://openprocessing-usercontent.s3.amazonaws.com/files/user139364/visual1217113/h21b271e03d641558856c9d9d738a1b8d/&quot;,&quot;engineUrl&quot;:&quot;https://cdn.jsdelivr.net/npm/p5@v1.3.1/lib/p5.js&quot;,&quot;libraryBase&quot;:&quot;https://openprocessing.org/&quot;,&quot;hasFrameBorder&quot;:false,&quot;preventScrollbars&quot;:false,&quot;libraries&quot;:[]}">
</form>

Text Content

COOKIES ON OPENPROCESSING

We use a few cookies to analyze user experience and ensure our website works
well.

I Accept CookiesI Do Not Accept CookiesSettings


OPENPROCESSING

 * Create a Sketch
 * 
     My Profile
 * 
 * Search
 * Discover
 * Learn
 * Teach
 * 
 * Sign in
   
 * Create a Sketch




CODING IS


BEAUTIFUL

Join the community of creative coders, educators, and designers that explore,
experiment, and play.

Join Sign in

210612 Chaos Dancer by Che-Yu Wu


CONNECT AND INSPIRE

Join thousands of creative coders, follow their work, create your own forks, and
find your inspiration for your next coding challenge.

Explore sketches


NO HASSLE CODING

Code away your ideas live with p5js, enable common libraries and templates with
a click, and share your portfolio with the community.

Create a sketch


TEACH AND LEARN

Teachers exclusive: With our intuitive class platform, collaborate live with
students, give assignments, collect projects, provide feedback, and more.

Check out our class platform


SKETCHES THAT ARE
'D THIS WEEK

 * Rainbow Chladni patternsby jcponcemath
   
   000Pinned
   
   
   
   

 * rammerheadby Ethan
   
   000Pinned
   
   
   
   

 * Fall.ioby The_Underated_Coder
   
   000Pinned
   
   
   
   

 * Map Makerby Naoki Tsutae
   
   000Pinned
   
   
   
   

 * 2048 tile generatorby Shards
   
   000Pinned
   
   
   
   

 * Chladni Platesby Ivan Rudnicki
   
   000Pinned
   
   
   
   

 * shader experiment 005by Juhani Halkomäki
   
   000Pinned
   
   
   
   

 * Doo-doo-doodlesby Rubén Medellín <chubas>
   
   000Pinned
   
   
   
   

 * Rhombic Dodecahedraby Ivan Rudnicki
   
   000Pinned
   
   
   
   

 * Walkerby Rubén Medellín <chubas>
   
   000Pinned
   
   
   
   

See all

Triangle1.5 by Killeroo

Nodes that have their own behaviors. They may push or pull each other, connect,
kill or give birth, based on position, color, and who knows.

Define these set of rules and press Play to watch these particles live their
fascinating yet random lives.


PARTICLE SYSTEMS

Create a sketch

See examples

 * Eclipse 蝕by TKt | 陳建中 Tân Kiàn-tiong（rainsr7235）
   
   000Pinned
   
   
   
   

 * Wobbly Swarmby Konstantin Makhmutov
   
   000Pinned
   
   
   
   

 * Pallasby Roys
   
   000Pinned
   
   
   
   

 * Sandbox (WIP)by Grayson
   
   000Pinned
   
   
   
   

 * 200704 Frozen Brid Brushby Che-Yu Wu
   
   000Pinned
   
   
   
   

 * Particlesby Dave Darch
   
   000Pinned
   
   
   
   

Take a data point, assign it to a color or size of a shape. Position it on the
canvas based on its relation to another data point.

When all is said and done, let the visualizations reveal the hidden patterns and
tell the story behind the data.


DATA VISUALIZATION

Create a sketch

See examples



Duel (a shooter game) by FAL


GAMES

Create characters, define game dynamics, and you got yourself a sketch with
villain square taking revenge while shooting lasers with unlimited life.

Creating games is one of the most fun ways to explore object oriented
programming and multi-user interactions on the same canvas.

 * Duel (a shooter game)by FAL
   
   000Pinned
   
   
   
   

 * Space huggersby FrankForce
   
   000Pinned
   
   
   
   

 * Suika Gameby Charmonder
   
   000Pinned
   
   
   
   

 * I hate watermelonby Grayson
   
   000Pinned
   
   
   
   

 * Space huggers 2.0by Jacob
   
   000Pinned
   
   
   
   

 * (ALPHA) Arras.io BOSS RUSH!by blaster003
   
   000Pinned
   
   
   
   

Create a sketch

See examples

Confetti3 by Killeroo


BRUSHES

What happens when mouse cursor moves, or you wave your hand to the camera?

These sketches experiment with digital painting ideas that uses custom brushes
instead of putting paint on canvas.

Create a sketch

See examples

 * abstract01jsby Marius Watz
   
   000Pinned
   
   
   
   

 * p0629a_2013_wormsby Raven Kwok
   
   000Pinned
   
   
   
   

 * Noise Turbulence Doodlesby Raven Kwok
   
   000Pinned
   
   
   
   

 * Primary Spiralsby James Coviello
   
   000Pinned
   
   
   
   
 * Fork
   
   VapoMotionby A5
   
   000Pinned
   
   
   
   


CREATE. FULL STEAM AHEAD.

Join the community of 100,000 creative coders to create open source projects,
inspire and collaborate.

 * Create unlimited open source sketches
 * Code away your ideas in seconds with p5js
 * Enable libraries with a single click
 * Undo mistakes with version history
 * Build a portfolio to showcase your work
 * Embed sketches in blogs, websites
 * Save animated GIFs
 * Connect with other creative coders to get inspired and learn

Join for Free

Sign in if you joined already


CREATIVE CODER PLUS+

Take your sketches to the next level with premium features and privacy.

 * Unlimited public or private sketches
 * Advanced embedding options
 * Upload more files with increased 1GB limit (standard 25 MB).
 * Use any external javascript library in your sketch
 * Ad-free experience as you explore OpenProcessing
 * No ads displayed on your portfolio and sketches
 * Priority live support from Sinan

Learn More

Subscribe for $39.99 annually

or $3.99 monthly




PROFESSOR PLUS+

Use Classroom Platform to invite students and teach coding in class!

 * Organize sketches, create challenges and give assignments with collections
 * Keep sketches and class activity private/class only
 * Hide source code to create challenging assignments
 * Add javascript libraries to expand their knowledge
 * Free Creative Coder Plus+ Membership for all your students
 * Close your class easily for a new semester
 * Get priority live support from Sinan

Learn More



--------------------------------------------------------------------------------

ARTICLE: TEACHING CODING WITH OPENPROCESSING

A quick walkthrough of the exciting world of code, creativity, education, bugs,
and Kandinsky.

View article

--------------------------------------------------------------------------------

ARTICLE: CREATING COLLABORATIVE SKETCHES WITH SOCKET.IO

Learn how to use OpenProcessing socket server to create a live sketch that
responds to visitors.

View article

--------------------------------------------------------------------------------

FOLLOW US ON TWITTER

Our official communication channel: Any news on OpenProcessing is first on
@openprocessing

Follow @openprocessing

CREATED WITH IN NYC

Contact

Follow

Status

CREATIVE CODING

Discover

Learn with Tutorials

Join OpenProcessing - Sign in

Create a Sketch

TEACHING

Teaching with OpenProcessing

View Active Classes

Pricing

Create a Class

LEGAL

Community Guidelines

Credits

Terms of Service - Privacy Policy

Subprocessors - Cookie Policy

OK
OK
Any questions? Reach out via email.
OK
File URL {{filePath}}
Dimensions

{{width}} x {{height}}

Cancel Submit