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.

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 June 17th, 2021 at 13:17


Related

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

Bauhaus 101 – A beginners Processing Tutorial

Tutorials

How to use p5.js with Visual Studio Code

Tutorials

The Magic Triangle

Tutorials Writings

Processing-Tutorial: Rasterize 3D

Tutorials

Processing-Tutorial: Image-Rasterizer

Tutorials

Processing-Tutorial: WAVES pt. 1

Tutorials

Processing-Tutorial: Kinetic Typography 1

Tutorials

Processing-Tutorial: Video Export

Tutorials

How to rasterize an image with Processing

Tutorials