galsanea@andrew.cmu.edu – Page 2 – [OLD FALL 2019] 15-104 • Introduction to Computing for Creative Practice

Ghalya Alsanea – Project-07-Curves

//Ghalya Alsanea
//Section B
//galsanea@andrew.cmu.edu
//project-07

var outR;               //outer circle radius
var inR;                //inner circle radius
var d = 100;            //distance for drawing pedal 
var t;                  //theta variable
var points = 10000;     //number of points to draw in for loop
var color2;             //global color variable

//constrained mouse values
var MX;
var MY;
//x and y values for resulting curve
var x;
var y;

function setup() {
    createCanvas(480, 480);
}

function draw() {
    //constrain mouse x and y within the canvas
    MX = constrain(mouseX, 0, width);
    MY = constrain(mouseY, 0, height);

    //map background color based on mouse location
    var color0 = map(MX, 0, width, 150, 250);
    var color1 = map(MY, 0, height, 150, 250);
    background(color0, color1, 200);

    //mapped color value based on mouse y location
    color2 = map(MY, 0, height, 0, 255);

    //draw everything using the center of canvas as (0,0)
    translate(width/2, height/2);
    //map the driving circle dimensions to mous x pos
    n = map(MX, 0, width, 0, 6)
    //rose formula for the radii
    outR = (2*n*d)/(n+1);
    inR = (n-1)*d/(n+1);

    drawHypotrochoid();
    drawBaseCrvs();
}

function drawHypotrochoid() {
    noFill();
    //map color value to mouse y location
    stroke(color2, 0, 0);

    //draw the resulting curve
    beginShape();
    for (var i = 0; i < points; i++) {
        // map theta to full circle radians
        t = map(i, 0, points, 0, TWO_PI);
        //use the mathematical formula of a Hypotrochoid to find x and y values
        x = (outR - inR) * cos(t) + d * cos((outR-inR) / inR * t);
        y = (outR - inR) * sin(t) - d * sin((outR-inR) / inR * t);
        vertex(x, y);
    }
    endShape();

}

function drawBaseCrvs() {
    //draw outer circle
    stroke(0, 0, 255);
    noFill();
    ellipse(0, 0, 2*outR, 2*outR);

    //draw the inner circle and line 
    stroke(0);
    fill(0);
    ellipse((outR+inR) * cos(t), (outR+inR) * sin(t), 5, 5);
    line((outR+inR) * cos(t), (outR+inR) * sin(t), x, y);
    noFill();
    ellipse((outR+inR) * cos(t), (outR+inR) * sin(t), 2 * inR, 2 * inR);

    //draw pedal dot
    fill(color2, 0, 0);
    ellipse(x, y, 5, 5);
}

mouse location: bottom left
mouse location: top middle
mouse location: bottom right
mouse location: middle, slightly left

Inspired by the rose variation of a hypotrochoid on Wolfram’s Math World, I tried to show the logic behind how the hypotrochoid curves are drawn as well. In terms of color, the background and the resulting curve’s stroke color change with the mouse location. To add an extra level of interaction, the “n” variable also reacts to the mouse location, which controls the radii of the two circles that create the hypotrochoid, resulting in the manipulation of the resulting overall shape.

Ghalya Alsanea – LO-06 -Randomness in Nature

An art show displaying Patterns that Emerge From Randomness in Nature

This work is created by Jonathan McCabe, a generative artist and designer, based in Australia. The work was inspired by Turing’s theory about naturally occurring random patterns (aka- the reaction-diffusion method).

