JavaScript For Cats
An introduction for new programmers
PUT YOUR BEARD IN MY MOUTH
Peter Solarz
NASA

blake kathryn

No title available
art blog(derogatory)
🪼

Origami Around

titsay
Cosmic Funnies
No title available

PR's Tumblrdome
Today's Document
he wasn't even looking at me and he found me
"I'm Dorothy Gale from Kansas"

Janaina Medeiros
Sweet Seals For You, Always
TVSTRANGERTHINGS
No title available

Product Placement
seen from United States
seen from Australia

seen from Guernsey

seen from Malaysia

seen from Australia
seen from Germany

seen from United States

seen from TĂĽrkiye
seen from Philippines
seen from Russia
seen from United States
seen from United States
seen from United States

seen from United States
seen from United Arab Emirates
seen from Australia

seen from United States
seen from TĂĽrkiye

seen from Australia
seen from Malaysia
@hipstericdinosaur
JavaScript For Cats
An introduction for new programmers
broken beam
How to become a great artist in ten seconds # mcClure #Brough
Primo esperimento di SuperShape.Â
Music: Cat Power
Who said programming couldn’t be creative? Explore coding within the context of the visual arts, with our course from UCLA Arts. Enroll now: http://bit.ly/2befJb2
Sono riaperte le iscrizioni!Â
'I am a mathematician, and I would like to stand on your roof.' That is how Ron Eglash greeted many African families he met while researching the fractal patterns he’d noticed in villages across the continent.
16 minuti di approfondimento sui frattali con sottotitoli in italiano.
BitShifter x Cellular Automata x 002.
Non si può vivere di soli unicorni. Ecco uno degli ultimi lavori di Joshua Davis.
Thanks Daniel Shiffman, I'm addicted to your videos.
https://www.youtube.com/channel/UCvjgXvBlbQiydffZU7m1_aw
Dal libro di Lauren McCarthy
Analizziamo i due esempi: 6-5Â e 6-6Â
Versione online del libro. Da consultare se si vuole capire qualcosa di piĂą di questo linguaggio.
Ragazze ecco il primo badge premio per essere arrivate alla seconda settimana di questo Summer Camp.Â
Grazie per l’attenzione, continuate a sperimentare!
(via https://www.youtube.com/watch?v=nicMAoW6u1g)
Compito per la prossima lezione 6 luglio
guardare i primi 9 video di questa playlist
elaborare una versione dell’esempio qui sotto che utilizzi map( ) e random( )
/* https://vimeo.com/channels/learningp5js/138331801 */ // var col = 0; var r = 0; var b = 225;
function setup() { Â createCanvas(600, 400); Â }
function draw() {  // background  //col = mouseX;  //col = map(mouseX, 0, 600, 0, 255);  r = map(mouseX, 0, 600, 0, 255);  b = map(mouseX, 0, 600, 255, 0);  // background(col);  background(r, 0, b);
 // ellipse  fill(250, 118, 222);  ellipse(mouseX, 200, 64, 64); }
modificare neverStopDrawing* cercando di capire come funzionano push( ) e splice ( ). Anche se non abbiamo ancora visto gli array è importante guardare la sintassi del constructor che è esattamente come la class di Processing.
*attenzione nel codice commentato che vi ho dato oggi il nome è ancora “onde”, non fateci caso. L’esempio giusto era un altro che faceva appunto delle onde.
(via https://www.youtube.com/watch?v=zkc417YapfE)
In questo video viene spiegato *benissimo* che i parameters sono quelli che si dichiarano nella function.Â
Esempio:
function flower (x, y, petals) {
//instructions
}
Gli arguments sono quelli che assegnamo quando chiamiamo una function.Â
Esempio:Â
flowers (200, 100, 10);Â
è come se dicessi: assegna 200 a x, 100 a Y e 10 a petals.
(via Experiments in motion graphics : Whitney, John, Sr., 1917-1995 : Free Download & Streaming : Internet Archive)
John H. Whitney explains the graphic art potential of the computer and the methods and philosophy involved in his computer film making.
Filmato incredibile sul motion design negli anni sessanta.Â
spring waves
Ancora RecursiveTree.Â
(via https://www.youtube.com/watch?v=UrIDcoAnYmA)
Tutorial Cielo stellato di NetMagazine.
Link al codice dei 5 step http://codepen.io/collection/vLKqo/
Evolution of a small random walker
Hi everyone! Long time no post :) Recently, I’ve started going through my copy of Nature of Code again, and working through, well, not everything, but some bits. One of the first things the book talks about is random walkers and random walkers controlled by probabilities. So, I dove into p5.js, trying to relearn javascript while doing something hopefully interesting.
(the structure of this post: I will write up stuff, link to a bl.ocks javascript animation and post screenshots. There is a github link at the end of the post where all the code will live. All the js links are completely randomized and might require a few refreshes to get pleasing color combinations)
So, what about a line-based random walker - something with a grid-like background maybe, with lines of fixed width, that will always create squares if it loops in on itself. My first attempt went well, but I made one crucial mistake in calculating the lengths of diagonals. Still, the results were pretty cool:
random walker with errors in calculations/click for animation
Screenshots:
Well, at least that error was easily found and fixed. Despite really liking the results, I went ahead towards what I was actually aiming to make. The “grid based” random walker ended up being interesting but… not enough:
“grid-based” random walker
Screenshots:
Maybe making multiple walkers and giving them highly-saturated, mostly-transparent colors will make for an interesting result? As it turns out, yes, yes it will. The end result of this was something that reminded me of city metro line maps and Mini-Metro.
Metro lines
Screenshots:
Aaaaand… I thought I was done. I was done, right? Start with a simple idea, pursue it a bit and whee pretty results. I had something that was nice to look at, produced pretty images, and seemed… done. At least, I thought so. marienna, however, disagreed.
- “Why can’t you make the area fill up, as the lines start forming triangles?” - “well, um, it’s not what I had in mind when I started this” - “You’re wrong. You should make it with triangles that fill with color”
I did not really intend to go back to it, but she was right, there was more to do with this - the grid was inelegant and required stupid, unnecessary calculations, and if I switched to actually having a proper grid that stored colors of lines that passed through, it would make filling the area much easier.
So, what was wrong with the previous versions? If you look at the first example, the problem is obvious there - instead of actually having a proper grid, I only had line lengths and was “randomly” (ish) selecting angles, using polar transformations to calculate where the next line segment will end.
To make this better, I instead opted to have a grid, an actual 2-dimensional array that stored colors for each grid point. Calculating the new endpoint of the line segment is then as simple as rounding the cos() and sin() of the selected angle, which gives an integer in the [-1, 1] range, then adding those to the current grid position, only multiplying by the side of the grid square after that.
This… might have gotten confusing. To make this obvious to myself and to make completely sure that all calculations were correct, I made a few intermediary versions. The first one was to make sure everything works well with the grid:
Visible grid
Screenshot:
Afterwards, I needed to make sure that the colors were stored correctly inside the grid. The “bubble train” effect was pretty nice:
Bubbles!
Screenshot:
Ok. DONE. All the prep was there, it was time to fill out the triangles. Again, marienna and I did not completely agree. She wanted the fully-opaque, hypnotic, chaotic, version:
Triangles! Chaos!
Screenshots:
The hypnotic chaos that causes my eyes to unfocus and start seeing the triangles in 3d was nice, but if you know anything about me, you know I’m all about the soft pastels. Going back to something like 20% opacity for the colors produced something that made me extremely happy:
Pastel joy
Screenshots:
And, while I was sure I was done after the mini-metro-like, now I am pretty certain that there’s a lot more work to do here. Some of the things I am thinking about/planning:
- instead of just randomly(ish) selecting an angle, actually apply random forces to the walkers, then normalize and snap to grid. This will allow me to later maybe calculate line density at points in the grid, and make points with high densities act as repulsors, or somesuch
- find a good set/several good sets of colors that work well together instead of randomizing them every time.
- make it possible to add arbitrary border lines that will force the walkers back. Make the walkers “push through” these borders for short periods of time, in order to create a more central structure, with more elaborate branching on the outside.
Finally, if this was interesting and you want to see the code, you can find it on github.
Evoluzione del Random Walker
(via https://www.youtube.com/watch?v=8j0UDiN7my4)
Introduzione: cos’è p5.js spiegato bene