Flocking! It's quite elegant. There are three forces involved.

• Cohesion: I'll stick with you guys!

• Alignment: let's go in the same direction!

• Separation: don't get too close!

Weight those correctly and you've got a school, a flock, a herd, or...a cycling race. Here's a simulation in the browser with code!

Programming is fun. You get to play with things like Fourier transforms, moving objects around in 3d space, solving Project Euler problems and stuff like that. Have a tinker with Processing, maybe with Python, checkout PE (it's lots of fun and I imagine right up your alley) and see what else catches your interest (3d animation/games? Siteswap simulators? Oldschool demoscene stuff like cellular automata, particle systems and plasmas? Foundational compsci stuff like finite automata simulators? Educational demos?) ... you may just get hooked :-).

Also, with your background and interest you'd probably have a ball tutoring kids or doing special presentations that take math into the physical world ... maybe workshops where you can take a class outside and get them to physically enact mathematical principles. I'm afraid I don't have any concrete suggestions for this, but others might - maybe something to keep in mind. Since you already have contact with schools for your existing programs you should find it pretty easy to open these doors - they'll love anything that's well presented and gets kids excited about math in creative ways.

Thanks! I'll check it out. I've been using Processing.js so far (e.g. like this), it's about as good as it gets int the browser world ;)

However, there are several drawbacks for using Javascript for algorithm visualization:

• JS has to rely on a browser, and neither performance nor the final look are consistent across browsers;

• animating large number of objects is still slow on consumer hardware;

• a lot of programmers don't know Javascript, but know Java or a similar procedural language (e.g. C#, or heck, even C++ is closer to Java than it is to JS). This is advantageous for both the person implementing/visualizing the algorithm (who likely does not have to deal with web-stuff often), and the audience (who might want to take a peek at the source code).

• No file I/O on client machine that I am aware of, so you can't load/save files;

• Visualization through Javascript is a relatively new phenomenon, which is just now getting more or less mature with the efforts of projects like Raphael and Processing. A lot of the algorithm visualizations have been made before 2009.

• JS is still limited in that it lacks 3D. When WebGL goes live, we'll be in a different place. Today, you have to resort to either implementing your own 3D rendering (which is annoying, and the result is slow).

To that end, take a look at the visualization I linked to above. Hit space bar. Now this can be done in Javascript with much effort, whereas it took me very little to implement it as a Java applet.

The upside of JS is, of course, that every browser out there already renders it. However, I'm still waiting for the downsides to go away.

If you're already familiar with the Processing language/environment/framework, you might also want to check out ProcessingJS.

The difference between the two is that p5.js is native JavaScript, while ProcessingJS is traditional Processing/Java that gets transpiled to JS on the fly. So, if you already have some Processing code and you want to display it on your site, you can just install ProcessingJS (or pull it in from the CDN) and pop the path to your .pde file into an HTML5 canvas element and you're done.

If you're more comfortable with JS than with Java, however, p5.js might be the tool for you. Either way, Processing makes programming animations very easy and fun.

~~It's worth noting that ProcessingJS comes directly from the Processing devs, while p5.js is a third-party port of Processing into JS. Both projects are popular and well-supported, though.~~

EDIT: See /u/davebee's comment below

p5.js and more generally, Processing is really great for making interactive web-art and data visualizations. Really versatile and not too difficult to utilize.

A bit less VR/AR-focused, but it's probably more practical for most web developers than three.js. You can make some really great visualizations in p5, I'm surprised I don't see it used more on /r/dataisbeautiful.

To be honest, I think you'll be better off not using flash (it's a dead thing in 2017), and since it's a simple task, you should be better off using some JavaScript library for that.

Have a look at processingjs, you should be able to do what you want in an afternoon:

http://processingjs.org/learning/

This, my friend, is about as far as you can get from jQuery and still be writing JS in the browser.

If you really want to get your feet wet with this type of stuff, a good place to start is to learn C and then OpenGL. If you're too squeamish to go down that road, start off with a JS framework like Processing, three.js or Raphael, they're all well documented and can be a good quick start to learning about graphics rendering.