Turing’s Theory : He believed that randomness result from the interactions between individual cells. (i.e. the state of a cell influences it’s neighbor, which influences it’s neighbor and so forth, creating a pattern of randomness.

McCabe’s Art: He created a digital representation of Turing’s theory, but instead of cells he used pixels.

“Each pixel gets a random value, usually a number between -1 and 1, which is represented in the final image by a color. Then, McCabe applies a set of rules that dictate how each pixel’s value shifts in response to the ones around it. As the program progresses, pixel values change, creating clusters of shapes that begin to emerge from the originally random mix of numbers.”
NADIA DRAKE

The reason why I chose this project is the fact that McCabe’s art starts to strangely resemble what you would see in a cell under a microscope. I am also very fascinated by the idea of a “natural random pattern” because it’s so ironic. Randomness usually means without a pattern, but yet the natural world is basically a bunch of structured randomness. Other than that, the art is also mesmerizing to look at.

Read more on the back story and the work behind the art here.

Ghalya Alsanea – Project 06-Abstract Clock

A modern clepsydra

a timepiece in which time is measured by the regulated flow of liquid.

sketch

//Ghalya Alsanea
//Section B
//galsanea@andrew.cmu.edu
//Project-06

//configure sizes of each water bowl
var secBowl = 25;
var minBowl = 18;
var hrBowl = 20;
//define x coordinates and y start points for each bowl
var secX = 200;
var secY = 150;
var minX = 300;
var minY = 60;
var hourX = 150;
var hourY = 90;
//water drop animation start X and Y positions 
var startX = 0;
var startY = 0; 

//set up fill matrix for the seconds
//row is time intervals (s)
//columns are fill for the seconds bowls
var fills =[['blue' , 255   , 255   , 255   ],
            [255    , 'blue', 255   , 255   ],
            ['blue' , 'blue', 255   , 255   ],
            [255    , 255   , 'blue', 255   ],
            ['blue' , 255   , 'blue', 255   ],
            [255    , 'blue', 'blue', 255   ],
            ['blue' , 'blue', 'blue', 255   ],
            [255    , 255   , 255   , 'blue'],
            ['blue' , 255   , 255   , 'blue'],
            [255    , 'blue', 255   , 'blue'],
            ['blue' , 'blue', 255   , 'blue'],
            [255    , 255   , 'blue', 'blue'],
            ['blue' , 255   , 'blue', 'blue'],
            [255    , 'blue', 'blue', 'blue'],
            ['blue' , 'blue', 'blue', 'blue'],
            ]


function setup() {
    createCanvas(480, 480);
    angleMode(DEGREES);         
}

function draw() {
    background("pink");
    
    //background mechanisms --> graphics
    noStroke();
    //top
    fill(255);
    arc(width/2, 20, 50, 50, 0, 180);
    fill('blue');
    arc(width/2, 30, 40, 28, 0, 180);
    //bottom
    circle(width/2, height -50, 50);
    //connecting tubes
    rect(width/2 - 3, 32, 6, height - 100);
    rect(minX - 2,  minY + minBowl * 0.6 * 29, 4, minBowl + 10);
    //blue lines
    noFill();
    strokeWeight(3);
    stroke('blue');
    //minute connectors
    line(minX, (minY + minBowl * 31 * 0.6), width/2, height - 50);
    line(minX - minBowl +2, minY + minBowl * 0.6 * 30, minX, minY + minBowl * 0.6 * 30);
    //seconds connectors
    line(secX, secY + secBowl*6, secX, secY + secBowl*7);
    line(secX, secY + secBowl*7, width/2, secY + secBowl*8);
    line(secX, secY, secX, secY - secBowl*3);
    arc(secX + 8, secY - secBowl*3, 16, 16, 180, 360);
    line(secX + 16, secY - secBowl*3, secX + 16, secY - secBowl*2);
    arc(secX + 24, secY - secBowl*2, 16, 16, 0, 180);
    line(secX + 32, secY - secBowl*2, secX + 32, 35);
    //don't start filling up hours if it's noon or midnight
    if(hour() == 12) {
        stroke(255);
    } else {
        stroke('blue');
    }
    //hour connectors
    line(minX - minBowl*2,  hourY + hrBowl * 1.2 * 12, hourX, hourY + hrBowl * 1.2 * 12);
    line(hourX, hourY + hrBowl * 1.2 * 11, hourX, hourY + hrBowl * 1.2 * 12);
    //purely white lines
    stroke(255);
    arc(minX- minBowl*1.5 + 2, minY, minBowl, minBowl, 180, 360);
    line(minX - minBowl*2 + 2,  minY, minX - minBowl*2 + 2, hourY);
    line(hourX, hourY-25, hourX, hourY);
    line(hourX, hourY-25, width / 2 - 15, 25);

    //do the math to figure out the times in useful numbers
    //since the cycle is in 2 minute intervals
    //you have to shift the seconds in the second minute
    if(minute() % 2 == 0) {
        var s = floor(second() / 8);
    } else {
        var s = floor((60 + second())/8);
    }
    //if minutes is divisible by 2, fill one of the minute bowls
    var m = floor(minute()/2);
    //every hour, fill one hour bowl
    var h = hour() % 12;

    //seconds base
    for (i = 0; i < 4; i++) {
        noStroke();
        //assign each bowl to it's color        
        fill(fills[s][i]);
        circle(secX, secY + secBowl * 1.5 * i, secBowl + 4*i);
        rect(secX - 3.5,  secY + secBowl * 1.5 * i, 7, secBowl + 4*i);
    }


    //minutes base
    strokeWeight(0.5);
    for (i = 0; i < 30; i++) {
        noStroke();
        //figure out if bowl should be filled with water
        if(30 - i <= m){
            fill("blue");
        }
        else {
            fill(255);
        }
        //bowls
        ellipse(minX, minY + minBowl * i * 0.6, minBowl, minBowl / 2);
        rect(minX - 2,  minY + minBowl * 0.6 * i, 4, minBowl / 2);
        //siphon tube
        rect(minX - minBowl,  minY + minBowl * 0.6 * i, 4, minBowl);        
        //tick marks for every 10 minutes
        if (i % 5 == 0) {
            push();
            translate(minX + minBowl, minY + minBowl * i * 0.6);
            stroke("blue");
            for(var a = 0; a < 30 - i; a+=5){
                line(0, 0, a/2 + 2, 0);
            }
            pop();
        }
    }

    //hours base
    for (i = 0; i < 12; i++) {
        noStroke();
        //figure out if bowl should be filled with water
        if(12 - i <= h){
            fill("blue");
        }
        else {
            fill(255);
        }
        //bowls
        circle(hourX, hourY + hrBowl*1.2*i, hrBowl);
        rect(hourX - 3,  hourY + hrBowl * 1.2 * i, 6, hrBowl);        
        //siphon tube
        rect(minX - minBowl*2,  hourY + hrBowl * 1.2 * i, 4, hrBowl*2);
    }

    // water dripping annimation
    push();
    translate(secX, secY - secBowl);
    stroke('blue');
    strokeWeight(3);
    //draw dashed line
    for (i = 0; i < 160; i+=20) {
        var y = map(startY, 0, secBowl*8, 0, 100);
        line(startX, y+i, startX, y + i + 5);
    }
    //animate line
    startY = startY + 2;
    //reset after 3 bowls
    if (startY > secBowl*3) {
        startY = 0;
    }
    pop();
}

For this project I was inspired by this clock in a mall I used to go to back home, which is the oldest mall in Kuwait. I used to sit in the main lobby as a child and stare at the sculpture for hours. Here’s a video…

Trying to figure out how to draw the water clock
Trying to understand the spacing of drops to seconds

I started by doing a lot of research about water clocks and how they work. You can find a brief history here. I decided to take the modern approach of the scientist, Bernard Gitton’s. I used this animation to visually understand how the clock works, and I used the explanations behind the physics of the timepiece and the calculations found on this page to figure out the code necessary to simulate the water clock.

The biggest challenge was trying to understand how the seconds were working. I used an excel sheet to understand when each of the bowls need to be filled during which second, and mapped that to a 2D array matrix.

Ghalya Alsanea – Looking Outwards – 05

“Computation is typically a prompt to the illusion of determinacy.”
Dana Cupkova

This topographical flow is color coded according to each line’s unique identifier in the software. This is part of a research project led by Dana Cupkove, a professor here at CMU in the School of Architecture. Making the underlying data an argument for visual exploration, Cupkova operates on the munerical structure of the image as an aesthetic device. I am inspired by how the layering of lines of varying tones work to hightlight the drawing’s analytical value, and its geographical accuracy, while making a new landscape visible.

In general, I love how her work is able to take landscape data and analyze and the way she portrays the data creates a new landscape that the viewer can experience in a different way.

Find more of her work here.

Ghalya Alsanea – Project 05 – Wallpaper

sketch

//Ghalya Alsanea
//Section B
//galsanea@andrew.cmu.edu;
//Project-05

var density = 20;     //grid density
var tile;

function setup() {
    createCanvas(600, 600); 
    noLoop();
    tile = width / density;   //find tile dimension
}

function draw() {
    background(200);

    //create a grid 
    for (var gridY = 0; gridY <= density; gridY++) {
        for (var gridX = 0; gridX <= density; gridX++) {

            //random color generator
            array = ["DarkSalmon", "DarkSeaGreen", "LightCoral", "MediumAquaMarine"];
            colorSeed = int(random(0, 4));
            var color = array[colorSeed];
            stroke (color);
            strokeWeight(1);

            //define the grid's X and Y positions
            var posX = tile * gridX;
            var posY = height / density * gridY;

            //randomizer
            var toggle = int(random(0, 3));
            //randomize which direction the diagonal is drawn
            //whether it's (\) or (/)
            if (toggle == 0) {
                line(posX, posY, posX + tile, posY + height / density);
            }
            if (toggle == 1) {
                strokeWeight(2);
                line(posX, posY + tile, posX + height / density, posY);
            }
            // if it's not / or \ then draw a dot
            if (toggle == 2) {
                noStroke();
                fill(color);
                circle(posX, posY, tile / 4)

            }
            // if it's not / or \ or a dot then it becomes a torus flower
            else {
                noFill();
                stroke(color);
                strokeWeight(1);
                circle(posX, posY, tile / 3);                
                push();
                translate(posX, posY);
                for (i = 0; i < 6; i++) {
                    fill(255, 100);
                    circle(tile / 6, 0, tile / 3);
                    rotate(radians(60));
                }
                pop();
            }
        }
    }
}

function mousePressed() {
    //redraw the wallpaper when you click your mouse
    redraw();
}

I started by creating a grid and then creating a maze like pattern based on a random toggle (i.e. if the line goes \ or /). I wanted to create a more fun pattern so I added to the conditional to add a flower or a dot in the places where there was no line. I was challenging myself to find a balance between structure and randomness. There’s also a random color associated with each graphic that is placed in the grid. Hence, every time you click your mouse a completely new wallpaper is drawn unlike the one before.

Ghalya Alsanea – Looking Outwards – 04

Making of Off the Staff (link)

By Nicholas Rougeux, September 6, 2016 in Art, Data

Seeing music

Each dot represents a note in the score. Pitch is indicated by the distance from the center of the image, while the time at which the note occurs is given by the angle from the 12 o’clock position. The size of the dot indicates the duration of the note, and the color of the dot is different for each instrument.

How they were made

“I can’t read music but I can parse it. The talent of reading music has always escaped me which is a little ironic considering I grew up in a musical family. However, I’ve always enjoyed how sheet music looks so I took a shot at visualizing the notes from musical scores and the result is this series of posters.”
Nicholas Rougeux (the artist)

Scores for **single instruments** use a single color.

Scores for **multiple instruments** use color as an added dimension to differentiate instruments.

The original process was:

Original MethoExport XML from MuseScore
Convert XML to CSV with Luxon
Upload select CSV files to Google Sheets: “Copying and pasting tens of thousands of cells into Google Sheets was a slow process and prone to failing—even with the speediest of browsers.”
Combine CSV files with Google Sheets: “The process of combining CSV files with Google Sheets was the most time-consuming step of the original process and had the risk for inaccuracy.”
Import CSV into NodeBox to generate images

The new process is:

Export MIDI from MuseScore
Generate CSV from MIDI file with midicsv-process
Import CSV into NodeBox to generate images

More details on the process here. This includes early versions and tools used. Earlier process can be found here.

What I admire most about his work is the fact that you’re able to visualize an entire musical score in one image. It was really mind opening for me to see the work of famous musicians and how structured they are, especially the work of Bach. It is like although they were made for the beautiful sounds, they still exist to be beautiful visuals.

More examples of Rougeux ‘s amazing posters.

Ghalya Alsanea – Project 04 – String Art

sketch

//Ghalya Alsanea
//Section B
//galsanea@andrew.cmu.edu;
//Project-04

function setup() {
    createCanvas(400, 300);
}

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

    //make x and y depend on mouse postition
    var x = constrain(mouseX, 0, width);
    var y = constrain(mouseY, 0, height);

    //create the mirrored x and y positions
    var ix = width - x;
    var iy = height - y;

    //create 4 parabolas mirroring each other to make an X like shape 
    //each parabola spans the width and height incrementally
    for (var i = 0; i <=width; i += 10) {
        //as the lines draw, make them darker proportionally
        stroke(255 - i / 2);

        line(i, iy, ix, height - i);
        line(width - i, y, x, i);
        line(width - i, iy, x, height - i);
        line(i, y, ix, i);
    }
    
    //same thing but on the inside of existing shape
    for (var i = 0; i <=width; i += 10) {
        //as the lines draw, make them go form red to darker proportionally
        stroke(255 - i / 2, 0 , 0);

        line(width - i, y, ix, height - i);
        line(i, iy, x, i);
        line(width - i, iy, ix, i);
        line(i, y, x, height - i);
    }
    
}

