In case this comment section is still interested, there is an entire set of programs related to parametric design developed by Robert McNeel called "Rhinocers" and the parametric part of it is called "Grasshopper". Its a sort of visual coding that i'm sure you guys will love to check out. Great video though, cheers!
I was at the IBM Los Angeles Scientific Center where this work was done. I believe that the person shown at the terminal is Jack Cintron. By the way my name is Alfred Inselberg and will be happy to hear
I found this video at the beginning of the pandemic and it reinvigorated my passion for generative art. I just want to say that I really appreciate you taking the time to show us something that inspired you because in doing so it inspired us.
Generated computer art is so interesting. What got me interested was the Deep Dream art that Google introduced. Processing and JavaScript both do some neat stuff. I also use a lot of Python.
I'm learning Processing programming right now, and you introduced a few functions I haven't seen (as well as that AMAZING affect), SO THANK YOU!! I'll comment later with my code for my sketch :)
Great intro to early CG art and processing too. I'm just looking into processing and this was really useful. Thanks so much Mr. Miller. Here's one I made based on this... float t; float ball1x =0; float ball1y =0; float ball2x =0; float ball2y =0; void setup() { frameRate(25); background(20); size(720,720); } void draw() { background(0); stroke(255); strokeWeight(1); translate(width/2, height/2); rotate (radians(t)); for (int i=0;i
it's so interesting you said "the key to that is to layer up sins and cosines on top of each other", because i knew that logically from uni- that's the basis of a fourier series
Incredibly helpful thank you. I followed along and added the code as you did and it helped me understand what I was doing so much better than copying and pasting. I've managed my very first Processing programme thanks to you! Your descriptions are really clear. Now I just need to work out how to get external data to generate the maths :-)
Thats so cool, the visual at the end reminds me of dancer. Maybe thats why we find dancing attractive, we're sort of mimicing natures formulas of movement i imagine.
This was such an inspirational video! I ran into Processing maybe a couple of years ago, but was kinda discouraged by the sheer amount of stuff you seamingly needed to know to be able to work with it. But this video used stuff I was familiar with, even if I don't use it since high school almost 10 years ago, and applied it in such a cool way that made me download it instantly and started messing with it. Of course there's stuff I'm lost af but at least I'll try to keep doing stuff. Thanks a lot! P.S: I love the header logo on your website!
inspiring! im a designer and musician who failed math and i type with 2 fingers. code scares me, but you're opening me up! you showed me in this video that it doesn't take much to get something cool moving around. Question.. if i was to dedicate time to learning a programming language for generative art, which would you suggest? JS, Python?
ah ha . Lissajouss images, I used to generate such images using my own Bresenham's line algorithm's and fast symmetry circle construction without sin/cosine derivatives simply mirror *8 and compute
If you look closely at the original video, you can notice that no lines actually disappear or appear, they "glide" from one position to another. Whereas in your animation, its seems as though they're not moving at all : the last line disappears and a new line appears in the front, but no line actually glides...
Theres a doc on archive.org called The Incredible Machine. Really interesting look at the beginnings of graphics. check it out, cheers for the video. :)
how would you make the camera follow the movement of point? For example: In the first case where you make the function x return the value of t -> the point moves right along the horizontal plane and eventually out of bounds (towards infinity) -> how would make the camera follow this movement? Cheers for the video!
Dude, You almost have more likes on this 1 video than you have subs. I think if you started to make more videos, especially like this one, then it might work you ?
i did some change in code pretty simular to win 98 screensaver now we need to put another color so they can change // y = 5x // x = 5t // y = 3t + 3 static final int NUM_LINES = 10; float t; void setup() { background(20); size(1280, 800); } void draw() { background(10); stroke(55,10,255); strokeWeight(1);
hmm i would have made a list of points. but that would have complicated things in a way. maybe a ArrayList since that is a linked list and you can just remove elemenst and then just remove the first if bigger then X and keep adding to the back.
This is cool and thanks for making it- one question is about frame rate. It seems like according to documentation the default frame rate is going to be 60 frames per second, but in your example things seem to move slower than that. I don't see you alter the frame rate explicitly.
It's rendering at 60 fps. You can tell when it increments one pixel at a time across half the window (250px) in just over 4 seconds. But the video appears to be captured at only 24 fps.
for better colors use in setup "colorMode(HSB);" and then where you set the stroke change to "stroke((t * 5) % 256, 255, 255);" --> already much nicer colors ;) your welcome
Hi! could you post a beginners tutorial on processing? I have no idea what I'm doing in processing in regards to code. I am used to traditional art, so this is super new to me. If not, you could also direct me to another video! Thank you.
This is a great video. However, one thing that I don't understand ---------- "float x (float t)". Is it a short form of a function? like " i++" is a short form of "i = i+1"?
No, it's not a special short form, even though it looks odd. It's a function called "x" that returns a float, and takes one float parameter "t". An equivalent function header would be: float myFunction(float myParameter)
i wanted to see whitneys tutorial, can you direct me to that, i done all this maths a long time ago, and bezier elastic banding, ah my bad.... i should have read more in comments, i am off to see his original work, ps. good tutorial mind.
if I wanted to have it stop in place how would I do that? is there I could make the floats freeze? or would it be in the for loop? sorry I'm a noob lol
How would I export this as a gif? Given that there's no way to know the total frames in a loop. And it does loop, as is the nature of sin and cosin functions, correct?
Hello, I was hoping maybe you could help me with this program. I am taking a course in university and well to be honest my professor isn't very helpful at all and I am having to learn everything myself which is fine but I got about a month to finish everything up. Any chance I could show you the assignments and you could lead me in the right directions?
![PURPEECH - นี่ฉันเองคนที่... (It's me) [Official MV]](http://i.ytimg.com/vi/NuhHd0hOOg8/mqdefault.jpg)
If you liked this video, you might be interested in my own programmatic art! instagram.com/space.filler.art
holasss baby
Btw you don't have to make the int static
We just gonna ignore how my man has a touch screen computer?
light pen, yoz.
In case this comment section is still interested, there is an entire set of programs related to parametric design developed by Robert McNeel called "Rhinocers" and the parametric part of it is called "Grasshopper". Its a sort of visual coding that i'm sure you guys will love to check out. Great video though, cheers!
where to find tho??
I was at the IBM Los Angeles Scientific Center where this work was done. I believe that the person shown at the terminal is
Jack Cintron. By the way my name is Alfred Inselberg and will be happy to hear
Oh wow! אביגיל בר זכור
RIP Alfred
I found this video at the beginning of the pandemic and it reinvigorated my passion for generative art. I just want to say that I really appreciate you taking the time to show us something that inspired you because in doing so it inspired us.
Generated computer art is so interesting. What got me interested was the Deep Dream art that Google introduced. Processing and JavaScript both do some neat stuff. I also use a lot of Python.
I'm learning Processing programming right now, and you introduced a few functions I haven't seen (as well as that AMAZING affect), SO THANK YOU!! I'll comment later with my code for my sketch :)
You made that sketch yet?
Awsome tutorial, thanks Alexander!!!!!
Dang that was interesting, and I’ve been hearing a lot about Processing lately. Thanks for putting this video together!
Great intro to early CG art and processing too. I'm just looking into processing and this was really useful. Thanks so much Mr. Miller. Here's one I made based on this...
float t;
float ball1x =0;
float ball1y =0;
float ball2x =0;
float ball2y =0;
void setup() {
frameRate(25);
background(20);
size(720,720);
}
void draw() {
background(0);
stroke(255);
strokeWeight(1);
translate(width/2, height/2);
rotate (radians(t));
for (int i=0;i
Thus looks amazing
Brilliant
what is "n" in that code?
it's so interesting you said "the key to that is to layer up sins and cosines on top of each other", because i knew that logically from uni- that's the basis of a fourier series
Incredibly helpful thank you. I followed along and added the code as you did and it helped me understand what I was doing so much better than copying and pasting. I've managed my very first Processing programme thanks to you! Your descriptions are really clear. Now I just need to work out how to get external data to generate the maths :-)
Thats so cool, the visual at the end reminds me of dancer. Maybe thats why we find dancing attractive, we're sort of mimicing natures formulas of movement i imagine.
Make more videos! This was fantastic!
Reminds me of the good old days programming assembler on the 8088 and learning about lissajous
This was such an inspirational video! I ran into Processing maybe a couple of years ago, but was kinda discouraged by the sheer amount of stuff you seamingly needed to know to be able to work with it. But this video used stuff I was familiar with, even if I don't use it since high school almost 10 years ago, and applied it in such a cool way that made me download it instantly and started messing with it. Of course there's stuff I'm lost af but at least I'll try to keep doing stuff.
Thanks a lot!
P.S: I love the header logo on your website!
Great tutorial! Nice pace, perfect size font and output and informative narration.
thanks for the video, i’m excited to learn processing
Thanks Alexander! Really interesting process. I will do some experimenting - looks like there are a lot of possibilities.
thank you so much! such a great run through of parametric lines and processing.
Thanks Alexander, this is a great tutorial, very helpful!
I can start making screens savers! haha
Greg Field congratulation🎉
Lmao
This blew my mind, thank you very much.
For a really nice slowmotion effect
type:
if (keyPressed) {
if (key == 'b') {
t = t-0.5;
}
}
+the1337er tap it
if (key == 'v') {
t = t-2;
}
vne that isnt slowmo its moving backwards
such a cool code remind me of old memory Basic with Commodore 64 Thanks !
by pure chance, I discovered this amazing code
float t = 0;
void setup() {
size(500, 500);
background(20);
}
void draw() {
stroke(255);
strokeWeight(4);
translate(width/100, height/2);
point(t, sin(t*2)*150);
t+=.45;
}
and this
float t = 0;
float incr=0;
void setup() {
size(6000, 500);
background(20);
}
void draw() {
stroke(255);
strokeWeight(5);
translate(width/100, height/2);
point(t, sin(t*2.2)*150);
//incr += .000005;
t+=.255+incr;
frameRate(500);
}
awesome, thanks for sharing
Jacob Haig if it has sin in it, chances are it will look awesome (trust me, I am experienced)
Woooow.
Thanks!
mm
Thanks for the super fun and informative tutorial! :D
inspiring! im a designer and musician who failed math and i type with 2 fingers. code scares me, but you're opening me up! you showed me in this video that it doesn't take much to get something cool moving around. Question.. if i was to dedicate time to learning a programming language for generative art, which would you suggest? JS, Python?
JS, HTML, CSS
ah ha . Lissajouss images, I used to generate such images using my own Bresenham's line algorithm's and fast symmetry circle construction without sin/cosine derivatives simply mirror *8 and compute
Thanks for the video! Great material to learn!
I found this:
float t;
float mx = 250;
void setup(){
background(20);
size(500, 500);
}
void draw(){
stroke(255);
strokeWeight(1);
line(0, 250, 500, 250);
line(mx, 0, mx, 500);
translate(mx, height/2);
line(x(t-1), y(t-1), x(t), y(t));
line(y(t-1), x(t-1), y(t), x(t));
t = t+50;
}
float x(float t){
return 100*sin(t) + 200*cos(-t);
}
float y(float t){
return 100*sin(0.5*t) + sin(t/30);
}
Trust me its amazing.
It's nice to see calc 2 had at least one use in my life ...
Legend thank you for this, so helpful
Fantastic find!
this can be good for a music video
Great video! I want more of these! 😁
If you look closely at the original video, you can notice that no lines actually disappear or appear, they "glide" from one position to another. Whereas in your animation, its seems as though they're not moving at all : the last line disappears and a new line appears in the front, but no line actually glides...
Great! Lovely stuff mate.
Great video, also very inspiring
incredible
I just love you man, keep it up :3
so cool
float t;
void setup(){
background(30);
size(2500,2000);
}
void draw(){
stroke(255);
strokeWeight(5);
translate(0,height/2);
point(x(t),y(t));
t++;
}
float x(float t) {
return t;
}
float y(float t) {
return tan(t*101) * 100;
}
Very nice intro tutorial, neat and useful. Congratulation!
more processing tutoriallllss!!!
great tutorial. Thanks !
Theres a doc on archive.org called The Incredible Machine. Really interesting look at the beginnings of graphics. check it out, cheers for the video. :)
Nice rec!
Here's the documentary on TH-cam :) th-cam.com/video/iwVu2BWLZqA/w-d-xo.html
how would you make the camera follow the movement of point?
For example: In the first case where you make the function x return the value of t -> the point moves right along the horizontal plane and eventually out of bounds (towards infinity) -> how would make the camera follow this movement?
Cheers for the video!
nice tut man!
Great video, thanks
that made my day Thank you sir.
"Processing is a tool for non programmers" goes a head and writes a program.
(I guess you are a programmer good luck!)
Great video, thank you for sharing :)
More of it!
Great video! Thank you!
Thank you!
Great video. How would you do this tutorial today in 2024?
great video!
Dude, You almost have more likes on this 1 video than you have subs.
I think if you started to make more videos, especially like this one, then it might work you ?
It's cool, could you do a more detailed video about the maths?
thank you. useful stuff!
i did some change in code pretty simular to win 98 screensaver now we need to put another color so they can change
// y = 5x
// x = 5t
// y = 3t + 3
static final int NUM_LINES = 10;
float t;
void setup() {
background(20);
size(1280, 800);
}
void draw() {
background(10);
stroke(55,10,255);
strokeWeight(1);
translate(width/2, height/2);
for (int i = 0; i < NUM_LINES; i++) {
line(x1(t + i), y1(t + i), x2(t + i), y2(t + i));
line(x3(t + i), y3(t + i), x4(t + i), y4(t + i));
}
t += 0.5;
}
float x1(float t) {
return sin(t / 10) * 100 + sin(t / 5) * 100;
}
float y1(float t) {
return cos(-t / 10) * 100 + sin(t / 5) * 150;
}
float x2(float t) {
return sin(t / 10) * 200 + sin(t) * 2 + cos(t) * 10;
}
float y2(float t) {
return cos(t / 20) * 200 + cos(t / 12) * 20;
}
float x3(float t) {
return sin(t / 10) * 100 + sin(t / 20) * 200;
}
float y3(float t) {
return cos(-t / 10) * 100 + sin(t / 5) * -150;
}
float x4(float t) {
return sin(t / 10) * 200 + sin(t) * 2 + cos(t) * 10;
}
float y4(float t) {
return cos(t / 20) * 200 + cos(t / 12) * -200;
}
nice one
"Drunk Jedi waving a light saber" 🤣
thanks, please go on with more tuts!
this is so cool!!!!
Magnificent
very cool
hmm i would have made a list of points. but that would have complicated things in a way.
maybe a ArrayList since that is a linked list and you can just remove elemenst and then just remove the first if bigger then X and keep adding to the back.
unbelievably based
That man would have loved Tempest. :D
sick
This is cool and thanks for making it- one question is about frame rate. It seems like according to documentation the default frame rate is going to be 60 frames per second, but in your example things seem to move slower than that. I don't see you alter the frame rate explicitly.
It's rendering at 60 fps. You can tell when it increments one pixel at a time across half the window (250px) in just over 4 seconds. But the video appears to be captured at only 24 fps.
Hey everyone. I just made a tutorial on zooming/panning in Processing, and I'd love for tips and suggestions in the comments. Thanks!
where? link? thanks
thank you , if we increase 'i' up to 100 , and add an other 'i' to the for loop out off parentheses it would be more interrestting animation.
Heres mine
static final int NUM_LINES = 10;
float t;
void setup() {
background(20);
size(500, 500);
}
void draw() {
background(20);
stroke(random(255), random(255), random(255));
strokeWeight(5);
translate(width/2, height/2);
for (int i = 0; i < NUM_LINES; i++) {
line(x1(t + i), y1(t + i), x2(t + i), y2(t + i));
}
t += 0.3;
}
float x1(float t) {
return sin(t / -15) * 100 + sin(t / 5) * 200;
}
float y1(float t) {
return cos(t / 20) * 175;
}
float x2(float t) {
return sin(t / 10) * 200 + sin(-t) * 2;
}
float y2(float t) {
return cos(-t / 20) * 200 + cos(-t / 12) * 20;
}
uou to much lights for me
epileptic
for better colors use in setup "colorMode(HSB);" and then where you set the stroke change to "stroke((t * 5) % 256, 255, 255);" --> already much nicer colors ;) your welcome
thank you! I had a typo in mine somewhere and I couldn't find it, that sorted it
Hi! could you post a beginners tutorial on processing? I have no idea what I'm doing in processing in regards to code. I am used to traditional art, so this is super new to me. If not, you could also direct me to another video! Thank you.
please make more I subscribed
I like your voice a lot
is there a possibility to make this with another kind of movement? maybe bassed on another kind of wave?
is there a way to create the grainy vibrating effect too?
thank you : )
This is a great video. However, one thing that I don't understand ---------- "float x (float t)". Is it a short form of a function? like " i++" is a short form of "i = i+1"?
No, it's not a special short form, even though it looks odd. It's a function called "x" that returns a float, and takes one float parameter "t". An equivalent function header would be:
float myFunction(float myParameter)
Thanks for answering
i wanted to see whitneys tutorial, can you direct me to that, i done all this maths a long time ago, and bezier elastic banding, ah my bad.... i should have read more in comments, i am off to see his original work, ps. good tutorial mind.
i just do exactly same type as you are,but i'm stuck in 'point(x(t),y(t);)',my computer alert me 'function y(float) doesn't exist' how can i fix it?
NiKol Chang well.. you need to make the function. also, put the ; at the very end of the line.
if I wanted to have it stop in place how would I do that? is there I could make the floats freeze? or would it be in the for loop? sorry I'm a noob lol
Has anyone "translated" this code to p5.js? I'm trying to work it out but getting confused.
Its actually at Official website
p5js.org/examples/math-parametric-equations.html
thank you
Čau ieva
Any idea how to get one of the points to follow the mouse? I can only get it to change the angle very slightly.
Could you please do a tutorial like this on the works of Adam Ferriss.
How would I export this as a gif? Given that there's no way to know the total frames in a loop. And it does loop, as is the nature of sin and cosin functions, correct?
subbed this channel
Hello, I was hoping maybe you could help me with this program. I am taking a course in university and well to be honest my professor isn't very helpful at all and I am having to learn everything myself which is fine but I got about a month to finish everything up. Any chance I could show you the assignments and you could lead me in the right directions?
how do you add colour to the strokes lines, just like in the archive video?
+MegaNigel77 Use the stroke function: processing.org/reference/stroke_.html
@@alexmiller could you post an example where to put the fill settings? mine stay white ; ( ... great vid Sir!
@@alltaken0 Put it before the point in the code. Use stroke(255,255,255); and change the values inside which stand for Red, Green, Blue.
the 1968 computer is a Xerox Alta ?
Hi, nice video :-) if I wanted to add another float, or set of parametric lines, how would I do that?
+Ida Engelhardt Never mind, I found out how to do it ;-)
How then?? I really want to know how I can add more sets of parametric lines!
Imagine this in 3D.
Hi Alexander do you have any of the codes saved so i could take a peak please?
Here's mine:
static final int NUM_LINES = 40;
float t;
int hue = 255;
void setup() {
background(20);
size(500, 500);
colorMode(HSB, 360, 100, 100);
}
void draw() {
background(0);
hue--;
if(hue == 0) {
hue = 360;
}
stroke(hue, 255, 255);
strokeWeight(5);
translate(width/2, height/2);
for (int i = 0; i < NUM_LINES; i++) {
line(x1(t + i), y1(t + i), x2(t + i), y2(t + i));
}
t += 0.3;
}
float x1(float t) {
return sin(t / 15) * 300;
}
float y1(float t) {
return cos(t / 20) * 175;
}
float x2(float t) {
return atan2(t / 10, t) * 200;
}
float y2(float t) {
return cos(-t / 20) * 200;
}
Guess what. cos(-x) equals cos(x). :)
this is what I created, quite long tbh
float t,r; //r and t varibles
int l = 3; //lineThickness
int h = 10; //ballThickness
int amount = 1; // amount of shapes
float t_increase = 0.5; //Movement speed, keep below 1.5 for best look
float r_change = 4; //Try and make this a multiple of t_increase
float r_increase = 0.01; //changes positions when t_increase == r_change, larger = larger change
void setup() {
background(51);
size(1000,1000);
}
void draw() {
background(40,50,70);
stroke(220,60,200,100);
translate(width / 2, height / 2);
for (int i = 0; i < amount; i ++) {
strokeWeight(l);
line(x(t + i, r + i), y(t + i,r + i), x2(t + i,r + i), y2(t + i,r + i));
strokeWeight(h);
point(x(t + i, r + i), y(t + i,r + i));
point(x2(t + i,r + i), y2(t + i,r + i));
}
stroke(200,220,60,100);
for (int i = 0; i < amount; i ++) {
strokeWeight(l);
line(x4(t + i), y4(t + i), x2(t + i,r + i), y2(t + i,r + i));
strokeWeight(h);
point(x4(t + i), y4(t + i));
point(x2(t + i,r + i), y2(t + i,r + i));
}
stroke(80,60,200,100);
for (int i = 0; i < amount; i ++) {
strokeWeight(l);
line(x3(t +i), y3(t +i), x4(t + i), y4(t + i));
strokeWeight(h);
point(x3(t +i), y3(t +i));
point(x4(t + i), y4(t + i));
}
stroke(60,200,80,100);
for (int i = 0; i < amount; i ++) {
strokeWeight(l);
line(x2(t +i, r + i), y2(t +i, r + i), x3(t + i), y3(t + i));
strokeWeight(h);
point(x2(t +i, r + i), y2(t +i, r + i));
point(x3(t + i), y3(t + i));
}
stroke(200,10,10,100);
for (int i = 0; i < amount; i ++) {
strokeWeight(l);
line(x(t +i, r + i), y(t + i, r + i), x3(t + i), y3(t + i));
strokeWeight(h);
point(x(t +i, r + i), y(t + i, r + i));
point(x3(t + i), y3(t + i));
}
stroke(200,90,80,100);
for (int i = 0; i < amount; i ++) {
strokeWeight(l);
line(x(t +i, r + i), y(t +i, r + i), x4(t + i), y4(t + i));
strokeWeight(h);
point(x(t +i, r + i), y(t +i, r + i));
point(x4(t + i), y4(t + i));
}
t += t_increase;
if(t % r_change == 0) {
r += r_increase;
}
}
float x(float t, float r) {
return sin(r / 10) * 200 + sin(t / 5) * 100;
}
float y(float t, float r) {
return cos(r / 30) * 200 + cos(t / 10) * 90;
}
float x2(float t, float r) {
return sin(t / 50) * 100 + sin(r / 50) * 200;
}
float y2(float t, float r) {
return cos(t / 10) * (100 / pow(PI, sin(r))) + cos(r / 10) * 90;
}
float x3(float t) {
return sin(t / 10) * 200 + sin(t / 90) * 200;
}
float y3(float t) {
return cos(t / 30) * 200 + cos(t / 10) * 90;
}
float x4(float t) {
return sin(t / 50) * 100 - sin(t / 120) * 200;
}
float y4(float t) {
return cos(t / 10) * (100 / pow(PI, sin(t / 50))) - cos(t / 10) * 90;
}
hello, do you have a course for beginners?