Processing-Tutorial: Exploring Wave-Figures

Published by on Saturday June 5, 2021

Last modified on May 21st, 2022 at 12:42

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.

Bauhaus Coding Workshop

YouTube

By loading the video, you agree to YouTube’s privacy policy.
Learn more

Load video

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

Getting started with Processing

Tutorials

Three ways to work with p5.js

Tutorials

Four essential Principles in any Programming Language

Tutorials unlisted Writings

I challenged Daniel Shiffman and here’s his response

Tutorials unlisted

Processing-Tutorial: A Grid of Arcs

Tutorials

Interactive Grid System (Livestream)

Tutorials

Processing-Tutorial: Render Videos with the Movie Maker

Tutorials

Processing-Tutorial – Programming Posters

Tutorials