I wanted to create parabolic shapes that moved based on your mouse location proportionally. I thought it would be interesting to also have the color gradient as the lines were drawn.

This is a process sketch showing how I was thinking about the two ‘X’ shaped parabolas and the variable’s relationship with one another.

Ghalya Alsanea – LO-03 – ArboSkin

“Thermoformable sheets of bioplastics will represent a resource-efficient alternative [to oil-based plastics, glass, or metal] in the future, as they combine the high malleability and recyclability of plastics with the environmental benefits of materials consisting primarily of renewable resources.” explained the project team.
The Project Team

Overview

Stuttgart University’s ITKE Institute has designed and built the ArboSkin pavilion out of 388 bioplastic pyramids. A 140-square foot digitally fabricated mock-up composed of recyclable components that can be freely shaped and manufactured as 3D façade elements, the project was created within the Institute’s Bioplastic Façade Research Program to demonstrate the aesthetic and structural potentials of bioplastics.

Full Mock Up – Photograph by Roland Halbe

About the Creators

ITKE is the Institute of Building Structures and Structural Design in Stuttgart, Germany. Bioplastics are plastics made from renewable biomass sources such as starches, cellulose or other biopolymers, that offer sustainable alternatives to plastics derived from fossil fuels. The bioplastic used in the ArboSkin project is called Arboblend and is produced by German firm, Tecnaro, by combining different biopolymers such as lignin – a by-product of the wood pulping process – with natural reinforcing fibres.

