var birds = []
var trees = []
var deadTrees = []
var timberJacks = []
var angle = 70
var angle2 = 50
var x = 30
var y = 50
function setup() {
createCanvas(600, 500)
frameRate(10)
}
function draw() {
//draw backgrounds
push()
drawDesertAndSky()
drawNightWorld()
drawSun()
pop()
//rotating lines for the sun
push()
translate(150,0)
for (y = 50; y <= 300; y += 2){
rotate (radians(angle))
stroke (255, 215, 0)
line (30, y, x+2, y)
}
pop()
push()
for (x = 30; x <= 400; x += 5){
rotate (radians(angle2))
stroke (255, 255, 100)
line (x-25, x-40, x-40, 0.8*40)
}
pop()
//draw trees and deadtrees
push()
for (var i = 0; i < trees.length; i++){
trees[i].displays()
}
pop()
push()
for (var i = 0; i < deadTrees.length; i++){
deadTrees[i].showss()
}
pop()
//draw timberjacks
push()
updateAndDisplayTimberJacks()
addNewTimberJackWithSomeRandomProbability()
pop()
//draw birds
push()
updateAndDisplayBirds();
removeBirdsThatHaveSlippedOutOfView();
addNewBirdsWithSomeRandomProbability();
pop()
//texts
push()
fill(0,100,0)
textSize(18);
strokeWeight(3)
stroke(0,100,0)
text("CURRENT WORLD",100,70)
textSize(16);
text("WE DON'T WANT OUR WORLD DESTROYED!",10,100)
strokeWeight(2)
text("Click to Plant Trees Here! :)",40,150)
fill(0)
textSize(20)
strokeWeight(3)
stroke(0)
text("FALLEN WORLD",430,50)
textSize(16);
strokeWeight(2)
text("Klik to pLanT dEAd TrEEs:(",400,80)
pop()
}
//functions that draw the background
function drawDesertAndSky(){
noStroke()
fill(237, 201, 155)//desert
rect(0,170,400,330)
fill(135,206,235)//sky
rect(0,0,400,170)
}
function drawNightWorld(){
noStroke()
fill(48,25,52)
rect(400,170,200,330)
fill(216,191,216)
rect(400,0,200,170)
}
function drawSun(){
translate(150,0)
fill(255,200,0)//sun
ellipse(0,0,100,100)
line(50,50,85,85)
line(75,20, 125, 30)
line(20,75, 25 ,125)
}
//interactive mousePressed function to draw trees
function mousePressed(){
if (mouseX <= 400){
var tree_instance = makeTree(mouseX, constrain(mouseY,150,550), 0)//plant live trees on the ground
trees.push(tree_instance)
}else{
var deadTree_instance = makeDeadTree(mouseX, constrain(mouseY,180,550))
deadTrees.push(deadTree_instance)
}
}
//the tree & dead tree functions
function makeTree(tx, ty, th){
var tree = {x: tx, y: ty, height: th,
displays: treeDraw}
return tree
}
function treeDraw(){
fill(0,255,0)
triangle(this.x,this.y-this.height,this.x-7,this.y+15-this.height,this.x+7,this.y+15-this.height)
fill(50,30,0)
rect(this.x-2,this.y+15-this.height,4,10+this.height)
//trees grow
if(this.height <= 10){
this.height+=0.1
}
}
function makeDeadTree(tx, ty){
var deadTree = {x: tx, y: ty,
showss: deadTreeDraw}
return deadTree
}
function deadTreeDraw(){
push()
fill(129)
triangle(this.x+10,this.y-4,this.x+10,this.y+8,this.x+25,this.y)
rect(this.x,this.y,10,4)
pop()
}
//timberjacks
function makeTimberjack(jx, jy){
var timberJack = {x: jx, y: jy,
display: timberJackDraw,
speedX: random(3,6),
speedY: random(-1,1),
move: timberJackMove}
return timberJack
}
function timberJackDraw(){
push()
strokeWeight(1)
ellipse(this.x,this.y,9,12)
//body
line(this.x,this.y+6,this.x,this.y+20)//body
line(this.x,this.y+15,this.x+5,this.y+15)//left hand
line(this.x,this.y+15,this.x+5,this.y+12)//right hand
line(this.x,this.y+20,this.x+5,this.y+27.5)//right leg
line(this.x,this.y+20,this.x-5,this.y+27.5)//left leg
//eyes
ellipse(this.x-1.5,this.y-1,0.5,0.5)
ellipse(this.x+1.5,this.y-1,0.5,0.5)
arc(this.x, this.y+5, 6, 7.5, PI+1,-1)
//hair
line(this.x,this.y-6,this.x,this.y-11)
line(this.x-1.5,this.y-5.5,this.x-5,this.y-9)
line(this.x+1.5,this.y-6.5,this.x+5,this.y-9)
pop()
//electric saw
push()
noStroke()
fill(0)
rect(this.x+5,this.y+10,5,8)
rect(this.x+7,this.y+12,11,4)
triangle(this.x+18,this.y+12,this.x+18,this.y+16,this.x+23,this.y+12)
pop()
}
function timberJackMove() {
this.x += this.speedX;
this.y += this.speedY
}
function addNewTimberJackWithSomeRandomProbability() {
// With a probability, add a new timberjack to the end.
var newTimberJackLikelihood = 0.05;
if (random(0,1) < newTimberJackLikelihood) {
timberJacks.push(makeTimberjack(0,random(200,470)));
}
}
function updateAndDisplayTimberJacks(){
// Update the timberjacks' positions, and display them.
for (var i = 0; i < timberJacks.length; i++){
timberJacks[i].move();
timberJacks[i].display();
}
}
function removeTimberJacksThatHaveSlippedOutOfView(){
var timberJacksToKeep = [];
for (var i = 0; i < timberJacks.length; i++){
if (timberJacks[i].x > 0) {
timberJacksToKeep.push(timberJacks[i]);
}
}
timberJacks = timberJacksToKeep;
}
//birds
function removeBirdsThatHaveSlippedOutOfView(){
var birdsToKeep = [];
for (var i = 0; i < birds.length; i++){
if (birds[i].x > 0) {
birdsToKeep.push(birds[i]);
}
}
birds = birdsToKeep; // remember the surviving birds
}
function updateAndDisplayBirds(){
// Update the birds' positions, and display them.
for (var i = 0; i < birds.length; i++){
birds[i].move();
birds[i].display();
}
}
function addNewBirdsWithSomeRandomProbability() {
// With a probability, add a new bird to the end.
var newBirdLikelihood = 0.02;
if (random(0,1) < newBirdLikelihood) {
birds.push(makeBird(width,random(20,160),0));
}
}
// method to update position of birds every frame
function birdMove() {
this.x -= this.speedX;
this.y += this.speedY
}
// draw the birds
function birdDisplay() {
push()
fill(this.c)
triangle(this.x,this.y,this.x+6,this.y+1.5,this.x+6,this.y-1.5)//beak
ellipse(this.x+9,this.y,7,7) //head
ellipse(this.x+17,this.y+4,15,8)//body
arc(this.x+18, this.y, 10, 10, -0.7, PI-0.7,CHORD)//wings
ellipse(this.x+8,this.y-1,1,1)//eyes
pop()
}
//make new bird with different location, color, speedXY
function makeBird(birthLocationX,birthLocationY,color) {
var bird = {x: birthLocationX,
y: birthLocationY,
c: color,
speedX: random(5,8),
speedY: random(-1.5,1.5),
move: birdMove,
display: birdDisplay}
return bird;
}
Since the theme for the project is climate change, I want to write an interactive program that presents scenery that compares a current world and a fallen world to warn people about the consequence of climate change.
The inspiration comes from the trees I was drawing in project 11. I thought of trees immediately when the topic was said to be climate change. Then I had the idea that comparison would be the best way to send out a message of warning. Therefore, the timber jacks in my program were born to play the role of antagonist; the night world is created to demonstrate the potential consequence if we don’t take climate change seriously.
For the interaction part, I want users to be able to plant trees themselves. In the current world, they can plant a tree by clicking on the canvas and the tree would grow gradually to a maximum height. But if the user tries to plant trees in the fallen world, the trees would turn out to be dead trees. This is to imply that once climate change gets to a point, there is no turning back (for a long long time).
Though I did a lot of decorations like the birds and the transformations and loops just for the rays of sunlight, I feel like I could make the scenery more real if I have more time. I might want to use sin wave to draw the desert; I might draw more detailed timber jacks; I might add clouds. But overall, I feel like the program is quite complete, as the message is delivered and I believe that I’ve done all 6 technical merits.
function setup() {
createCanvas(400,400);
// create an initial collection of buildings
for (var i = 0; i < 4; i++){
var cx = random(width);
var cy = random(320,350)
cars[i] = makeCar(cx,cy,color(random(255),random(255),random(255)),random(25,45));
}
for (var i = 0; i < 3; i++){
var bx = random(width);
var by = random(20,150)
birds[i] = makeBird(bx,by,color(random(255),random(255),random(255)));
}
frameRate(10);
}
var cars = [];
var birds = [];
function draw() {
push()
fill(170,170,255)
rect(0,0,400,270)
fill(0,170,0)
rect(0,270,400,130)
drawRoad()
drawSun()
for (i=0; i<=50; i++){
drawTree(i*50+20,260)
}
updateAndDisplayCars();
removeCarsThatHaveSlippedOutOfView();
addNewCarsWithSomeRandomProbability();
updateAndDisplayBirds();
removeBirdsThatHaveSlippedOutOfView();
addNewBirdsWithSomeRandomProbability();
}
function drawSun(){
fill(255,200,0)
ellipse(0,0,100,100)
}
function drawTree(x,y){
fill(0,255,0)
triangle(x,y,x-7,y+15,x+7,y+15)
fill(50,30,0)
rect(x-2,y+15,4,10)
}
function drawRoad(){
fill(0)
rect(0,300,400,60)
fill(255,255,0)
for (i = 0; i <= 10; i++){
rect(50*i+15,325,20,5)
}
}
function removeCarsThatHaveSlippedOutOfView(){
var carsToKeep = [];
for (var i = 0; i < cars.length; i++){
if (cars[i].x > 0) {
carsToKeep.push(cars[i]);
}
print(cars[i])
}
cars = carsToKeep; // remember the surviving cars
}
function updateAndDisplayCars(){
// Update the cars's positions, and display them.
for (var i = 0; i < cars.length; i++){
cars[i].move();
cars[i].display();
}
}
function addNewCarsWithSomeRandomProbability() {
// With a probability, add a new car to the end.
var newCarLikelihood = 0.05;
if (random(0,1) < newCarLikelihood) {
cars.push(makeCar(0,random(305,345),color(random(255),random(255),random(255)),random(25,45)));
}
}
// method to update position of cars every frame
function carMove() {
this.x += this.speed;
}
// draw the cars
function carDisplay() {
push()
fill(this.c)
rect(this.x,this.y,this.l,10)
rect(this.x+8,this.y-10,14,10)
ellipse(this.x+11,this.y+8,10,10)
ellipse(this.x+26,this.y+8,10,10)
pop()
}
//make new car with different XY location, color, length, and speed
function makeCar(birthLocationX,birthLocationY,color,carLength) {
var car = {x: birthLocationX,
y: birthLocationY,
c: color,
l: carLength,
speed: random(2,10),
move: carMove,
display: carDisplay}
return car;
}
function removeBirdsThatHaveSlippedOutOfView(){
var birdsToKeep = [];
for (var i = 0; i < birds.length; i++){
if (birds[i].x > 0) {
birdsToKeep.push(birds[i]);
}
print(birds[i])
}
birds = birdsToKeep; // remember the surviving cars
}
function updateAndDisplayBirds(){
// Update the cars's positions, and display them.
for (var i = 0; i < birds.length; i++){
birds[i].move();
birds[i].display();
}
}
function addNewBirdsWithSomeRandomProbability() {
// With a probability, add a new bird to the end.
var newBirdLikelihood = 0.05;
if (random(0,1) < newBirdLikelihood) {
birds.push(makeBird(width,random(20,160),color(random(255),random(255),random(255))));
}
}
// method to update position of birds every frame
function birdMove() {
this.x -= this.speedX;
this.y += this.speedY
}
// draw the birds
function birdDisplay() {
push()
fill(this.c)
triangle(this.x,this.y,this.x+6,this.y+1.5,this.x+6,this.y-1.5)//beak
ellipse(this.x+9,this.y,7,7) //head
ellipse(this.x+17,this.y+4,15,8)//body
arc(this.x+18, this.y, 10, 10, -0.7, PI-0.7,CHORD)//wings
ellipse(this.x+8,this.y-1,1,1)//eyes
pop()
}
//make new bird with different location, color, speedXY
function makeBird(birthLocationX,birthLocationY,color) {
var bird = {x: birthLocationX,
y: birthLocationY,
c: color,
speedX: random(5,8),
speedY: random(-1.5,1.5),
move: birdMove,
display: birdDisplay}
return bird;
}
For this project, I created 2 arrays of objects: cars and birds. Cars have random color, length, speedX, and y position on the road; birds have random color, y position in the sky, speedX, and speedY.
]]>Link of the article:https://ars.electronica.art/aeblog/en/2020/04/10/women-in-media-arts-ai/
The article I looked into is Women in Media Arts: Does AI think like a (white) man? The article addresses the issue that because an AI is designed by white men and tested by white men, when a woman goes in front of the AI, the AI cannot even recognize her. In response to this kind of issue and to increase the visibility of women working in media art, Women in Media Arts – a comprehensive database devoted specifically to women in media art – emerges. It intends to increase public consciousness and to focus on role models for girls and women.
]]>//This is a original ball game where two players play against each other
//by trying their best to get the ball to the other side
//Crowds are cheering whenever a player gets the ball to the other side
//as time past, players become tired.Play suffering sound instead of ‘haha’
//the game ends with a player not able to get the ball to the other side
//canvas turns black and the last sound is the man suffering.
//This is a original ball game where two players play against each other
//by trying their best to get the ball to the other side
//Crowds are cheering whenever a player gets the ball to the other side
//as time past, players become tired.Play suffering sound instead of 'haha'
//the game ends with a player not able to get the ball to the other side
//canvas turns black and the last sound is the man suffering.
var manSuffering;
var ballBouncing;
var crowdCheering;
var womanHaha;
var womanSuffering;
var manHaha;
var x = 50
var y = 170
var vx = 100
var vy = 1
//loading the sounds
function preload() {
manSuffering = loadSound("http://localhost:8000/man suffering.wav");
ballBouncing = loadSound("http://localhost:8000/ball bouncing.wav");
crowdCheering = loadSound("http://localhost:8000/crowd cheering.wav");
womanHaha = loadSound("http://localhost:8000/woman haha.wav");
manHaha = loadSound("http://localhost:8000/man haha.wav");
womanSuffering = loadSound("http://localhost:8000/woman suffering.wav");
}
function setup() {
createCanvas(400, 400);
createDiv("p5.dom.js library is loaded.");
useSound();
frameRate(10)
}
function soundSetup() { // setup for audio generation
manSuffering.setVolume(0.5);
ballBouncing.setVolume(0.5)
crowdCheering.setVolume(0.5)
womanHaha.setVolume(0.5)
womanSuffering.setVolume(0.5)
manHaha.setVolume(0.5)
}
function draw() {
background(192,100,150)
//draws the court
court()
//draws a moving male player
playerMale(20,random(100,220))
//draws a moving female player
playerFemale(380,random(100,220))
//draws a moving ball
ball()
//draws 7 spectators
for (var i = 0; i < 4; i++){
push()
fill(random(170,255))
spectator(50+100*i,300)
pop()
}
for (var i = 0; i < 3; i++){
push()
fill(random(170,255))
spectator(100+100*i,320)
pop()
}
//when the ball hits the edge and time is a 15 seconds, one player screams and game ends
if (frameCount > 150 & x+25 >= width){
manSuffering.play()
background(0)
noLoop();
}
}
function playerMale(x,y){
push()
strokeWeight(3)
ellipse(x,y,18,25)
//body
line(x,y+12,x,y+50)
line(x,y+30,x-10,y+15)
line(x,y+30,x+10,y+15)
line(x,y+50,x+10,y+65)
line(x,y+50,x-10,y+65)
//eyes
ellipse(x-3,y-2,1,1)
ellipse(x+3,y-2,1,1)
arc(x, y, 12, 15, 1, PI-1)
//hair
line(x,y-12,x,y-22)
line(x-3,y-11,x-10,y-18)
line(x+3,y-13,x+10,y-18)
pop()
}
function playerFemale(x,y){
push()
strokeWeight(3)
ellipse(x,y,18,25)
//body
line(x,y+12,x,y+50)
line(x,y+30,x-10,y+15)
line(x,y+30,x-20,y+30)
line(x,y+50,x+10,y+65)
line(x,y+50,x-10,y+65)
//eyes
ellipse(x-3,y-2,1,1)
ellipse(x+3,y-2,1,1)
arc(x, y, 12, 15, 1, PI-1)
//hair
line(x,y-12,x-10,y)
line(x-2,y-12,x-12,y+2)
line(x+2,y-12,x+12,y+2)
pop()
}
function court(){
push()
fill(0,130,0)
beginShape();
vertex(70, 50);
vertex(330, 50);
vertex(380, 320);
vertex(20, 320);
endShape(CLOSE);
pop()
}
function spectator(x,y){
push()
noStroke()
ellipse(x,y+120,100,200)
ellipse(x,y,50,70)
pop()
}
function ball(){
push()
ellipse(x,y,10,10) //draws the ball
x = x + vx //x-coordinate of ball moves according to x-velocity
y = y + vy //y-coordinate of ball moves according to y-velocity
if (x+25 >= width){ //when ball touches right side, bounces back
vx = random(-80,-30)
vy = random(-5,5)
//crowd cheers when a player gets the ball to the other side
//as time past, players become tired.Play suffering sound instead of 'haha'
ballBouncing.play()
if (frameCount < 125){
crowdCheering.play()
}
if (frameCount < 75){
womanHaha.play()
}else{
womanSuffering.play()
}
}
if (x-25 <= 0){ //when ball touches left side, bounces back
vx = random(30,80)
vy = random(-5,5)
ballBouncing.play()
if (frameCount < 125){
crowdCheering.play()
}
if (frameCount < 75){
manHaha.play()
}else{
manSuffering.play()
}
}
//ball doesn't go off the court
y = constrain(y,50,320)
pop()
}
I started up by pixelating my photo, then I went into the idea of creating a mirror-like, dynamic, and interactive image. Therefore, I created 1500 moving hexagons to show my image. I am satisfied with the beauty and abstractness.
var img;
var hexagon = []
function preload(){
img = loadImage("https://i.imgur.com/VGvokSI.png");
}
//making a hexagon
function makeHexagon(cx, cy, cdx, cdy) {
var h = {x: cx, y: cy, dx: cdx, dy: cdy,
drawFunction: drawHexagon
}
return h;
}
function drawHexagon(){
push()
translate(this.x,this.y)
//hexagon color is the color of the pixel it is at
this.c = img.get(10*this.x,10*this.y)
fill(this.c)
//draws the hexagon from 6 triangles
noStroke()
triangle(0,0,-s,0,-s/2,-s*sqrt(3)/2)
triangle(0,0,-s/2,-s*sqrt(3)/2,s/2,-s*sqrt(3)/2)
triangle(0,0,s,0,s/2,-s*sqrt(3)/2)
triangle(0,0,-s,0,-s/2,s*sqrt(3)/2)
triangle(0,0,-s/2,s*sqrt(3)/2,s/2,s*sqrt(3)/2)
triangle(0,0,s,0,s/2,s*sqrt(3)/2)
//hexagons would bounce backs if touches the edges
if (this.x >= width || this.x <= 0){
this.dx = -this.dx
}
if (this.y >= height || this.y <= 0){
this.dy = -this.dy;
}
this.x += this.dx;
this.y += this.dy;
pop()
}
function setup() {
createCanvas(480,480);
img.resize(4800,4800)
//make 1500 hexagons explode outwards from my left eye, pushed into array
for (var i = 0; i < 1500; i++) {
hexagon[i] = makeHexagon(random(255,260),random(230,250),random(-4,4),random(-4,4))
}
text("p5.js vers 0.9.0 test.", 10, 15);
}
var s = 14
function draw() {
background(200)
image(img,0,0,480,480)
//pixelated because having a clear image of my huge face on wordpress is horrifying
for(var x = 0; x < width; x += 10){
for(var y = 0; y < height; y += 10){
var c = img.get(10*x,10*y);
fill(color(c));
noStroke();
rect(x,y,10,10);
}
}
//draw 1500 hexagons
for (var i = 0; i < 1500; i++) {
hexagon[i].drawFunction()
}
}
Link of the :https://www.novajiang.com/projects/cacophony/
This week I looked at Nova Jiang’s interactive sculpture: Cacophony, created in 2020. Cacophony is a crystal sculpture which gives physical form to the sound of an orchestra tuning. It is generated from a recording of the Sacramento Philharmonic tuning before a performance of Stravinsky’s The Firebird. The media involved are steel, aluminum, Swarovski crystals, and lexan. It is a huge sculpture, having the dimensions of 35’ x 5’ x 5’. It presents cacophony of the opera tuning, but is also harmonic because of the crystal texture and the beautiful look. The shape of the audio is also beautiful. The artist studied in Skowhegan School of Painting and Sculpture in 2009, completed master degree in University of California, Los Angeles, Department of Design Media Arts in 2009, completed bachelor degree of fine arts in University of Auckland, Elam School of Fine Arts in 2007. She mostly do interactive sculptures and paintings. She now lives in LA.
Link of the speaker’s website:https://onyxashanti.bandcamp.com/
Link of the lecture video: https://vimeo.com/channels/eyeo2019/355843363
Onyx Ashanti is a musician, performer, programmer, and inventor of the Sonocyb, a continually evolving, malleable interface of prosthetic synthesizer controllers that Onyx 3D prints at home and uses to articulate electronic sound in conjunction with bodily motion. He discussed his perception of the essence of music, his art and their relationship with technology and human beings. As an electronic music major, his work is intriguing to me as sound and studio effects he created were all automated in a random but nice way. In his video, he talks about how he link values generated from multiple aspects of the body to automate sounds, for example, automating delay through different body movements. He is not only artistic: there’s also science and technology involved: By keeping the rhythm within the range of 1-16 hz, which is more science related, Ashanti was able to produce music that makes more sense; and by using 3D printing, Ashanti can truly wear the sensors around his body like clothes, allowing him to perform more subtle musical gestures through body gestures. I learned that I probably can try to link my artwork with myself more. since I’ve been a music producer using VSTI only, I can try to record songs instead to get a more authentic instrument feeling.
]]>Link of the project:https://benfry.com/genomevalence/
This project is called genome valence by Ben Fry, which is a visual representation of the algorithm most commonly used for genome searches.
The genome of an organism is made up of thousands of genes (34,000 for the human, 20,000 for the mouse, and 14,000 for the fruitfly). A gene is made up of a sequence of As, Cs, Gs, Ts that averages 1000 to 2000 letters apiece. To handle this amount of information, the BLAST algorithm breaks each sequence of letters into 9 letter parts. Every unique nine-letter set is represented as a point on the screen. I’m very surprised by the complexity of the project. The creator’s artistic sensibilities are manifest through the integration of biology, computer science, and art.
var nPoints = 500
function setup() {
createCanvas(400, 400);
background(220);
text("p5.js vers 0.9.0 test.", 10, 15);
frameRate(100)
}
function draw() {
//background color varies with mouse X and mouse Y
background(map(mouseX,0,width,0,144),map(mouseY,0,width,0,122),255)
translate(25,25)
//draw the 16 devil's curves
for (x = 25; x < width; x += 100){
for (y = 25; y < height; y += 100){
push()
translate(x,y)
drawDevilCurve()
pop()
}
}
}
function drawDevilCurve(){
//Devil's Curve
//https://mathworld.wolfram.com/DevilsCurve.html
var x;
var y;
var a = mouseX/15;
var b = constrain(mouseY/5, 0, a*100);
fill(max(min(0,width),mouseX/2),max(min(0,width),mouseY/2),255);
beginShape();
for (var i = 0; i < nPoints; i++) {
var t = map(i, 0, nPoints, 0, TWO_PI);
x = cos(t) * sqrt((sq(a) * sq(sin(t)) - sq(b) * sq(cos(t))) / (sq(sin(t)) - sq(cos(t))));
y = sin(t) * sqrt((sq(a) * sq(sin(t)) - sq(b) * sq(cos(t))) / (sq(sin(t)) - sq(cos(t))));
vertex(x, y);
}
endShape(CLOSE);
}
I used Devil’s curve because i was intrigued by its name, and the demonstration of devil’s curve on the website is really fancy so i wanted to try it out. I made one devil’s curve first, and played with how the mouse would affect the shape of it. After having that one devil’s curve, i thought that i might be able to make a kaleidoscope using devil’s curves. So I wrote an for loop, and I changed the mouse X mouseYs to make sure that there would be significant changes when we move mouse X and mouse Y no matter where the mouse is ( i’m saying this because previously some manipulations of mouse X and mouse Y may not greatly impact the picture).
]]>I used the rotation of the hexagons and pointer to represent second hand; smallest circles also represent second hand, middle size circles represent minute hand, and largest circles represent hour hand. The background changes from dark to white every 24 hours representing a day. It is fun to think of various representations of time.
function setup() {
createCanvas(480, 480);
background(220);
text("p5.js vers 0.9.0 test.", 10, 15);
frameRate(1)
angleMode(DEGREES)
rectMode(CENTER)
}
var s = [100,20,100]
var angles = 0
var angles1 = 150
var angles2 = 150
var radius = 0
var colorBackground = 0
var angleEllipse1 = 0
var angleEllipse2 = 0
var angleEllipse3 = 0
function draw() {
background(colorBackground)
//background color changes from black to white and resets every day
if(colorBackground <= 255){
colorBackground += 255/24/3600
}
if(colorBackground >= 255){
colorBackground = 0
}
//background strings
stroke(200,200,220);
strokeWeight(.4)
for (var x = 0; x <= 50; x += .3) {
line(480, 50, 480/50 * x - 3, 0); //right upwards lines
}
for (var x = 20; x <= 80; x += .3) {
line(480, 50, 480/40 * x, 480); //right downwards lines
}
for (var x = 0; x <= 30; x += .3) {
line(0, 430, 480/60 * x, 0); //left upwards lines
}
for (var x = 0; x <= 30; x += .3) {
line(0, 430, 480/30 * x, 480); //left downwards lines
}
//draw bottom hexagon and rotates clockwise
push()
translate(240,320)
rotate(angles2)
noStroke()
fill(255)
hexagon(s[2])
angles2 +=10
pop()
//draw second hand and rotates anticlockwise
push()
translate(240,320)
fill(102,91,169)
noStroke()
rotate(angles)
hexagon(s[1])
strokeWeight(7)
stroke(200,200,220)
line(0,0,0,-50)
pop()
//draw upper hexagon and rotates anticlockwise
push()
translate(240,150)
noStroke()
fill(0)
rotate(angles1)
hexagon(s[0])
angles1 -= 10
pop()
//draw second hand and rotates clockwise
push()
translate(240,150)
fill(102,91,169)
noStroke()
rotate(angles)
hexagon(s[1])
strokeWeight(7)
stroke(200,200,220)
line(0,0,0,-50)
angles += 6
pop()
//draw circles that rotate once every minute, hour, and day
push()
//rotate once every minute
translate(240,240)
fill(100,200,220)
rotate(angleEllipse1)
ellipse(0,-180,10,10)
ellipse(0,180,10,10)
ellipse(180,0,10,10)
ellipse(-180,0,10,10)
angleEllipse1 += 6
pop()
push()
//rotate once every hour
translate(240,240)
fill(50,100,110)
rotate(angleEllipse2)
ellipse(0,-200,15,15)
ellipse(0,200,15,15)
ellipse(200,0,15,15)
ellipse(-200,0,15,15)
angleEllipse2 += 0.1
pop()
push()
//rotate once every day
translate(240,240)
fill(10,50,55)
rotate(angleEllipse3)
ellipse(0,-220,20,20)
ellipse(0,220,20,20)
ellipse(220,0,20,20)
ellipse(-220,0,20,20)
angleEllipse3 += 0.1/24
pop()
print(colorBackground)
}
//set up hexagon
function hexagon(s){
beginShape()
vertex(s,0)
vertex(s/2,s*sqrt(3)/2)
vertex(-s/2,s*sqrt(3)/2)
vertex(-s,0)
vertex(-s/2,-s*sqrt(3)/2)
vertex(s/2,-s*sqrt(3)/2)
endShape(CLOSE)
}