Category Archives: Calling the Future

Calling the Future: Multi-Format Color Picker

For my project, I decided to do a simple enough color picker with the twist that it shows hex, rgb and hsl values for the color decided through the rgb sliders in real time. This required borrowing and crediting the Javascript code necessary to quickly convert between the formats. There was also the difficulty of figuring out how to properly change the center text so it will always be visible upon the background. I originally attempted this through javascript, but ended up finding a simple enough CSS-only solution for it involving text clipping and filtering.

GIF Showing Color Picker

PS In the GIF the compression makes it look like the sliders pop in and out of existence. They do not do that in person.

Here’s the code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Calling the Future</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="script.js"></script>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="rgbSliders">
            <input type="range" min="0" max="255" value="50" class="slider" id="rSlider">
            <input type="range" min="0" max="255" value="50" class="slider" id="gSlider">
            <input type="range" min="0" max="255" value="50" class="slider" id="bSlider">
    </div>
    <div id="hexCode"></div>
    <div id="hexRGBCode"></div>
    <div id="hexHSLCode"></div>
</body>
</html>
@import url('https://fonts.googleapis.com/css?family=Fira+Mono:400,500,700');

html,body{
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background-color: grey;
    font-family: 'Fira Mono', monospace;
    font-weight: bold;
}
#rgbSliders{
    width: 20vh;
    height: 14vh;
    position: absolute;
    top: calc(50vh + 10vh);
    left: calc(50vw - 10vh);
}
    .slider {
        -webkit-appearance: none;  
        appearance: none;
        width: 100%; 
        height: 10px; 
        background: rgb(20,20,20);
        outline: none; 
        opacity: 0.7; 
        -webkit-transition: .2s; 
        transition: opacity .2s;
        border-radius: 12%; 
        margin: 2vh;
    }
        .slider:hover {
            opacity: 1; 
        }
        .slider::-webkit-slider-thumb {
            -webkit-appearance: none; 
            appearance: none;
            width: 25px; 
            height: 25px; 
            cursor: pointer;
            border-radius: 50%; 
            border: 5px solid rgb(20,20,20);
        }
            #rSlider::-webkit-slider-thumb{background: red}
            #gSlider::-webkit-slider-thumb{background: green}
            #bSlider::-webkit-slider-thumb{background: blue}

#hexCode{
    width: 20vw;
    height: 8vh;
    font-size: 6vh;
    text-align: center;
    box-sizing: border-box;
    position: absolute;
    top: calc(50vh - 4vh);
    left: calc(50vw - 10vw + 1vh);
    background: inherit;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-align: center;
    filter: invert(1) grayscale(1) contrast(9);
}
#hexRGBCode{
    width: 20vw;
    height: 4vh;
    font-size: 1.8vh;
    text-align: center;
    box-sizing: border-box;
    position: absolute;
    top: calc(50vh + 4vh);
    left: calc(50vw - 10vw + 1vh);
    background: inherit;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-align: center;
    filter: invert(1) grayscale(1) contrast(9);
}
#hexHSLCode{
    width: 20vw;
    height: 4vh;
    font-size: 1.8vh;
    text-align: center;
    box-sizing: border-box;
    position: absolute;
    top: calc(50vh + 7vh);
    left: calc(50vw - 10vw + 1vh);
    background: inherit;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-align: center;
    filter: invert(1) grayscale(1) contrast(9);
}
// Update Values
    window.setInterval(function(){
        var rColor = $("#rSlider").val();
        var gColor = $("#gSlider").val();
        var bColor = $("#bSlider").val();
        var backgroundColor = "rgb(" + rColor + ","  + gColor + "," + bColor + ")";
            $("body").css("background-color",backgroundColor);
        
        var hexColor = rgb2hex("rgba(" + rColor + ","  + gColor + "," + bColor + ")");
            $("#hexCode").html(hexColor);

        var hexRGBCode = "rgb(" + rColor + ","  + gColor + "," + bColor + ")";
            $("#hexRGBCode").html(hexRGBCode);

        var hexHSLCode = rgbToHsl(rColor,gColor,bColor);
            $("#hexHSLCode").html(hexHSLCode);
    },10);

// Sourced From https://jsfiddle.net/Mottie/xcqpF/1/light/
    //Function to convert rgb format to a hex color
        function rgb2hex(rgb){
            rgb = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
            return (rgb && rgb.length === 4) ? "#" +
            ("0" + parseInt(rgb[1],10).toString(16)).slice(-2) +
            ("0" + parseInt(rgb[2],10).toString(16)).slice(-2) +
            ("0" + parseInt(rgb[3],10).toString(16)).slice(-2) : '';
        }   