First I have to say that I'm not sure about this but I assume that the Khan Academy tutorial is wrapping the code in all sorts of things so it's easier for beginners.

If you look at http://processingjs.org/learning/ you can see that you need a canvas and some setup code to initialize it. All of that is missing from your JSFiddle.

If you do choose to dive into html5, you might look at http://processingjs.org/ which is a JavaScript library that makes some of the html5 stuff a little less cryptic. I haven't learned tons about either yet, but I remember being impressed by how much Processing JS simplified certain tasks.

So you would like to show a thumbnail (~700px) and when the image is clicked, redirect/download the full image? As a CDN solution, Cloudinary is the best, it does imagine manipulation, resizes, etc. On your server, as a PHP solution you could use PHP Imagick, afaik it does resizes too. For JavaScript you could take a look on (Processing.js)[http://processingjs.org/reference/PImage_resize_/] - it may fit your needs.

Unfortunately I can't provide any screenshots or source code, but I wrote something a bit like that a few jobs ago using Processing. A script would poll Nagios to get perf data, then send it over UDP to the Processing process. It looked seriously awesome (think Wargames).

http://processingjs.org/ and http://processing.org/

Khan academy works by making a lot of processing.js available in global functions, so you don't learn about namespaces right away.

They should really have a tutorial on weaning yourself off it.

To easily port your program, just continue using processing for now, read up on it here; http://processingjs.org

There are several ways to draw in a browser, and often you'll use a library like processing to provide convenient methods to do what you want.

I say use what's working for now, and then branch out when you start hitting limits of that library.

If you're looking to make games for the web, think about starting in JavaScript. There's quite a few game engine/frameworks out there for JavaScript, but you'd likely spend the majority of your time learning the basics. Processing (http://processingjs.org/) is a nice library for drawing without having to mess with the raw Canvas API, though it isn't strictly for developing games.

Edit: I only mentioned Javascript because you have a Chromebook. Going the Ubuntu route, you are free to try developing for the desktop user through the myriad of game engines and frameworks out there.

I mostly agree with /u/RitzBitzN, but if you dive right in with data structures and algorithms, you're probably going to get bored pretty quickly. Theory should be matched with practice.

I think it's best to learn programming in some environment where you can experiment and quickly see results. I don't know if this is good advice, but I suggest Processing as a decent place to get started. There's a nice book on the subject, and there's even a port to Javascript .

I got my start on a Commodore 64, taking the sample code that came in the manual (to draw simple graphics and animations) and tweaking them. Processing reminds me a lot of that. Sure, the particulars are different, but I think it encourages the same sort of "play" that is so important when learning to program.

Long story short:

you should type in the video so that you can follow along in the environment they set up.

Medium story:

You can download the processing language IDE from here, which will let you run the code they are teaching you in the tutorial:

https://processing.org/

Long story:

That tutorial uses JavaScript, and specifically the processing library inside JavaScript (think of the library as an extension of the language, that you usually need to install separately).

For example, when you type “ellipse()” you’re actually using this function here:

http://processingjs.org/reference/ellipse_/

JavaScript is the language used in your web browser, so it can run on any computer that has a web browser.

As with any language, you need something to write the code (sublime is an excellent choice) but you also need something to interpret (this is a simplification but it is correct for JavaScript) the code. If you wanted to make this work on your own computer, you would need to download the processing javascript library, make a simple web page using HTML, and then have a processing script loaded by that web page.

Yea, I've noticed you had already converted your ".pde" Java Mode sketch to p5js.

The fact is you didn't need to. Pjs can transpile pure Java Mode sketches to JS: http://ProcessingJS.org

And the site https://Bl.ocks.org can run gists online as long as we provide an "index.html" file to them. ;-D

Another option is to host our sketches at https://OpenProcessing.org/sketch/create

That site accepts both p5js & Java Mode/Pjs sketches btW. :-)