Collaborating materials scientists, architects, product designers, manufacturing technicians, and environmental experts were able to develop a new material for facade cladding which is thermoformable and made primarily (>90%) from renewable resources. I admire the interdisciplinary approach to this project.

Process and Project Details

The blueprint of the shell structure is based on a network of triangular shapes of different sizes. The double curved skin is made of 3.5 mm thick bioplastic pyramids that are mechanically assembled to create the free form surface. The bioplastic sheets can be freely shaped and adapted to fit any requirement for building exteriors.

Personally, what really inspired me is the fact that waste produced during the CNC milling process can be regranulated and reused to create more of these façade elements in 3D format.

The double-curved skin is formed by linking the pyramids together, with bracing rings and joists helping to create load-bearing walls. CNC-milling was used to remove sections from some of the modules, creating apertures in the facade, which I believe can be really cool if it is done based on sun data allowing for shading/sunlight during certain times of the day.

FE-Model Wind and snow loads. This shows how they used weather data to figure out where to put apertures and how to structurally reinforce it. Source: ITKE

Notes:

Duration of the project: December 20, 2011 – October 31, 2013

Mock-Up: The bioplastics facade mock-up was created within the framework of the Bioplastic Facade Research Project, a project supported by EFRE (Europäischer Fonds für Regionale Entwicklung / European Fund for Regional Development). It demonstrates one of the possible architectural and constructional applications of bioplastic materials developed during the course of the project. The blueprint is based on a triangular net composed by mesh elements of varying sizes.