// Sourced From https://stackoverflow.com/questions/2353211/hsl-to-rgb-color-conversion
    //Function to convert rgb format to a hsl color
        function rgbToHsl(r, g, b){
            r /= 255, g /= 255, b /= 255;
            var max = Math.max(r, g, b), min = Math.min(r, g, b);
            var h, s, l = (max + min) / 2;
        
            if(max == min){
                h = s = 0; // achromatic
            }else{
                var d = max - min;
                s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
                switch(max){
                    case r: h = (g - b) / d + (g < b ? 6 : 0); break;
                    case g: h = (b - r) / d + 2; break;
                    case b: h = (r - g) / d + 4; break;
                }
                h /= 6;
            }
        
            return "hsl(" + String(h).substring(0,4) + "," + String(s).substring(0,4) + "," + String(l).substring(0,4) + ")";
        }

 

calling the future

fullscreen:  https://editor.p5js.org/full/ryrlfsZiQ

editor:  https://editor.p5js.org/Ruojin/sketches/ryrlfsZiQ

hh

code:

var aSlider,bSlider;

//temperature
var b=aSlider.value();
var r=255-b;
var c0l0r=color(b,0,r);

function setup() {
createCanvas(windowWidth, windowHeight);
//sliders
aSlider= createSlider (0,255,100);
aSlider.position(300,400);
bSlider= createSlider (10,600,100);
bSlider.position(300,450);
textSize(18);
}

function draw() {
var b=aSlider.value();
var r=255-b;
var c0l0r=color(b,0,r);

background(c0l0r);

//sunshine
fill(255,255,0);
noStroke();
var radius = bSlider.value();
ellipse(windowWidth/2,windowHeight/2,radius,radius);

//background signs
if(mouseIsPressed){
sun (30,30);
sun (190,30);
sun (350,30);
sun (510,30);
sun (660,30);
rain (110,120);
rain (270,120);
rain (430,120);
rain (590,120);

sun (30,210);
sun (190,210);
sun (350,210);
sun (510,210);
sun (660,210);
rain (110,300);
rain (270,300);
rain (430,300);
rain (590,300);

sun (30,390);
sun (190,390);
sun (350,390);
sun (510,390);
sun (660,390);
rain (110,480);
rain (270,480);
rain (430,480);
rain (590,480);

sun (30,570);
sun (190,570);
sun (350,570);
sun (510,570);
sun (660,570);
rain (110,660);
rain (270,660);
rain (430,660);
rain (590,660);

sun (30,750);
sun (190,750);
sun (350,750);
sun (510,750);
sun (660,750);
rain (110,840);
rain (270,840);
rain (430,840);
rain (590,840);

}

//text
text(“How is the wheather today?”,200,350)
text( “Temperature”,190,410);
text(“Sunshine”,210,460);

}

function sun (x,y){
//background signs appear

fill(255);
ellipse(x,y,50,50);

}

function rain (x,y){
fill (255);
triangle(x,y,x+20,y-40,x-20,y-40);
}

Interactive Tears

At first, I tried to make a program that mapped our solar system that had a sliding bar that would control a pointer that said what the planet name and number was. Here’s a screenshot of the solar system I created.

Solar System

However, P5 crashed and the autosave was not on so I lost all my work so I decided to edit my eye crying from last week.

Now, when pressing the “cry” button the tear moves down the cheek. The slider moves the tear up and down the face.

 

Here’s the code:

var x = 70
var cry
function setup() {
createCanvas(400, 400);
button = createButton(“CRY”);
button.mousePressed(tear);
slider = createSlider(70, 400, 12,1);
slider.changed(crying);
}

function draw() {
background(255, 229, 229);

noFill();
bezier(315, 20, 50, 10, 90, 45, 20, 80);
bezier(315, 20, 40, 100 , 100, 40, 20, 80);

fill(128, 77, 0);
ellipse(150, 40, 37, 37);

fill(0);
ellipse(150, 40, 15, 15);

fill(255);
ellipse(155, 35, 5, 5);

fill(182, 184, 246);
ellipse(70, x, 10, 15);
button.mousePressed(tear);
}

function tear()
{

x = x + 50;
if(x > 400)
{
x = 70;
}
}