> If there's something I was missing...

Java Mode sketch needs to conform to Pjs' API: http://ProcessingJS.org/reference/

That API more or less matches Processing's Java Mode 1.5.1. O_o

Processing.JS (Pjs)'s API is pretty much stuck to when Processing was at version 1.5.1:
http://ProcessingJS.org/reference/

And only very recently PDE's become compatible w/ enum.
I suggest you to replace all of your enum structures w/ interface instead.

Given I have used Processing in class, this would be pretty interesting for me to know as well. There is a local company in my city called M1 Interactive which specializes in creating interactive installations and kiosks. Seems like a niche area if you ask me, I don't know any other companies locally that get this specialized. I am not sure if they use Processing, though. They seem to be focusing more on Unity3D at the moment.

Processing.js may be of interest to you. It converts Processing code to JavaScript and runs natively in your browser (using HTML5 canvas to draw the graphics). You can take a look at the source code to see how it implements the high level functions and what are its differences from the Processing based on Java.

If you're into writing code, there's also:

• Fluxus: https://www.youtube.com/watch?v=6LCIjCKRy0Y (for live coding 3D graphics)
• SuperCollider: https://vimeo.com/149014097 (though SC isn't really designed to do visual stuff and is more focused on audio, I actually find the language really nice for 2D graphics)
• Processing: http://processingjs.org/exhibition/ (I don't really have a specific video for Processing but there's a bunch of demos on their site. there's also a javascript version, processing.js, that will run in the browser. both versions can do 2D and 3D)

Played with it

Only thing I can think of trying to change is using the PVectors.
Making a bunch of temporary Objects has slowed things down for me in the past.

As for js, there's a bunch of stuff that could be unsupported.

Interesting sketch.

Nah. .pde is just the extension that the original Processing uses for source code files.

http://processingjs.org/articles/jsQuickStart.html many ways to skin this cat but this should get yous started

http://processingjs.org/ is perfect for this. It is easy to set up. It runs in a browser. It is easy to learn. I highly recommend it.

Javascript is a flavor of language with a lot of peculiarities - but the basic flow control structures it uses are carried over through many other languages ( for, if, switch, while, do, throw, etc ).

The data structures are lightweight and easy to use JSON. The API is easy to use and it can be used to draw anything.

This would get your feet wet readily. You could also jump into using unity with the skills you've gained.

Then check out deeper languages like Python. Its a little weird too - but its cool. Read about design patterns. Maybe pull down the jdk and make a java app.

Just stick with it and be patient. We are all here to help.

Good luck. Stick with it. Its the funnest job about which I know. Its pretty cool to work all day just making stuff.

I've been trying to learn Processing and I'm in offseason withdrawal, so I thought football stats would be a great place to start.

I'd love to create more and figure out new ways of visualizing and linking stats, if this is at all understandable.

I know you can do it with WebGL by uploading textures per frame...

I think you can do the same in html5/canvas by updating a bitmap per frame.. I'd guess that WebGL would be more performant, but that is just a guess.

Then there is processing... http://processingjs.org/ whic is used for doing pixel/particle style effects.. not sure if it would be relevant.

> Try letting server side languages handle any sort of heavy lifting for calculations.

Well, dang, there goes 99% of the work done in processingjs.

The trouble with your suggestion is that it doesn't address the cause of the issue and nor does it solve it.
It's a floating point representational issue, see the other informed posts, and it (or a variation of it) will crop up where ever you fob the issue of to.

There's a 50 year history of networked (graphics / calculation) server + thin <-> fat client variations out there with all sorts of trade offs in security, lag, network traffic, etc. but none of them are a solution per se to not understanding floating point issues.

Probably the most advanced thing so far is the pjs4ipad web app. It takes Java code, translates and displays using HTML5 + Canvas + Javascript... all under Safari.

This is all based on the Processing simplified Java environment - and the Processing.JS HTML5/Javascript translation.