Links:

ITKE Constructs New ArboSkin Pavilion with 388 Recyclable Bioplastic Pyramids

ArboSkin pavilion made from bioplastic by ITKE

ArboSkin: Durable and Recyclable Bioplastics Facade Mock-Up

Ghalya Alsanea – Project 03

Align the flowers and be mesmerized!

sketch

//Ghalya Alsanea
//Section B
//galsanea@andrew.cmu.edu
//Project-03

var diameter;   //circle diameter
var diameteri;  //diameter of the inversed circle
var xx;         //mouse X location
var yy;         //mouse y location
var xi;         //inverse of mouxe x loxation
var yi;         //inverse of mouse y location
var angle = 0;  //the angle in which the flower roates
var strokeG;    //what G value the inversed flower color is
var dx;         //distance between x and it's inverse
var dy;         //distance between y and it's inverse

function setup() {
  createCanvas(480, 640);

}
function draw() {
  background(0);

  //if the two flowers are aligned in the center within
  //a tolerance, changed the color of the inversed flower
  dx = xx - xi;
  dy = yy - yi;

  if (dx < 30 & dx > -30 && dy < 30 && dy > -30){
    strokeG = 0
  } else{
    strokeG = 255
  }
  
  //set the variables to depend on the mouse
  xx = mouseX;
  xi = width - mouseX;   //the inverse X location
  yy = mouseY;
  yi = height - mouseY;  //the inverse Y location


  //find diameter that increases as mouseX increases
  diameter = mouseX / 2;

  //find inverse diameter that decreases with mouseX
  diameteri = width / 2 - mouseX / 2;

  //animate the angle to rotate the flower
  angle = angle + 1

  noFill();
  stroke(255);

  //draw simple torus flower
  circle(xx, yy, diameter);
  push();
  translate(xx, yy);
  circle(diameter / 2, 0, diameter);
  rotate(radians(60));
  circle(diameter / 2, 0, diameter);
  rotate(radians(60));
  circle(diameter / 2, 0, diameter);
  rotate(radians(60));
  circle(diameter / 2, 0, diameter);
  rotate(radians(60));
  circle(diameter / 2, 0, diameter);
  rotate(radians(60));
  circle(diameter / 2, 0, diameter);
  pop();

  //if mouse is in the second third of the vertical
  //canvas double the torus flower 

  if(mouseY > height / 3){
    fill(255, 50);
    push();
    translate(xx, yy);
    //animate it to rotate clockwise
    rotate(radians(30 + angle));
    circle(diameter / 2, 0, diameter);
    rotate(radians(60));
    circle(diameter / 2, 0, diameter);
    rotate(radians(60));
    circle(diameter / 2, 0, diameter);
    rotate(radians(60));
    circle(diameter / 2, 0, diameter);
    rotate(radians(60));
    circle(diameter / 2, 0, diameter);
    rotate(radians(60));
    circle(diameter / 2, 0, diameter);
    pop();
  }
  
  //if mouse is in the bottom third of the vertical
  //canvas double the already doubled flower
  if(mouseY > 2 * height / 3){
    fill(255, 50);
    push();
    translate(xx, yy);
    //amimate it to rotate counterclockwise
    rotate(radians(15 - angle));
    circle(diameter / 2, 0, diameter);
    rotate(radians(30));
    circle(diameter / 2, 0, diameter);
    rotate(radians(30));
    circle(diameter / 2, 0, diameter);
    rotate(radians(30));
    circle(diameter / 2, 0, diameter);
    rotate(radians(30));
    circle(diameter / 2, 0, diameter);
    rotate(radians(30));
    circle(diameter / 2, 0, diameter);
    rotate(radians(30));
    circle(diameter / 2, 0, diameter);
    rotate(radians(30));
    circle(diameter / 2, 0, diameter);
    rotate(radians(30));
    circle(diameter / 2, 0, diameter);
    rotate(radians(30));
    circle(diameter / 2, 0, diameter);
    rotate(radians(30));
    circle(diameter / 2, 0, diameter);
    pop();

  }


  //draw it's mirrored version

  noFill();
  stroke(255, strokeG, 0);

  //draw simple torus flower
  circle(xi, yi, diameteri);
  push();
  translate(xi, yi);
  circle(diameteri / 2, 0, diameteri);
  rotate(radians(60));
  circle(diameteri / 2, 0, diameteri);
  rotate(radians(60));
  circle(diameteri / 2, 0, diameteri);
  rotate(radians(60));
  circle(diameteri / 2, 0, diameteri);
  rotate(radians(60));
  circle(diameteri / 2, 0, diameteri);
  rotate(radians(60));
  circle(diameteri / 2, 0, diameteri);
  pop();

  //if mouse is in the second third of the vertical
  //canvas double the torus flower 

  if(mouseY > height / 3){
    fill(255, strokeG, 0, 50);
    push();
    translate(xi, yi);
    //animate it to rotate counterclockwise
    rotate(radians(30 - angle));
    circle(diameteri / 2, 0, diameteri);
    rotate(radians(60));
    circle(diameteri / 2, 0, diameteri);
    rotate(radians(60));
    circle(diameteri / 2, 0, diameteri);
    rotate(radians(60));
    circle(diameteri / 2, 0, diameteri);
    rotate(radians(60));
    circle(diameteri / 2, 0, diameteri);
    rotate(radians(60));
    circle(diameteri / 2, 0, diameteri);
    pop();
  }
  
  //if mouse is in the bottom third of the vertical
  //canvas double the already doubled flower
  if(mouseY > 2 * height / 3){
    fill(255, strokeG, 0, 50);
    push();
    translate(xi, yi);
    //amimate it to rotate clockwise
    rotate(radians(15 + angle));
    circle(diameteri / 2, 0, diameteri);
    rotate(radians(30));
    circle(diameteri / 2, 0, diameteri);
    rotate(radians(30));
    circle(diameteri / 2, 0, diameteri);
    rotate(radians(30));
    circle(diameteri / 2, 0, diameteri);
    rotate(radians(30));
    circle(diameteri / 2, 0, diameteri);
    rotate(radians(30));
    circle(diameteri / 2, 0, diameteri);
    rotate(radians(30));
    circle(diameteri / 2, 0, diameteri);
    rotate(radians(30));
    circle(diameteri / 2, 0, diameteri);
    rotate(radians(30));
    circle(diameteri / 2, 0, diameteri);
    rotate(radians(30));
    circle(diameteri / 2, 0, diameteri);
    rotate(radians(30));
    circle(diameteri / 2, 0, diameteri);
    pop();

  }





  



}

