Author: Cody

Final Project

sketch
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.

Project 11

sketch
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.

LO 11

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.

Project 10

//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.

sketch
//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()
}

Project 09

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.

cody.09project
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() 
    }
}

LO9

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.

LO8

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.

LO7

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.

Project 7

sketch
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).

Project 6

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.

sketchDownload
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)
}