Processing-Tutorial: Exploring Wave-Figures
In this spontaneous Processing coding-session, I solve one of the assignments from my online course “Bauhaus Coding Workshop” available on my website. Here some very important concepts like loops, waves and mapping come together.
By loading the video, you agree to YouTube’s privacy policy.
Learn more
The Code
void setup() {
size(1200, 900);
background(0);
}
void draw() {
translate(width/2, height/2);
float mag = 400;
float s = 15;
noStroke();
for (int i = 0; i < 100; i++) {
float w = map(sin(radians(frameCount)), -1, 1, -100, 100);
float wave1 = map(tan(radians(frameCount * 0.8 + i + w)), -1, 1, -100, 100);
float wave2 = map(tan(radians(frameCount + i)), -1, 1, -mag, mag);
float c = map(sin(radians(frameCount * 5 + i)), -1, 1, 0, 255);
fill(c);
rect(wave1, wave2, s, s);
}
}Related
Building Tools with p5.js (Playlist)
Click here to login or connect!To view this content, you must be a member of Tim's Patreon Unlock with PatreonAlready […]
Preview: Random Compositions
One of the most exciting and maybe even unsettling discoveries in the learning process of Creative Coding in Graphic Design […]
Getting started with Processing
Please note: This blogpost is currently in development While in p5.js there is a relatively confusing array of ways to […]
Three ways to work with p5.js
When the first alpha release of p5.js appeared in July 2014, it kicked off a hugely important development for the […]
I challenged Daniel Shiffman and here’s his response
This year I donated $700 to the Processing Foundation to support people who care about the development of the projects. […]
How to write a simple HTML-Document
Hi folks! ☀️🖐️ I hope you are doing well! For a few months now I’ve been working on the question […]
How to work with Layers in Processing?
Hello people, here comes a new session for you. This time I’ll explain how you can work with layers in […]