function crying()
{
x = slider.value();

}

 

Here’s a link to the program itself:

 https://editor.p5js.org/aramakrishnan/sketches/SJ3_70YcQ 

Calling the Future

https://editor.p5js.org/ach549@nyu.edu/sketches/Hyj_Wtbs7

For this week, I made a slider controlled face that can represent a person’s mood!

I wanted to build off my last week’s self portrait, but couldn’t figure out how to get the slider controlled mouth to stay in front of the bounce. I also wanted to use the same slider to control the smiley face color, but couldn’t figure out how to use the same input for two outputs.

“Calling The Future”

https://editor.p5js.org/full/rkz3e_Zi7

var Slider, gSlider, bSlider;
var button;
var canvastext;
var input;
var title;

function setup() {
// create canvas
createCanvas(windowWidth, windowHeight);
textSize(15);
noStroke();

// create sliders
rSlider = createSlider(0, 255, 100);
rSlider.position(20, 20);
gSlider = createSlider(0, 255, 0);
gSlider.position(20, 50);
bSlider = createSlider(0, 255, 255);
bSlider.position(20, 80);

input = createInput();
input.position(windowWidth/2, windowHeight/2);

button = createButton('submit');
button.position(input.x + input.width, windowHeight/2);
button.mousePressed(greet);

title = createElement('h1');
title.position(windowWidth/2, windowHeight/3);
}

function draw() {
var r = rSlider.value();
var g = gSlider.value();
var b = bSlider.value();
background(r, g, b);
text("red", rSlider.x * 2 + rSlider.width, 35);
text("green", gSlider.x * 2 + gSlider.width, 65);
text("blue", bSlider.x * 2 + bSlider.width, 95);
}

function greet() {
var canvastext = input.value();
title.html(canvastext);
input.value('');
}

Troubleshooting:

The process to get this callback working was a little tedious because I had to figure out the code of a new concept that was in the p5.js library, which had to do with getting text to appear on the canvas from a button. I also learned form the example in the library to execute my RGB sliders to change the background color of my canvas.

Sources and Attribution:

https://p5js.org/examples/dom-input-and-button.html

https://p5js.org/examples/dom-slider.html

@Stoker — thanks so much for helping me debug my code!

A game with high score record, and you can change the difficulty with the bar

https://editor.p5js.org/full/rJItmRDcm

All insturctions are already inside the game

The current issue is that it could not store the high score when you exsit, also there’s so game play bugs to be solved.

probabely going to make a cellphone version if I have time

code:

function setup() {
createCanvas(400, 400);
hardslider = createSlider(1, 3, 1);
textSize(20);
textAlign(CENTER, CENTER);
input = createInput();
input.position(135, 300);
button = createButton(‘start’);

button.position(input.x + input.width, 300);

}
let score=0;
let hname=”none”;
let hscore=0;
let page =1;
let x = 200;
let y = 350;
let b = false;
let W;
let A;
let S;
let D;
let J;
let timer1 = 0;
let timer2 = 0;
let timer3 = 0;
let action = 5;
let pspeed = 4;
let espeed = 3;
let gspeed = 60;
let sspeed = 20;
let army = [];
let bullets = [];
let hp = 3;
let hard=1;

function keyPressed() {
if (key === “w”) {
W = true;
}
if (key === “a”) {
A = true;
}
if (key === “s”) {
S = true;
}
if (key === “d”) {
D = true;
}
if (key === “j”) {
J = true;
}
}

function keyReleased() {
if (key === “w”) {
W = false;
}
if (key === “a”) {
A = false;
}
if (key === “s”) {
S = false;
}
if (key === “d”) {
D = false;
}
if (key === “j”) {
J = false;
}
}

function actionCheck() {
if (A === true) {
if (W === true) {
action = 7;
} else if (S === true) {
action = 1;
} else {
action = 4;
}
} else if (D === true) {
if (W === true) {
action = 9;
} else if (S === true) {
action = 3;
} else {
action = 6;
}
} else {
if (W === true) {
action = 8;
} else if (S === true) {
action = 2;
} else {
action = 5;
}
}
}

function enemy(x, y, number) {
this.speed = espeed;
this.move = function() {
if (y === 390) {
this.destroy();
hp = hp – 1;
}
for (let i = 0; i < bullets.length; i++) {//collision check
let j= bullets[i].checkx()
let w= bullets[i].checky()
if (j > x-20 && j < x + 20 && w < y&& w > y-40)
{
bullets[i].destroy();
this.destroy();
score=score+1*hard;
}
}
rect(x-10, y-10, 20, 20);
y = y + this.speed;
}

this.destroy = function() {
army.splice(this.number, 1);
}
}

