Organificial 2

/******************

Code by Vamoss

Original code link:

https://openprocessing.org/sketch/2256135

​

Author links:

http://vamoss.com.br

http://twitter.com/vamoss

http://github.com/vamoss

******************/

​

// "Organificial" é uma obra de arte computacional que busca a forma orgânica através de algoritmos.

// O trabalho utiliza a curva de Hobby e polígonos irregulares para encontrar formas lembram manchas fluidas, desafiando a distinção entre o digital e o natural.

// Este trabalho ressalta a interseção entre a tecnologia e a natureza, explorando a capacidade dos algoritmos de criar beleza orgânica.

​

var SIZE;

var colors = ["#FFC30F", "#581845", "#900C3F", "#C70039", "#FF5733", "#1AC7C4"];

var seed;

​

function setup() {

  SIZE = min(windowWidth, windowHeight);

  createCanvas(windowWidth, windowHeight);

  seed = random() * 10000;

}

​

function draw() {

  randomSeed(seed);

  background(0);

  const SEGMENTS = random(5, 10);

  var screenPct = min(height, width) / 1000;

  INNER_RADIUS = screenPct / 5;

  RADIUS_VARIATION = screenPct * 600;

  let iniVertices = [];

  for (var i = 0; i < SEGMENTS; i++) {

    iniVertices.push(pointForIndex(i/SEGMENTS, width/2, height/2));

  }

​

  noStroke();

  const valX = iniVertices.map(d => d.x);

  const valY = iniVertices.map(d => d.y);

  const minX = Math.min(...valX);

  const maxX = Math.max(...valX);

  const minY = Math.min(...valY);

  const maxY = Math.max(...valY);

  const centerX = (maxX - minX) / 2 + minX;

  const centerY = (maxY - minY) / 2 + minY;

  randomFill(centerX, centerY, 1);

  //createHobbyBezier by @arnoson https://github.com/arnoson/hobby-curve

  var hobbyPoints = createHobbyBezier(iniVertices, { tension: 1, cyclic: true });

  beginShape();

  vertex(iniVertices[0].x, iniVertices[0].y);

  hobbyPoints.forEach(({ startControl, endControl, point }) => {

    bezierVertex(startControl.x, startControl.y, endControl.x, endControl.y, point.x, point.y);

  });

  endShape();

  let polygon = createPolygon(iniVertices);

  const area = sqrt(pow(polygon.maxX - polygon.minX, 2) + pow(polygon.maxY - polygon.minY, 2));

  //console.log(area);

  for(var i = 1; i <= 3; i++){

    noStroke();

    if(i == 3)

      drawingContext.fillStyle = "black";

    else

      randomFill(centerX, centerY, i%2==0?-i:i);

    const vertices = getPaddingVertices(polygon, area / 30);

    hobbyPoints = createHobbyBezier(vertices, { tension: 1, cyclic: true });

    beginShape();

    vertex(vertices[0].x, vertices[0].y);

    hobbyPoints.forEach(({ startControl, endControl, point }) => {

      bezierVertex(startControl.x, startControl.y, endControl.x, endControl.y, point.x, point.y);

    });

    endShape();

    polygon = createPolygon(vertices);

  }

}

​

function randomFill(x, y, vel){

  const ctx = drawingContext;

  const gradient = ctx.createConicGradient(frameCount/20*vel, x, y);

  const iniColor = random(colors);

  const amount = floor(random(3, 6));

  gradient.addColorStop(0, iniColor);

  for(var i = 0; i < amount; i++){

    gradient.addColorStop(1/(amount+2) * (i+1), random(colors));

  }

  gradient.addColorStop(1, iniColor);

​

  // Set the fill style and draw a rectangle

  ctx.fillStyle = gradient;

}

​

function keyPressed(){

  seed = random() * 1000;

  noiseSeed(seed);

}

​

function mousePressed(){

  seed = random() * 1000;

  noiseSeed(seed);

}

​

function createPolygon(vertices)

{

    var polygon = {vertices: vertices};

​

    var edges = [];

    var minX = (vertices.length > 0) ? vertices[0].x : undefined;

    var minY = (vertices.length > 0) ? vertices[0].y : undefined;

    var maxX = minX;

    var maxY = minY;

​

    for (var i = 0; i < polygon.vertices.length; i++) {

        var edge = {

            vertex1: vertices[i], 

            vertex2: vertices[(i + 1) % vertices.length], 

            polygon: polygon, 

            index: i

        };

        edge.outwardNormal = outwardEdgeNormal(edge);

        edge.inwardNormal = inwardEdgeNormal(edge);

        edges.push(edge);

        var x = vertices[i].x;

        var y = vertices[i].y;

        minX = Math.min(x, minX);

        minY = Math.min(y, minY);

        maxX = Math.max(x, maxX);

        maxY = Math.max(y, maxY);

    }                       

    polygon.edges = edges;

    polygon.minX = minX;

    polygon.minY = minY;

    polygon.maxX = maxX;

    polygon.maxY = maxY;

​

    return polygon;

}

​

function inwardEdgeNormal(edge)

