link: https://ars.electronica.art/aeblog/en/2020/04/10/women-in-media-arts-ai/
I look into the article “Women in Media Arts: Does AI think like a (white) man?”, where the author discusses the inherent discrimination in artificial intelligence due to the predominantly white male society. This is due to the fact that “the AI is only as good … as the data it feeds.” Thus if the internet is still populated by artwork from white males or drawn from a white male perspective, this inherent bias will forever exist in the AI’s algorithm.
This statement has been exemplified by an AI face recognition software, where the error rate is significantly high among women of color, displaying this inherent prejudice in the AI’s database. AI teams that lack diversity in gender and race would most definitely produce software that lacks a bigger perspective, and thus bares bias that favors white males.
The article has given examples of efforts to counteract this bias, such as the feminist data set, an ongoing multi-year project that collects feminist data such as artworks, essays, interviews, and books on feminism or from that a feminist’s perspective. This data set would help push diversity in the AI algorithm and broadens the perspective of the AI’s database.
]]>Heather’s Website: https://www.perfectplum.com/
Game Design: https://www.perfectplum.com/portfolio_category/gamedesign/
For this week I looked at the game developed by Heather Kelly. Specifically, I looked into her project SUPERHYPERCUBE, a VR first-person puzzler where the player controls a group of cubes to fit through holes in the wall, and the game increases in difficulty by increasing the block complexity. I really the game’s aesthetics, where the games take inspiration from retro arcade gaming aesthetics and transform them into 3D space. The animation of passing through the holes and rotation also feels dynamic and matches the aesthetics of the entire game.
Heather Kelly is an associate teaching professor at ETC CMU, where her work mainly focuses on underexplored aesthetic experiences and sensory interactions. She is the co-founder of kokoromi, where her works focus on experimental game collection. Throughout her career, she has worked on a broad variety of topics in the game industry, including AAA console games, smart toys, and web communities for girls.
Throughout her career, she has also produced many sex-inspired sensory designs, such as the game concept “Our first time”, “Lapis”, the game concept based on female orgasm, and her newest mobile application “OhMiBod”, an application controlling the OhMiBod brand vibrator.
]]>Link to his Website (MegaPixel): https://ahprojects.com/megapixels-glassroom/
Link to his Lecture: https://vimeo.com/354276111?embedded=false&source=video_title&owner=8053320
I investigated the lecture by Adam Harvey, an American artist based in Germany.
His research focuses on computer vision, privacy, and surveillance
technologies. After finishing his Bachelor of Mechanical Engineering at Penn
State, Harvey then pursued a master’s in interactive telecommunications at NYU.
Adam Harvey’s current works include MegaPixel, a facial recognition software
that compares the user’s facial qualities with a database and returns a face
from the database that has the highest similarities. This project mainly
creates awareness of the normalization of databasing people’s faces without
regulation. In many of his other works, such as DFACE, a face
Harvey’s strategy in his speech is in a continuous fashion, where he starts with
the previous project, explains details that lead to his current assignment, and
then starts giving an overview of his current projects. This gives the
audience a complete understanding of the process that led to the conclusion. He
also does a good job of simplifying the concept of his projects, making
it, making it easier for the audience to understand the final concept.
This is my project: the left and right mouse movements change the number of curves and the up and down spins the objects. Clicking the mouse changes the type of circle on the outside of the rose curve.
//Michael Li
//Section C
//set variables for points
var points = 100;
//set variable for state machine
var type = 0
function setup() {
createCanvas(400, 400);
frameRate(25)
}
function draw() {
background(50);
//add text
text("Click to change shape", 20, 30)
//move to the center of the canvas
translate(width/2, height/2)
//to change the shapes between spiral and flower
if (type == 0){
spiral() //spiral function
} else if(type == 1){
//repeat the function for flower
for(var i = 0; i <5; i++){
//different state
drawEpitrochoid(i)
}
}
//draw center flower
drawRoseCurve();
}
function drawRoseCurve() {
// RoseCurve
//constrain the mouse within the canvas
var conMX = (constrain(mouseX, 0, width))
var conMY = (constrain(mouseY, 0, width))
//map the height of the rosecurve
var h = map(conMY, 0, width, width*1/5, width*2/5)
var x;
var y;
//map the color to the mouse movement
var mapColorX = map(mouseX, 0, width, 100, 255)
var mapColorY = map(mouseY, 0, width, 100, 255)
//the color of the rosecurve changes depending on the outer elements
if(type == 0){
//blue and orange
var c = color(mapColorX, mapColorX/2+mapColorY/2, mapColorY)
} else if (type == 1){
//green and purple
var c = color(mapColorX/2+mapColorY/2, mapColorY, mapColorX)
}
var r;
//have the variable n only store odd numbers for better rose curve
var n = printOdd(int(map(conMX, 0, width, 3, 20)))
noFill()
strokeWeight(1)
stroke(255)
circle(0, 0, h*2)
fill(c)
stroke(c);
//draw rose curve
beginShape();
for (var i = 0; i < points; i++) {
var theta = map(i, 0, points, 0, PI);
r = h*cos(theta*n)
x = r*cos(theta+conMY)
y = r*sin(theta+conMY)
curveVertex(x, y);
}
endShape(CLOSE)
}
//draw spiral
function spiral(){
//constrain mouse within the canvas
var conMY = (constrain(mouseY, 0, width))
//map value to mouseY
var a = map(conMY, 0, width, width*1/5, width*2/5)
var x;
var y;
var r;
noFill()
push()
beginShape()
//map number of points to mouse Y
//spiral grows as mouseY moves
var mapYPoints = map(mouseY, 0, height, 25, 100)
//draw spiral
for (var u = 0; u < mapYPoints; u++) {
//theta depend on mouse Y
//spiral spins
var theta = map(u, 0, mapYPoints/10, 0, TWO_PI);
//circle size depend on mouseY
var mapSize = map(u, 0, mapYPoints, 40, 10)
r = ((theta)**(1/2))*a/4
x = r*cos(theta+10)
y = r*sin(theta+10)
curveVertex(x, y)
stroke(255-u*4)
fill(255-u*4)
//draw circles on the spiral
circle (x, y, mapSize/2)
stroke(200)
noFill()
}
endShape()
}
//draww epitrochoid
function drawEpitrochoid(rot){
push()
//constrain mouseX and mouseY
var conMX = (constrain(mouseX, 0, width))
var conMY = (constrain(mouseY, 0, width))
var a = map(conMY, 0, width, width*1/5, width*2/5)
var b = constrain(a / int(conMX / 30), 0, 20)
print(a)
var x;
var y;
//rotates the shape each loop
rotate(rot+conMY/10)
noFill()
stroke(200)
push()
beginShape()
//fill the shape with lower opacity to create layering effect
fill(200, 200, 200, 50)
var mapYPoints = map(mouseY, 0, height, 0, 25)
//draw epitrochoid
for (var u = 0; u < 100; u++) {
var theta = map(u, 0, 100, 0, TWO_PI);
x = rot/2*(a+b)*cos(theta)-b*cos(((a+b)/b)*theta);
y = rot/2*(a+b)*sin(theta)-b*sin(((a+b)/b)*theta);
curveVertex(x, y)
}
endShape(CLOSE)
pop()
}
//only store odd numbers in a variable
function printOdd(x){
if(x%2 == 0){
return x-1
} else{
return x
}
}
//swtich the type when mouse pressed
function mousePressed() {
type += 1
if(type > 1){
type = 0
}
}Link: https://www.bewitched.com/song.html
\I’ve investigated the data visualization software, Shape of Music, created by Martinez Wattenberg. The software detects rhythm similarities in a piece of lyrics and diagrams similar parts by creating a connection with half discs.
What I really admire about this program is the brand-new way of representing musical rhythms, where instead of noting musical notes through sheet music, the program diagrams patterns. This helps visualize patterns in music, where instead of looking through sheet music to find a similar rhythm in a song, one can look at the connections through the lines, and see what parts of the song are most frequently repeated.
The software is entirely written in java and uses MIDI files to analyze the rhythm, where, unlike other common file types, a MIDI file contains a description of the notes which makes the analysis of the letters much more amendable. The MIDI files can also be separated into different tracks and analyzed separately. The algorithm I suppose is programmed to look for similar patterns in a range of note descriptions and create a connection through an arc diagram as a connection to map the similarities.
It is obvious that the author is keen on simplicities in diagraming, and he has also said on his website that he has taken inspiration from other arc diagrams, which is a simple yet effective form of diagraming to communicate information.
]]>Link: https://www.slam.org/collection/objects/27407/
The piece I want to focus on is Jackson pollock’s Number three. In this
painting, he “layered multiple strands of paint” to generate the painting
where the colors seem to be interwoven together. What I really admire by the
the piece is its apparent order despite the randomness in its creation, where
through the layering of the painting, the artist still creates this hierarchy
between the different colors of paint, demonstrating order in the chaos.
The randomness executed by the artist is a form of pseudo-randomness, where
although the pollock seems to layer on the paint randomly, he still created
the painting with an intention of not creating a focal point, thus if the
painting medium is in control of the artist, the randomness executed will
definitely, be influenced by the artist’s creative intentions.
Despite the apparent random qualities, you can still see the artistic
sensibilities of Jackson, where the painting still displays a sense of unity
with color. His artistic sensibilities are also demonstrated in the flow of
the paint, where the artist creates different thicknesses of paint lines and
curvature through how fast and how hard he pours the paint – which is another
demonstration of pseudo-randomness.
This is my abstract clock: The candles’ fire represents the passing of each second, the height of the candle represents the hour of the day and the sheets of paper represent the minutes remaining in the hour.
//Michael Li
//Section C
function setup() {
createCanvas(480, 480);
background(220);
text("p5.js vers 0.9.0 test.", 10, 15);
background (220)
}
//write object for candle dimensions
var candle = {xPos: 130, yPos: 120, w: 50, h: 280}
//establish variables for the timer
var timerS;
var timerM;
var timerH;
//Pen x position
var penX = 370;
//pen movement indedx
var moveP = 0.3;
function draw() {
background(62, 35, 16); //dark brown
timerM = minute(); //assign minute function for variable
//pages
fill(76, 135, 74); //green book cover
rect(190, 420, 230, 20); //draw bottom cover
//alternate the page color between white and grey for distinction
//use for loop to draw number of pages depending on the minute
for (var i = 0; i<=60-timerM; i++){
noStroke();
if (i%2==0){
fill(255);
} else {
fill(200);
}
//draw pages
rect(190, 420-(3*i), 230, 3);
}
//draw pen function
drawPen(penX, 235+3*timerM);
//pen moves left and right
penX +=moveP;
//constrain pen in a range
if (penX>= 380 || penX <= 350){
moveP = -moveP;
}
//draw the panel with the hour carvings
drawBackPanel(80, 100);
//draw the table
fill(154, 121, 102);
rect(0, height*9/10, width, height*9/10);
//draw hour carvings behind the candle
//for loop to draw the larger lines
for (var i = 0; i <=12; i++){
strokeWeight(3);
stroke(161, 158, 75);
line(100, 350.4-(9.6*2*i), 215, 350.4-(9.6*2*i));
//drawing the shorter lines
} for (var i = 0; i <=12; i++){
strokeWeight(2);
stroke(161, 158, 75);
line(120, 360-(9.6*2*i), 195, 360-(9.6*2*i));
}
//drawing the body of the candle
drawCandleB(candle.xPos, candle.yPos, candle.w, candle.h);
//drawing the base of the candle
drawBase(candle.xPos-10, 360);
//assign hour to variable timerH
timerH = hour();
//map the hour to fit the candle length
var hourMap = map(timerH/2, 0, 12, 240, 10);
//candle length changes depending on the hour
candle.yPos = 120 + 240 - hourMap;
candle.h = hourMap + 30;
}
//function for drawing the candle's body
function drawCandleB (x, y, w, h){
//establish remapped value for hour
var hourMap = map(timerH/2, 0, 12, 240, 30);
fill(250, 244, 192); //light yellow
noStroke()
rect(x, y, w, h); //candle body
//function for drawing the fire
drawCandleFire(x, y, w, h);
//function for drawing the wax dripping
drawCanldeT(x, y, w);
//function for drawing the halo of light
drawLight(x, y, w, h, hourMap);
}
//function for drawing the wax
function drawCanldeT (x, y, w){
//set lineweight
strokeWeight(8);
stroke(220, 213, 142); //darker yellow
line(x+2, y, x+w-2, y);//horizontal line
//two drips
line(x+w*3/5, y, x+w*3/5, y+w/2);
line(x+w*4/5, y, x+w*4/5, y+w*3/4);
}
//function for drawing the fire
function drawCandleFire (x, y, w, h){
//establish variable for the tip of the fire
//fire positions
var fTipy;
var fTipx;
//variable for seconds for fire flicker
timerS = second();
//fire flickers each second
if (timerS %2 == 0){
fTipy = y-w*4/5;
fTipx = x+w/2;
} else {
fTipy = y-w*4/5;
fTipx = x+w/2 - 10;
}
noStroke();
//draws the fire
fill(246, 74, 22); //red
ellipse(x+w/2, y-w/5, w/4, w/3);
triangle(fTipx, fTipy, x+w*5/8, y-w/5, x+3*w/8, y-w/5);
}
//halo of light
function drawLight (x, y, w, h, hour){
timerS = second();//establish the second variable
//halo grows and shrinks each second
if (timerS %2 == 0){
hourMap = hour+10;
} else {
hourMap = hour-5;
}
noStroke();
fill(249, 246, 152, 20);//yellow with light transparency
ellipse(x+w/2, y-w*2/5, hourMap*2, hourMap*2); //draws light
}
//function drawing the back panel
function drawBackPanel (x, y){
strokeWeight(9);
stroke(225, 176, 104); // light brown
//outer framing
line(x, y, x, y+350);
line(x+155, y, x+155, y+350);
arc(x+77, y, x+75, y+55, PI, 0);
//inner board
noStroke();
fill(186, 167, 135);
ellipse(x+77, y, x+75, y+55);
rect(x, y, x+75, y+250);
}
//candle base
function drawBase (x, y){
fill(100); //grey
//top and bottom qadralateral
quad(x, y, x+70, y, x+60, y+20, x+10, y+20);
quad(x+10, 420, x+60, y+60, x+70, y+73, x, y+73);
//middle rectangle
fill(150);
rect(x+10, y+20, 50, 40);
}
//pen
function drawPen (x, y){
push();
translate(x, y); //move to the right
rotate(radians(315)); //rotate for pen mvement
noStroke();
fill(200); //grey
//draws pen
rect(0, 0, 100, 5);
fill(255); //white
triangle(0, 0, 0, 5, -5, 2.5);
pop();
}
I want to create textile patterns inspired by traditional Chinese symbols
//Michael Li
//Section C
var radi = 30
function setup() {
createCanvas(755, 630);
background(220);
text("p5.js vers 0.9.0 test.", 10, 15);
background (220);
}
function draw() {
background(30, 28, 27);
var color = 0; //set variable color
//create a line with the for loop
for (var x = 0; x <= width+80; x += 4.2*radi){
color += 1; // increment color by 1
if (color % 2 == 1){ // test color
stroke(255, 204, 51); //bright yellow
} else {
stroke(182, 156, 129); //grey
}
//create a grid
for(var y = 0; y<= height+80; y += 4.2*radi){
color += 1;
//test for color
if (color % 2 == 1){
stroke(255, 204, 51); //bright yellow
} else {
stroke(182, 156, 129); //grey
}
//two if statements in each for loop creates the alternating color pattern
pattern1(x, y); // call to draw function pattern 1
print(color.toString());
}
}
//draw a grid of pattern two
//reposition x and y initial position
for (var x = 63; x <= width + 80; x += 4.2*radi){
for(var y = 0; y <= height + 80; y += 4.2*radi){
pattern2(x, y); //draw pattern 2
}
}
noLoop();//draw once
}
var flip1 = 1; //set varibales for flip
var flip2 = 1;
function pattern1(x, y){
strokeWeight(2);
noFill();
//only stroke no fill
push();
translate(x, y); // translate object to input x and y
//top and bottom semi circle
arc(0, 0, radi*2, radi*2, PI+radians(7), 0-radians(7));
arc(0, 0, radi*2, radi*2, 0+radians(7), PI-radians(7));
//middle long line
line(0-radi/1.3, 0, 0+radi/1.3, 0);
var xSpaing = 3.5;//set a uniformed spacing
//draw the same line 4 time
for (var i = 0; i<= 4; i += 1){
//test which loop number it is to flip the drawing
if (i == 1 || i == 3){
flip1 = -flip1; //on first and third loop, flip the x position
} else if (i == 2){
flip2 = -flip2; //on the second loop, flip the y position
}
line(0-flip1*radi/1.1, 0-(flip2*6),
0-flip1*radi/1.5, 0-(flip2*6)); // horizontal short
line(0+(flip1*xSpaing), 0+(flip2*radi/1.1),
0+(flip1*xSpaing), 0+(flip2*radi/1.3)); //verticle short 1
line(0+(flip1*xSpaing), 0+(flip2*radi/1.8),
0+(flip1*xSpaing), 0+(flip2*radi/2.5)); // verticle short 2, closer to middle
line(0+(flip1*20), 0+(flip2*radi/2.5),
0+(flip1*xSpaing), 0+(flip2*radi/2.5)); // horizontal longer, at 4 corners
}
//middle line top and bottom
line(0+radi/2.2, 0+6, 0-radi/2.2, 0+6); //bottom middle
line(0+radi/2.2, 0-6, 0-radi/2.2, 0-6); //top middle
//four small arcs
arc(0, 0, radi*1.6, radi*1.6, radians(30), radians(63));
arc(0, 0, radi*1.6, radi*1.6, radians(85+30), radians(85+63));
arc(0, 0, radi*1.6, radi*1.6, radians(180+30), radians(180+63));
arc(0, 0, radi*1.6, radi*1.6, radians(265+30), radians(265+63));
pop();
push();
translate(x, y); //translate to input x and y
rotate(radians(45)); // rotate around x, y by 45 degrees
rectMode(CENTER); //draw rect around origin
//draw rectangle to frame the pattern
rect(0, 0, radi*3, radi*3);
//draw 4 times
for(var i = 0; i<=4; i +=1){
//test for which loop increment
if (i == 1 || i == 3){ //first and third flip the x position
flip1 = -flip1;
} else if (i == 2){ //second loop flip the y position
flip2 = -flip2;
}
//draw 3 small squares by the corner of the big square
//repeat for each corner using the for loop
rect(flip1*1.5*radi, flip2*1.5*radi, radi, radi);
rect(flip1*1.34*radi, flip2*1.34*radi, radi/4, radi/4);
rect(flip1*0.9*radi, flip2*1.34*radi, radi/4, radi/4);
rect(flip1*1.34*radi, flip2*0.9*radi, radi/4, radi/4);
}
pop()
}
//second pattern, new arguments g and h
function pattern2 (g, h){
push();
translate(g, h); // translate origin to g, h
rotate(radians(45)); //rotate around origin by 45 degrees
rectMode(CENTER); // set rectMode
strokeWeight(2);
stroke(255, 204, 51, 100); // grey line color
fill(182, 156, 129, 100); // lower transparency
rect (1.5*radi, 1.5*radi, radi*1.8, radi*1.8); // medium size square
pop();
push();
translate(g, h);
stroke(182, 156, 129);
rectMode(CENTER);
rect(0, 2.1*radi, radi/3, radi/3); // small square inside
line(0, 0, 0, height); //verticle lines
pop();
}I looked at the project “Celestial Beings” by Jonas Pfeiffer, where he used computer graphics to create angles that are true to the description in the Old Testament. What I really admire about this object is that the artist utilizes elements the audience is familiar with but rearranges the elements to create something completely out of imagination. The freakish appearance with the familiar elements allows the audience to be both terrified and linger on the image. And through the manipulation of color, lighting, and other factors, the author made it resemble the description of an angle. I find it astonishing that computer graphics can realize one’s imagination or recreate mythical creatures that wouldn’t exist in real life.
It is most likely the author has modeled the objects in 3d modeling software and animated the object and put it through a renderer. The model might be generated through an algorithm that would pattern existing elements together, as shown by the clear repetitive elements in the angels.
It can be comprehended that the artist is interested in Christian mythology, but enjoy modern texturing as shown in the rendering style of the angels. The modern accent is also displayed in the rendering of the “Orphan”, where there are elements that seem to be written by markers on the giant eye.
Link: https://www.behance.net/gallery/152115365/Celestial-Beings
]]>This is my string art. I wanted to make an eye out of strings and the eye follows the x-coordinate of the mouse. Each layer of the eye is remapped to create a 3-dimensional effect. The spiral further extends the mystical feeling the eye gives off.
//Michael Li
//Section C
var dx1;
var dy1;
var dx2;
var dy2;
var numLines = 70;
function setup() {
createCanvas(400, 300);
background(200);
}
function draw() {
background("darkred");
//remapped values for eyeball translation
var tranX1 = constrain(map(mouseX, 0, 400, 120, 280), 120, 280)
var tranX2 = constrain(map(mouseX, 0, 400, 130, 270), 130, 270)
var tranX3 = constrain(map(mouseX, 0, 400, 140, 260), 140, 260)
var tranX4 = constrain(map(mouseX, 0, 400, 150, 250), 150, 250)
//set variable for rotation
var rot = 90
//eye white
stroke(255);
//two lines bottom left and top right
line(0, 150, 250, 400);
line(150, -100, 400, 150)
//calculate the line length and divide by number of lines
//for gap between each line
dx1 = (250-0)/numLines;
dy1 = (400-150)/numLines;
dx2 = (400-150)/numLines;
dy2 = (150+100)/numLines;
//set initial points for line
var x1 = 0;
var y1 = 150;
var x2 = 150;
var y2 = -100;
//for loop, i = number of lines drawn
//line position + gap width to drawn each line
for (var i = 0; i <= numLines; i += 1) {
line(x1, y1, x2, y2);
x1 += dx1;
y1 += dy1;
x2 += dx2;
y2 += dy2;
}
//repeat the process diagnally.
//draw line top right and bottom left
line(150, 400, 400, 150);
line(0, 150, 250, -100)
//calculate the line length and divide by number of lines
//for gap between each line
dx1 = (400-150)/numLines;
dy1 = (150-400)/numLines;
dx2 = (250-0)/numLines;
dy2 = (-100-150)/numLines;
//set initial points for line
x1 = 150;
y1 = 400;
x2 = 0;
y2 = 150;
//for loop, i = number of lines drawn
//line position + gap width to drawn each line
for (var i = 0; i <= numLines; i += 1) {
line(x1, y1, x2, y2);
x1 += dx1;
y1 += dy1;
x2 += dx2;
y2 += dy2;
}
// spiral controlled by the mouseY position
//use push and pop to limit the conditions inside
push()
//tranlsate origin to the middle of the canvas
translate(200, 150)
//set variables for the line positions
var x =100
var y = 100
var dist = 50 //distance between each line
var rot2 = 5 //set value for rotation degree
var rotation = constrain(map(mouseY, 0, 300, -500, 100), -500, 100)
//sets value of y, the loops repeats for 200 times
for (y = 100; y <= 300; y += 1){
rotate (radians(rot2)) //rotation of the line around the origin
stroke("lightyellow") //stroke color
//draw line to form the spiral
line(rotation, y, x+dist, y+dist)
rot2 += 0 //constant rotation
}
pop()
//eyeball formation
//use written function eyeBall below to draw the eyeball formation
//Innermost DarkRed
push()
stroke("darkred")
//translate the position based on the mouseX position
//use tranX variables for remapped values
translate(tranX1, 150);
//use for loop to repeat the Eyeball Function
for (var spin = 0; spin <=6; spin += 1){
//written function to draw components of the eyeballs
eyeBall(30, 30, 30, 30)
rotate(radians(rot))
//rot adds 90 degrees each time the loop runs
rot += 90
}
pop()
//2nd layer lightblue
push()
stroke("lightblue")
//use remapped value for translation based on mouseX
translate(tranX2, 150);
//rotate 45 degrees for variation from the last component
rotate(radians(45))
//for loop to repeat the eyeBall function
for (var spin = 0; spin <=6; spin += 1){
//Eyeball function decrease value to increase size
eyeBall(20, 20, 20, 20)
rotate(radians(rot))
//rot adds 90 degrees each time the loop runs
rot += 90
}
pop()
//3rd layer light green
push()
//use remapped value for translation based on mouseX
translate(tranX3, 150);
//rotate 90 degrees for variation from the last compone nt
rotate(radians(90))
stroke("lightgreen")
//use for loop to repeat the eyeBall function
for (var spin = 0; spin <=6; spin += 1){
//eyeBall function increases component size
eyeBall(10, 10, 10, 10)
rotate(radians(rot))
//addes rotation value for the circular shape
rot += 90
}
pop()
//4th layer dark grey
push()
//use remapped value for tranlsation based on mouseX
translate(tranX4, 150);
//rotate 45 degrees for variation
rotate(radians(45))
stroke(30) //dark grey
for (var spin = 0; spin <=12; spin += 1){
//increase in size
eyeBall(-10, -10, -10, -10)
rotate(radians(rot))
//adds 45 degrees for circular form
rot += 45
}
pop()
//eye lids
stroke("orange");
//draw two lines
line(0, 150, 250, 400);
line(150, 400, 400, 150);
//calculate length of the line and divide by number of lines to draw
dx1 = (250-0)/numLines;
dy1 = (400-150)/numLines;
dx2 = (400-150)/numLines;
dy2 = (150-400)/numLines;
//set variables for the initial positions of the line
var x1 = 0;
var y1 = 150;
var x2 = 150;
var y2 = 400;
//use for loop to continously draw the lines
for (var i = 0; i <= numLines; i += 1) {
line(x1, y1, x2, y2);
x1 += dx1;
y1 += dy1;
x2 += dx2;
y2 += dy2;
}
//draw two lines
line(0, 150, 250, -100)
line(150, -100, 400, 150)
//calculate length of the lines and divide by number of lines to draw
dx1 = (250-0)/numLines;
dy1 = (-100-150)/numLines;
dx2 = (400-150)/numLines;
dy2 = (150+100)/numLines;
//set variables for the initial positions of the line
var x1 = 0;
var y1 = 150;
var x2 = 150;
var y2 = -100;
//use for loop to continously draw the lines
for (var i = 0; i <= numLines; i += 1) {
line(x1, y1, x2, y2);
x1 += dx1;
y1 += dy1;
x2 += dx2;
y2 += dy2;
}
}
//set function to draw the eyeball components
function eyeBall (a, b, c, d){
//set two lines
line(a-40, b-120, c-100, d+40)
line(a+40, b-120, c-120, d-40)
//find the length of the lines divided by the number of lines
dx1 = (c-100-(a-40))/numLines;
dy1 = (d+40-(b-120))/numLines;
dx2 = (c-120-(a+40))/numLines;
dy2 = (d-40-(b-120))/numLines;
//set values for inital position
var x1 = a-40;
var y1 = b-120;
var x2 = c+40;
var y2 = d-120;
//use for loops to continously draw the lines.
for (var i = 0; i <= numLines; i += 1) {
line(x1, y1, x2, y2);
x1 += dx1;
y1 += dy1;
x2 += dx2;
y2 += dy2;
}
}