For my dynamic drawing, I was inspired by the torus flower of life (shown below), which is a base for a lot of Arabic art and architecture geometry. I wanted it to be interactive in the sense that when the two flowers are centered together, the flower changed colors. I also thought adding animation to the flower petals as you move up to down would look cool, and it changes in size f you move left to right as well.

Ghalya Alsanea – Looking Outward-02

Animal Imagination by LIA

artwork consisting of 50 unique iteration

Animal Imagination, created in 2018, is a collection of 50 unique artworks created by software artist LIA. Find her work here.

Taking references from nature and animals, the works present different geometric and abstract shapes, generative patterns and colors, which evolve uniquely in each of the two-minute digital paintings. From sea, to forest and animal references, each variation connects its coded base with an organic aesthetic, providing a sense of harmony between the digital and the natural.

I admire the coherence of each piece, from the colors, to the shapes used, to the movement of the graphics. Even though it is random, it does not feel that way. Each piece is harmonious as it stands. I think this is what shows the artist’s artistic sensibilities, because of her clear knowledge of color theory and proportions. I also admire that even though it is animated art, when you take a still image, it is beautiful on its own as well.

If I had to guess how the algorithm that generated the pieces worked, I would think possibly each piece was inspired by an image of a natural element (i.e. sky or wind). Using those colors(i.e. blues), the primitive shapes in each image (i.e. ellipse and eye shapes), and how it would naturally move (whether that be in concentric movements, linear, radial, etc.) From that information, she can create this coherent art. That would be my best guess.

Here are some examples of the pieces, find more here.