Processing-Tutorial: Exploring Wave-Figures

Published by Tim 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);
  }
}

Published by Tim on Saturday June 5, 2021

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


Related

Getting started with Processing

Tutorials

Three ways to work with p5.js

Tutorials

Four essential Principles in any Programming Language

Tutorials unlisted Writings

Digital Reality: Livestream Marathon

Digital Humanities Prototypes Tutorials

I challenged Daniel Shiffman and here’s his response

Tutorials

How to write a simple HTML-Document

Tutorials

How to work with Layers in Processing?

Tutorials unlisted

Rhythm Studies

Tutorials