https://editor.p5js.org/LunaChen/full/ElUF-foL2

Patten that I’m inspirated by and want to recreate using P5.

For this assignment I get inspiration from ICM help session last week, I bring some kind of fancy pattern I saw on instergram. And the teacher is really great since it’s only me in this help session, so she bring her thoughts on how to get started with the pattern I loved.

And yes I finally get what sin and cos really means….

class Line {
constructor(centerX, centerY, pointX, pointY) {
this.centerX = centerX;
this.centerY = centerY;
this.pointX = pointX;
this.pointY = pointY;
}

Start with the class for line, since I already know I want to create lots of lines rotating around.

Set the line as they all start from center, and change on the other point of the line.

show() {
stroke(255);
strokeWeight(1);
line(this.centerX, this.centerY, this.pointX, this.pointY);
// draw the line
}

Then draw the line with the variables listed inside constructors.

This stage nothing fancy, just basic code.

move(index) {
this.pointX +=5 * sin(frameCount * 0.03+ index*0.2);
this.pointY += 0.5;
if (this.pointY > height) {
  this.pointY = 0; // reset the position of pointY back to top
}

Try to move the lines using sin wave wo make the line move.

At this stage I think no more about lines moving in circle, but moving like DNA….

I copied and pasted from the sin I used before …

let myLine = [];
let numLine = 1000;
let theta = 30;

function setup() {
  createCanvas(600, 400);
  for (let i = 0; i < numLine; i++) {
    let r = random(width / 2); //use random radius
    let x = Math.cos(theta) * r + width / 2;
    let y = Math.sin(theta) * r + height / 2;
    myLine.push(new Line(width / 2, height / 2, x, y));
    //add arreys into the empty myLine
  }
}

Setup the global variables here.

So I can use Math to control the position of the outer point of the lines. Have to make theta as variables and set the angle.

function draw() {
background(0);

for (let i = 0; i < numLine; i++) {
myLine[i].show();
myLine[i].move(i); // bring new i to move(index);
}

Listed in the draw function

Here I want to add transparency on the lines, to make it low transparency and add mouse function to control the transparency.

class Line {
constructor(centerX, centerY, pointX, pointY, tans) {
this.centerX = centerX;
this.centerY = centerY;
this.pointX = pointX;
this.pointY = pointY;
this.tans = tans; // line's transparency
}

Add tran(mis-type) into the class as the variables to control throughout the code.

show() {
stroke(
map(mouseY, 0, height, 100, 200),
map(mouseY, 0, height, 200, 100),
map(mouseY, 0, height, 255, 200),
this.tans);
// use map and transparancy to draw the line
strokeWeight(map(mouseX, 0, width, 0.5, 5));
line(this.centerX, this.centerY, this.pointX, this.pointY);
// draw the line
}

Use mouseY to control the color of the lines.

Use mouseX to control the strokeWeight of the lines.

Use map to change them.