It's not a full-blown development environment, since Apple have gone out of their way to disallow such tools - but without a full jailbroken toolset, this is the closest you're going to get to casual development and running of code on the iPad.

Similar to Processing there is OpenFrameworks, which is C/C++ based and doesn't have it's own IDE. I've been playing around with both of them, Processing is very quick and easy to setup and get started with, and there is a lot of friendly code shared out there for it and it makes it easy to export java applets, but OpenFrameworks seems quite a bit faster. I'm torn between what to spend more time with right now.

I think if I'm going to be doing any computer vision related stuff, I'll go with OpenFrameworks for the speed and possibility of working directly against OpenCV itself.

Also check out openprocessing and processing.js.

• The Processing language doesn't have const, or #define.

• If you read the description, you would find that pressing r resets the game.

• Apart from the colors, there are no magic numbers. But sure, I could define all the colors at the start of the program instead.

• Works fine in my version of Chrome. If it doesn't work in your browsers, that's the fault of the currently very early beta of Processingjs. In any case Processingjs is free and open source, so instead of bitching about it not working, you should look into its source code and contribute.

• I'm not trying to replace JavaScript. Who said anything about that?

I'm not totally sure where it would fit in your list, but I think it's important to note processing.js, a port of the Processing language to javascript. It has many features that could definitely be of use to the sort of people who need a list like this.

There used to be a great game hosted on Facebook that's no longer available; it was written in Processing.js and called "Virion" - there's a reference to it here (search on the page for "virion"):

http://processingjs.org/exhibition/

Unfortunately, I can't find the source code any longer (I have a copy myself) - you might be able to contact one of the authors for it?

http://www.jonahkagan.me/#virion

From that page:

"Virion is an educational game about basic immunology. Instead of playing as the human body fighting off evil illnesses, you join the dark side, playing as a virus trying to infect as many cells as possible. Virion won the 2011 Hidden Agenda Contest."

Given her interest in graphics/gaming, I would suggest looking at processingjs which provides a creative platform for young programmers. Also, something like Unity or Unreal would provide her lots of motivation/enthusiasm.

Trying to get her into the deep end of things might just put her off but only you would know what works best for her!

I don't know why, but when you paste the .pde code from his GitHub repository link on this website and you press 'run', I'm getting the error "Error! Error was: SyntaxError: Unexpected token 'in'". I get the same error when I convert it to JS and run it locally. Can anybody help me here?
http://processingjs.org/tools/processing-helper.html

Khan Academy's code is actually processing.js, which is a little different than javascript and requires a download.

Here's a link to the download: http://processingjs.org/download/

And here's a link to a Khan Academy video on how to use processing.js outside of their environment: https://www.khanacademy.org/computing/computer-programming/programming-games-visualizations/advanced-development-tools/a/using-processingjs-outside-khan-academy

Do you want this to be a website? If so, you'll need to know some (very, very basic) HTML and CSS, along with JavaScript.

As for the natal chart, you could use the Canvas API, or maybe a graphics library like Processing. It depends on your knowledge of JS which one is easier.

Learn some JS.

Then learn Processing.js (basically, javascript with some extra stuff to make assorted things much easier)

http://processingjs.org/

But don't wait too long to try Processing.js; learn enough JS to get basic stuff to run, then learn more JS using Processing.

You'll need to do loops, conditionals, exceptions, decent coding habits, etc. in either case. Better to have fun projects. :)

Then see if there's something specif you'd like to do that doesn't work so well with processing.js and come back ask for more suggestions.