function bullet(x, y,number) {
this.speed = 10;
this.move = function() {
if (y < 0) {
this.destroy();
}
// xb[number]=x;
// yb[number]=y;
ellipse(x, y, 10, 10);
y = y – this.speed
}
this.checkx =function()
{
return x;
}
this.checky =function()
{
return y;
}
this.destroy = function() {
bullets.splice(this.number, 1);
}

}
function start()
{
hard=hardslider.value()
gspeed=60/hard
score=0;
input.hide()
button.hide()
hardslider.hide()
hp=3;
timer1=0;
timer2=0;
timer3=0;
bullets.splice(0);
army.splice(0);
page=2;
}

function draw() {
actionCheck(); //control start
if(page===1)// in manu
{
fill(255)
background(140);
text(“use WASD to control the spaceship”,200,50);
text(“press J to shot”,200,100);
text(“If enemy hit the ground three times,”,200,150)
text(“you die”,200,200)
text(“Please enter your name and start”,200,250)
text(“High score :”,100,350)
text(hname,200,350)
text(hscore,250,350)
button.mousePressed(start);
}
if(page===2)// if in game
{

if (action === 4) {
x = x – pspeed;
}
if (action === 1) {
x = x – sqrt(pspeed);
y = y + sqrt(pspeed);
}
if (action === 3) {
x = x + sqrt(pspeed);
y = y + sqrt(pspeed);
}
if (action === 7) {
x = x – sqrt(pspeed);
y = y – sqrt(pspeed);
}
if (action === 9) {
x = x + sqrt(pspeed);
y = y – sqrt(pspeed);
}
if (action === 6) {
x = x + pspeed;
}
if (action === 8) {
y = y – pspeed;
}
if (action === 2) {
y = y + pspeed;
}
if (J === true) {
if (b === false) {
b = true;
bullets.push(new bullet(x, y – 15,bullets.length))
}

}

if (x < 0) {
x = 0;
}
if (x > 400) {
x = 400;
}
if (y < 0) {
y = 0;
}
if (y > 365) {
y = 365;
} //controll end

background(70); //characer and ground generation
fill(150);
triangle(x – 10, y + 10, x + 10, y + 10, x, y – 20);
fill(255, 0, 0);
rect(0, 375, 400, 25);

fill(255, 255, 0); //bullet generation
for (let i = 0; i < bullets.length; i++) {
bullets[i].move();
}
if (b === true) { //bullet reload
if (timer1 < sspeed) {
timer1 += 1;
} else {
timer1 = 0;
b = false;
}
}

fill(0, 0, 255); //enemy generation
for (let i = 0; i < army.length; i++) {

army[i].move();
}
timer2 += 1; //enemy reload
if (timer2 === gspeed) {
army.push(new enemy(random(40, 360), 0, army.length))
timer2 = 0;
}
fill(0,255,0)//draw hp
rect(0,0,20,hp*20)
if(hp===0)
{
page=3;
}
}// end of gaming loop

if(page === 3)//game over
{
if(score>hscore)
{
hscore=score;
hname=input.value();
}
fill(255,0,0)
background(140);
text(“Game over”,200,200);
text(“Your score is”,200,250)
text(score,200,300)
timer3=timer3+1
if(timer3===120)
{
page=1
button.show()
input.show()
hardslider.show()
}
}
}

mock website

Last week, I was really embarrassed with the lack of skill I could show with p5 on my production assignment. For some reason, the minute I have to think about equations and numbers, my mind goes blank (its also been three years since I have worked with equations to this level). I realized that if I started to think about each aspect as a layer as it is on Adobe Suite, I may be better able to work through my mental roadblocks.

Last Thursday, I lost access to my Facebook and in turn, Instagram. My accounts were “blocked” because Facebook identified them as hacked. Facebook was most likely trying to shut down the accounts that were compromised in its hack scandal. While I was fortunately able to regain access to my accounts, I wanted to create something inspired by hacking. I also wanted to play tribute to Yung Jake and his work title, Embedded, which was the piece that inspired me to become interested in interactive media. (Here is the link to Embedded)

I am still struggling with my project so it is not complete, but I plan to finish by tonight. Yet, I wanted to document my work up till now.

