Interactive Series: Intro

So… I’m starting a series about interactiveness.
I’m pretty sure that it’s a real word, because my computer didn’t mark it as a spelling error or unknown word or something like that.

Welcome to my Interactive series! In this series, there will be multiple interactive projects with the code shown to you. (I’ll also be updating my GitHub content just for you guys.)

So this will be interactive with color, lines, and shape. It will be truly awesome, even though some of the posts will be short. I’ll even make screen recordings and post them here — just for you, my readers. This will be the best series ever, and I’ll keep updating the posts frequently, whenever I get the chance to. So yeah… let’s get started! (The project below is just the first of many posts to come later.)

Bezier Interactiveness

So the Bezier has been there to help us make curves for cars, planes, you name it. It has 2 start and end points, but also 2 focal points which tell it how to curve. To master the bezier is very hard, but playing around with it can be very fun.

First, as always, we set up the program.

void setup(){
size(600,600);
noFill();
}

Then, we start drawing.

void draw(){
  background(255);
  stroke(0);

We want a black bezier, so that’s why we put stroke(0) so that it would be black. Then, we make the bezier code. This is the one line of code that makes it fun, and also interactive. Using mouseX and mouseY, along with some random numbers, this is the line:

  bezier(mouseY, mouseX, mouseX, -84, mouseX, 555, 75, mouseY);

After that, we want to make 2 blue lines that connect to the mouse from the endpoints, so we make this:

  line(mouseX, mouseY, mouseY, mouseX);
  line(mouseX, mouseY, 75, mouseY);
}

And that’s it! Here’s the end result:

The end result gif.

There isn’t any cursor, but the point at which the 2 blue lines meet is where the cursor would have been. You get the point.

You can find the code on GitHub here.

Thanks for reading and see you next time.