{

    // Assuming that polygon vertices are in clockwise order

    var dx = edge.vertex2.x - edge.vertex1.x;

    var dy = edge.vertex2.y - edge.vertex1.y;

    var edgeLength = Math.sqrt(dx*dx + dy*dy);

    return {x: -dy/edgeLength, y: dx/edgeLength};

}

​

function outwardEdgeNormal(edge)

{

    var n = inwardEdgeNormal(edge);

    return {x: -n.x, y: -n.y};

}

​

function getPaddingVertices(polygon, shapePadding)

{

    var offsetEdges = [];

    for (var i = 0; i < polygon.edges.length; i++) {

        var edge = polygon.edges[i];

        var dx = edge.inwardNormal.x * shapePadding;

        var dy = edge.inwardNormal.y * shapePadding;

        offsetEdges.push(createOffsetEdge(edge, dx, dy));

    }

    var vertices = [];

    for (var i = 0; i < offsetEdges.length; i++) {

        var thisEdge = offsetEdges[i];

        var prevEdge = offsetEdges[(i + offsetEdges.length - 1) % offsetEdges.length];

        var vertex = edgesIntersection(prevEdge, thisEdge);

        if (vertex)

            vertices.push(vertex);

        else {

            //we dont need extra curves in this case

            //var arcCenter = polygon.edges[i].vertex1;

            //appendArc(vertices, arcCenter, shapePadding, prevEdge.vertex2, thisEdge.vertex1, true);

            // Calculate midpoint between the edges

            var midPoint = {

                x: (prevEdge.vertex2.x + thisEdge.vertex1.x) / 2,

                y: (prevEdge.vertex2.y + thisEdge.vertex1.y) / 2

            };

            vertices.push(midPoint);

        }

    }

​

    return vertices;

}

​

​

function createOffsetEdge(edge, dx, dy)

{

    return {

        vertex1: {x: edge.vertex1.x + dx, y: edge.vertex1.y + dy},

        vertex2: {x: edge.vertex2.x + dx, y: edge.vertex2.y + dy}

    };

}

​

// based on http://local.wasp.uwa.edu.au/~pbourke/geometry/lineline2d/, edgeA => "line a", edgeB => "line b"

function edgesIntersection(edgeA, edgeB)

{

    var den = (edgeB.vertex2.y - edgeB.vertex1.y) * (edgeA.vertex2.x - edgeA.vertex1.x) - (edgeB.vertex2.x - edgeB.vertex1.x) * (edgeA.vertex2.y - edgeA.vertex1.y);

    if (den == 0)

        return null;  // lines are parallel or conincident

​

    var ua = ((edgeB.vertex2.x - edgeB.vertex1.x) * (edgeA.vertex1.y - edgeB.vertex1.y) - (edgeB.vertex2.y - edgeB.vertex1.y) * (edgeA.vertex1.x - edgeB.vertex1.x)) / den;

    var ub = ((edgeA.vertex2.x - edgeA.vertex1.x) * (edgeA.vertex1.y - edgeB.vertex1.y) - (edgeA.vertex2.y - edgeA.vertex1.y) * (edgeA.vertex1.x - edgeB.vertex1.x)) / den;

​

    if (ua < 0 || ub < 0 || ua > 1 || ub > 1)

        return null;

​

    return {x: edgeA.vertex1.x + ua * (edgeA.vertex2.x - edgeA.vertex1.x),  y: edgeA.vertex1.y + ua * (edgeA.vertex2.y - edgeA.vertex1.y)};

}

​

function appendArc(vertices, center, radius, startVertex, endVertex, isPaddingBoundary)

{

    const twoPI = Math.PI * 2;

    var startAngle = Math.atan2(startVertex.y - center.y, startVertex.x - center.x);

    var endAngle = Math.atan2(endVertex.y - center.y, endVertex.x - center.x);

    if (startAngle < 0)

        startAngle += twoPI;

    if (endAngle < 0)

        endAngle += twoPI;

    var arcSegmentCount = 5; // An odd number so that one arc vertex will be eactly arcRadius from center.

    var angle = ((startAngle > endAngle) ? (startAngle - endAngle) : (startAngle + twoPI - endAngle));

    var angle5 =  ((isPaddingBoundary) ? -angle : twoPI - angle) / arcSegmentCount;

​

    vertices.push(startVertex);

    for (var i = 1; i < arcSegmentCount; ++i) {

        var angle = startAngle + angle5 * i;

        var vertex = {

            x: center.x + Math.cos(angle) * radius,

            y: center.y + Math.sin(angle) * radius,

        };

        vertices.push(vertex);

    }

    vertices.push(endVertex);

}

​

​

//code adapted from @GoToLoop

//generates a circular noise with perfect looping

//https://forum.processing.org/one/topic/how-to-make-perlin-noise-loop.html

function pointForIndex(pct, x, y) {

  const NOISE_SCALE = 1.5;

  let angle = pct * TWO_PI;

  let cosAngle = cos(angle);

  let sinAngle = sin(angle);

  let time = frameCount / 300;

  let noiseValue = noise(NOISE_SCALE * cosAngle + NOISE_SCALE, NOISE_SCALE * sinAngle + NOISE_SCALE, time);

  let radius = INNER_RADIUS + RADIUS_VARIATION * noiseValue;

  return {

    x: radius * cosAngle + x,

    y: radius * sinAngle + y

  };

}