I was able to understand how the “user input” feature works in class. So I decided to first build what I wanted my project to feel like. Basically, when a user will search something into Google. Once they have typed it in and hit enter, there will be  glitch and the user will experience their computer being hacked. I want the experience to be sudden, unexpected, and the user to feel out of control. I think it is difficult to understand how scary  hacking is until you actually experience it and I hope that this project will at least capture a portion of that.

Currently I have built out everything besides the input. I will just iterate upon the code to adapt to the input later, however, I wanted to just get the parts I did not have experience with completed first.

full screen: https://editor.p5js.org/full/BJ1kwC097

edit: https://editor.p5js.org/andrikumar/sketches/BJ1kwC097

This blog post will be updated at the end of the night.

 

UPDATE:  I have finally completed the project to the best of  my abilities. Unfortunately, this is not exactly what I originally wanted.

My Struggles (the thorns):

-I wanted to incorporate the user’s input in the glitch/hack; however, once the “blue glitch” gifs were added, I was no longer able to reveal text in the keyPressed function. For some reason p5 could only depict images, gifs, and videos in the function. However, if I commented out the gifs, then it would show text. I do not know if it is bug in p5 or something I was doing wrong

-I wanted to have multiple layers of interactions. Like after the glitch occurs, if the user double clicked their mouse more glitch effects would happen; however, p5 would not output this.

-I also wanted some of the virus gifs to follow the mouse; however, for some reason mouseX and  mouseY were not being completed.

-I also wanted to end the loop at a certain time and make the screen go black; however, noLoop(); and exit(); were not showing up either. The only thing I could do was add more gifs/videos/images

What I am proud of (rose):

-I was able to get practice using a variety of p5 functions and importing different files

-I was able to get through a lot of emotional and mental road blocks by thinking of my code like layers rather than random equations, etc.

 

In Conclusion,

p5 is really cool and I thought I would be able to successfully create an interactive mock website. However, I clearly need to understand a bit more about debugging and the way p5 functions work before I continue using it. I really have no idea how the functions are working in relation to one another and I think once I do, I will understand why my gifs kept overriding every other function.

Visual Spectrum

I wanted to make some kind of visualization of the color spectrum, where a user could control the color and wavelength of a sine wave type object with a slider. My search for a cool-looking sine wave led me to this video:

I think this kind of stuff is much more useful than the basic tutorial videos or blindly scrolling through the references. It’s a good medium, for me at least, since it introduced me to terms I didn’ t know about before, and I was able to follow along in the coding and breakdown process. After the video, I also took what I learned about mapping and lighting to  get the end result:

https://editor.p5js.org/full/SyoEt8ljm

code:

let w = 30;
let angle = 0;
let ma;
let maxD;
let nm;

let wavelength;
let freqslider;
let div;

function setup() {
  slider = createSlider (400, 750);
  slider.mouseReleased(gatherWavelength);
  slider.position(10,20);
  div = createDiv("Current wavelength: " + wavelength);
  createCanvas(400, 400, WEBGL);
  ma = atan(1 / sqrt(2));
  maxD = dist(0,0,200,200);
}
 
function gatherWavelength() {
  wavelength = slider.value();
  div.html ("Current wavelength: " + wavelength);
}

function draw() {
  let wavelength = map(slider.value(),400,625,255,0);
  colorMode(RGB);
  background(210);
  colorMode(HSB);
  ortho(-300,300,-300,300,0,1000);
  noStroke();
  rotateX(-QUARTER_PI);
  rotateY(ma);
    
  pointLight(wavelength, 255, 255, 0, 0, 400);
  pointLight(wavelength, 50, 100, -300, -300, height / 2);
  directionalLight(wavelength, 150, 150, -0.8, -0.8, 0);
  
  let offset = 0;
  for(let z = 0; z < width; z += w){
    for(let x = 0; x < width; x += w){
    push();
    let d = dist(x,z,width/2,height/2);
    let offset = map(d, 0, maxD, -PI, PI);
    let a = angle + offset;
  let h = map(sin(a),-1,1,0,200);
  translate(x-width/2,0,z-width/2);
  ambientMaterial(210);
 box (w-2,h,w-2); 
    pop();}
  }
	
  let nm = map(slider.value(),400,750,0.3,0.1);
  angle -= nm;
  
  
}

 

 

 

Personal Diary

https://editor.p5js.org/yunglizard/sketches/B1yQ61eom

Personal Diary Fullscreen

