drawing.js

URL: https://mirkwood.cs.edinboro.edu/~bennett/class/cmsc3780/spring2026/notes/javascript/code/start_class/drawing.js
 
import {FindRoot} from "./newton.js"

export function DrawX(inset, canvas) {
    const ctx = canvas.getContext("2d")
    const width = canvas.width
    const height = canvas.height

    ctx.clearRect(0,0, width, height)

    ctx.beginPath()
    ctx.strokeStyle = "Red";
    ctx.moveTo(inset, inset)
    ctx.lineTo(width - inset, height - inset)
    ctx.stroke()

    ctx.beginPath()
    ctx.strokeStyle = "Blue";
    ctx.moveTo(width - inset, inset)
    ctx.lineTo(inset, height - inset)
    ctx.stroke()

    let smallInset = inset/2
    ctx.beginPath()
    ctx.strokeStyle = "Green";
    ctx.moveTo(smallInset, smallInset)
    ctx.lineTo(width - smallInset, smallInset)
    ctx.lineTo(width - smallInset, height - smallInset)
    ctx.lineTo( smallInset, height - smallInset)
    ctx.lineTo(smallInset, smallInset)
    ctx.stroke()
}

function DoDots(imageData) {
    let width  = imageData.width
    let height = imageData.height
    let data = imageData.data

    for(let dots = 0; dots < 100; ++dots) {
        let x = Math.round(Math.random() * width )
        let y = Math.round(Math.random() * height )

        let offset = (y * width + x) * 4
        data[offset + 0] = Math.round(Math.random() * 255)
        data[offset + 1] = Math.round(Math.random() * 255)
        data[offset + 2] = Math.round(Math.random() * 255)
        data[offset + 3] = 255
    }

}

let minX = -1.5
let minY = -1.5
let RANGE = 3

const COLORS = [[0,0,0], [255,0,0], [0,255,0], [0,0,255]]

function NewtonFractal(imageData) {
    let width  = imageData.width
    let height = imageData.height
    let data = imageData.data

    let realX = minX
    let realY = minY

    let dx = RANGE/ width
    let dy = RANGE/ height

    for(let y = 0; y < height; ++y) {
       for(let x = 0; x < width; ++x) {

           const answer = FindRoot(realX, realY)
           const offset = (y * width + x) * 4

           let iterations = answer.iterations/2
           if (iterations == 0) {
              iterations = 1 
           }
             
           if (answer.root < COLORS.length) {
               for(let rgb = 0; rgb < 3; ++rgb) {
                   data[offset+rgb] = COLORS[answer.root][rgb]/iterations
               }

               data[offset+3] = 255
           } else {
               console.log("Root found out of color range")
           }

           realX += dx
       }
       realX = minX
       realY += dy
    }
}

export function DrawImage(canvas) {
     const width= canvas.width
     const height = canvas.height
     const ctx = canvas.getContext("2d")

     const imageData = ctx.createImageData(width, height)

     //DoDots(imageData)
     NewtonFractal(imageData)

     ctx.putImageData(imageData,0,0)
}