There are assorted languages (Ruby, Java, Haskell, Lua, C, C++, python, C#), that have related frameworks and libraries for different kinds of things.

But don't worry about that until you've gotten comfy with JavaScript and played around with stuff and started getting ambitions that outstrip what Processing can offer.

For start, you can use Processing JS and use that to run you Java processing code. Follow their tutorial and create the local host website first. There is a lot free places to upload a simple website. I used byethost.com for some time because someone told me, so I tell you too. It gives you a free domain name as yourdomain.byethost.com.

What did you create?

Good luck.

Well, I think I've got it sorted…

A few things:

You should have

<meta content="text/html;charset=utf-8" http-equiv="Content-Type"> <meta content="utf-8" http-equiv="encoding">

In the head of your html. Also, your final tag is </hmtl>; it should be </html>.

There's a guide here http://processingjs.org/articles/p5QuickStart.html#writingsketches about writing Processing sketches for the web. In particular, the section "Processing.js requires more care with variable naming than Processing". You shouldn't use a variable names that are used as part of the Processing syntax, and you shouldn't use variables with the same names as functions (such as gameScreen).

The styling has "top: 800px" which pushes the sketch somewhat off the screen. You could reduce this to get the maze on the screen.

I've managed to get it working (http://ps.vibrion.org/), so let me know if you're still having trouble with it.

• It's been more than 1 week I've last visited Processing Reddit.
  
• All the answers provided here so far are misleading in some point or another.
• Processing is a project w/ many flavors, as every1 knows it already.
• Among them there is 1 called Processing.js (Pjs).
• And a long time ago, there were 2 modes based on that Pjs: JavaScript & CoffeeScript Modes.
• Pjs, just like p5.js, is a JS library, in which we can write for it using JS syntax or anything else which can transpile to JS, like TypeScript and CoffeeScript.
• But Pjs can also convert Java Mode syntax into JS syntax, which p5.js can't.
• And that's this confusion is all about: Both Java Mode & Pjs accepts Java syntax!
• For more info about Pjs, go here: http://ProcessingJS.org/

I know a lot of people don't really like this library for whatever reason, but I've always had an apreciation for processing and processing.js for graphic heavy applications.

It uses the canvas these days AFAIK.

http://processingjs.org/

GLHF.

even when he explains again

GoToLoop can you explain to a beginning coder what the WinName and options would be? having trouble playing all of them together an example would be super helpful. Thanks! GoToLoop GoToLoop April 2016

@arikar1, this thread is about the Pjs version (JS Mode) for function link(). Apparently the Java Mode version got 1 parameter only, the URL as String. There's no 2nd target parameter there like Pjs': http://ProcessingJS.org/reference/link_/

im still lost lol

as for link similar to the guy asking questions on the linked page im unsure how to use it ?

it is what i need but doesnt work....

any ideas?

how?

this does nothing

link("http://processingjs.org", "_new");

and this looks new to me

function link(url, winName, options) { winName && open(url, winName, options) || (location = url); }

i supose i put my url in url but then how do i link it to mouseclicked?

thansk for hellping me sir

Those sort of games are/were created with the [processing language](https://en.wikipedia.org/wiki/Processing_(programming_language). There's a javascript version of it located here

I'm not sure I understand why float() doesn't do the job for making inByte into a float?

Aren't the values being sent by the arduino converted to float before going through the map()?

EDIT: I see my link is to processing.js, and that there was a similar function in processing 2.x, but I'm not finding that function in 3.x. Is that function deprecated now?

Openprocessing relies on processing.js to compute your sketch. There are many incompatibilities between regular Java mode, and Javascript mode. You could install processing js to check it out without uploading the sketch.

Minim library is definitely not translated to js for instance.

Thanks so much! That was a simple fix and was the kind of thing I was hoping for.

I spent some time trying to learn more about what you did and why it worked. Does this page explain the best?

There's absolutely no end to the extent of programming art. Just to give a couple of very accessible and recent examples, here's a gallery of stuff done with Processing, or with WebGL. There's a lot of overlap with mathematical art (various visualizations, fractals are pretty popular - try something like this mandelbox trip), most of what's done in the demoscene is almost definitely programming art, etc..

Processing has a new "Modes" feature which allows other languages to be used within its environment -- might not carry over into web use the same way, but javascript can be used. Overview \ Processing.org

Also, there is a separate, javascript based version: ProcessingJS

> say, load a PDE in a canvas and then have some JS glue that can interact with it

This is exactly one of the features that Processing.js provides, though I have experienced some inconsistencies with its output- some more complicated sketches just crash. Take a look at the examples here for how to do it: http://processingjs.org/learning/

As for native JavaScript pjs, if you don't know JavaScript, it will be a pretty big hurdle. If you're interested in any kind of web or frontend visual development, though, I recommend learning JavaScript in general. From there, it's not too difficult to build sketches in pure JS.

Afaik there's no library support for PJS, but I don't really use libraries anyway.

I went and looked at the processing.js docs. Did you preload the image properly? That is the only way to use a local file.

You can also try using a URL to load an image like the third example from the docs: http://processingjs.org/reference/loadImage_/

Yeah, I just now sort of figured out a similar way of doing that in my browser......I would have edited my post, but saw your response. I already had Processing, and after looking around I saw that Khan Academy.....might be based on.....this.

It kind of works....but I'm not quite sure where to go from here. I updated my copy of Processing, and installed the JavaScript mode, and now I can copy and paste the sketches and run them without error messages, but I can't seem to get them to work quite right.

What you've shown me only appears to work for maybe a standard browser distribution of JavaScript or something.....you would know more about this than I would.......KA appears to be running something else based on Processing.

>I do not know why you need JavaScript for KhanAcademy (I suppose it's something with writing exercises)

KA has computer programming section that uses JavaScript. The sketches are all laid out for you, I just want to learn how to run them with my own software.

Essentially I loop over this:

The counter gets incremented +1 every frame etc.

var ratio = (1/counter);

// This sets ratio to 0.25 when (1/4), and 0.003134796238244514 when we are at 319 on the counter.

so then we draw lines that far appart. so there are then 319 lines exactly 0.003134796238244514 appart.

pr.line( 10+(ratio*640*i)(620/640), 10, 10+((ratio*640*i)(620/640)), 600);

processing's line function syntax:

pr.line(x1, y1, x2, y2)

So I offset to right with 10 pixels, then use the ratio from above multiplied with the width of our frame, which is 640px. i is the loop counter to draw each line. It works just as well as ratio*i but I added the rest to scale it nicely within the frame.

You set the color with pr.stroke(r, g, b, a) pr.stroke(255, 0, 0, 255); Is full RED for instance.

So what you are seeing is, is some kind of pattern the pattern in divisibility, and shows where they are concentrated. I guess you are seeing primes. Because of purely how often numbers are divisible by a number. Lots of numbers are divisible by 2, or 1/x where x = 2; so you see a line in the middle down, where 0.5 lies., same with thirds, quarters etc. Atleast this is how I understand what causes the waves and ripples. If you view variations of this on different scales you see other effects, something like a mandelbrot but in 1 dimension. Its quite fun to look at :) Perhaps we should add controls.

Here's a quick approximation for ProcessingJS. It doesn't do any real physics, just oscillates each point at a higher rate than its predecessor in a linear relationship -- the same patterns can quickly be observed. Some fun/insight to be had by changing the relationships.

Paste the below code into the textbox on the IDE page and press run:

void setup() { size(250,250); frameRate(20); strokeWeight(2); }

int t;

void draw() { t = t + 1; background(0); stroke(255,255,255); for(int i=0; i<8; ++i) { line(125,10+20*i, 125+100*sin(t*i/40.0), 10+20*i); } }

Then you will want to look at Raphael and processing.js.

If you need to support Internet Explorer, you will want to look at explorercanvas which simulates a canvas but it's obviously not to going to run nearly as fast as on browsers with native support.

In the spirit of start somewhere, learn more later, have a look at processingjs for interactive visual page development.

It lacks (as far as I know) a message layer to communicate with other users but it's probably as good a place as any to begin.

You could try Processing, which, IIRC, is built on top of Java. It has all the functions you were talking about (if I've understood your requirements correctly, that is) and from my (admittedly brief) experience with it, it's not too hard to pick up for creating simple projects. Plus, if you want to transition to the web without having to use Java applets, you can try Processing.js.