The idea for my project was to create a personal online diary for users to have a daily outlet. The diary would ask how their day was, which would be measured with a slider, and tell them to “Spill the Tea!” about their day, which can be done using a text box. The background changes colors to represent the different moods one could be in. The changing of the size of the shape is also used to represent how good or bad one’s day was.

Not everyone gets to check in with someone about how they’re doing and/or feeling, which is important because it keeps up with one’s mental and physical health. This design was supposed to be an interactive outlet for the users to depend on for check-in. I think my design could have more personality and be more responsive to the user when they submit their answer.

Challenges: I struggled with writing 2D text on the 3D WEBGL mode on. I wanted the text to change when the buttons were pressed or something to change in order to respond to the user.  I also would have liked to make the background change colors corresponding to bad and good moods more.

 

My Code :
var button;
var slider;
var myFont;

function setup() {

var inp = createInput(‘What happened today?’);
button = createButton(‘Spill the Tea!’);
button.position(19, 19);
button.mousePressed(changeBG);
inp.input(myInputEvent);
createCanvas(windowWidth, windowHeight, WEBGL);
background(220);
colorMode(HSB);
slider = createSlider(0, 360, 0, 30);
slider.position(210,230);
slider.style(‘width’, ‘180px’);

button = createButton(‘This is your personal diary! How was your day?’);
button.position(210, 180);
button.mousePressed(changeBG);

}

function draw() {
var val = slider.value();
background(val, 100, 100, 10);

//shape

rotateX(frameCount * 0.01);
rotateY(frameCount * 0.01);
torus(mouseX, 15);

}

function myInputEvent() {
console.log(‘you are typing: ‘, this.value());
}

function changeBG() {
var val = random(150,0,200);
background(val);
}

Calling the future

editor 

full screen

calling the future
calling the future

 

try type in other words

try hold your mouse

 

code:

//wall variable
var f=0;
var c=[0,10,20,30,40,50,60,70];
var frame=0;
var a=0;
var i=0;
var bright=100;

//text&ripple
let info;
let button;
let displayText;
var textbright=40;

function setup() {
createCanvas(940, 875);
background(0);
colorMode(HSB,100);
strokeWeight(3);
info=createInput(“NIKE”);
button=createButton(“ENTER”);
button.mousePressed(updateText);

}

function updateText(){
displayText=info.value();
}

function draw() {

leftWall();
rightWall();
timer();
display();

function leftWall(){
for(var i=0; i<940/50;i++){
stroke(c[i-13+a],100,bright);
line(i*20,0,i*20,-(875/940)*i*20+875);
}
}

function rightWall(){
for(var i=940/33; i<940/20;i++){
stroke(c[i-940/33-a],100,bright);
line(i*20,0,i*20,(875/940)*i*20);
}
}

function timer(){
if(frameCount-frame==5) {
a++;

frame=frameCount;
}
if(mouseIsPressed){
a=0;
bright=100;
}
else{
bright–;
textbright–;
}
}

function display(){
if(mouseIsPressed){
textbright+=6;
}
textSize(60);
fill(50,50,textbright);
text(displayText,940/2-70,875/2);
}

}

boucing game

Initial model

However, it can only bounce once.

Second model

I turned out the mistake is I confused pX with pY.

Third model

I add everything, but the score can not show.

FINALLY

I realize I did not add a function for updating scores.

However, the ball is still stuck in the boards sometimes which causes the miscounting of the score.

I narrow the Y range of position that can trigger the bouncing to reduce the bug, but it still possible to be stuck in theory.

Thank Wuji for helping me find another bug in my simple game which is because of the weights of the lines, there are mismatches of the visible lengths and real lengths. Thus, I rewrite the real length to make the ball interact with the visible length.

https://editor.p5js.org/full/SJrFTX3q7

We love red fruit

https://editor.p5js.org/totallyhypnosquid/sketches/r1HF8qiqQ

For this week’s assignment, I wanted to have a drop menu allow you to choose between a: Cherry, Pear, and Grape. When you choose between the fruit it would change the text to a matching color and give the circles that follow your mouse the same color.

I encountered a problem that halted my progress however.

I tried to do an “if statement” so that what you chose would change to the appropriate color, but for some reason I could not get this to work, it would only change the color to one selected of the three colors (red),so I changed the fruit to be all red fruit. Nonetheless the project was very simple but I will keep working to see if I can learn to program this better so perhaps I can include the different colors.